如何在WP内容中将src更改为data-src for iframe?

时间:2020-02-02 作者:D_P

我需要换衣服srcdata-src 对于Wordpress内容内的iFrame并添加类lazy. 我试着这样做:

function iframe_image_lazy_load($the_content) {
    $thecontent = get_the_content();
        if(!empty($thecontent)) {
            libxml_use_internal_errors(true);
            $post = new DOMDocument();
            $post->loadHTML(mb_convert_encoding($the_content, \'HTML-ENTITIES\', \'UTF-8\'));
            $iframes = $post->getElementsByTagName(\'iframe\');
            foreach( $iframes as $iframe ) {
                if( $iframe->hasAttribute(\'data-src\') ) continue;
                $clone = $iframe->cloneNode();
                $src = $iframe->getAttribute(\'src\');
                $iframe->removeAttribute(\'src\');
                $iframe->setAttribute(\'data-src\', $src);
                $srcset = $iframe->getAttribute(\'srcset\');
                $iframe->removeAttribute(\'srcset\');
                if( ! empty($srcset)) {
                    $iframe->setAttribute(\'data-srcset\', $srcset);
                }
                $iframeClass = $iframe->getAttribute(\'class\');
                $iframe->setAttribute(\'class\', $iframeClass . \' lazy\');
            };
            return $post->saveHTML();
        }
    }
add_filter(\'the_content\', \'iframe_image_lazy_load\', 15);
它基于其他工作片段,但用于图像。这样行吗?

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

您问题中的代码段是一个过滤器,但它没有正确构建:

过滤器需要一个函数,该函数将要过滤的内容作为第一个参数,并返回新版本。您的函数忽略第一个参数,中断已做的任何更改。您的函数并不总是返回值。因此,让我们从函数开始:

function iframe_image_lazy_load($the_content) {
    $thecontent = get_the_content();
        if(!empty($thecontent)) {
            ... do modifications to iframes
            return $post->saveHTML();
        }
    }
add_filter(\'the_content\', \'iframe_image_lazy_load\', 15);
首先,没有要修改的iFrame,这些iFrame发生在the_content 过滤器,并作为参数传入,但您忽略了这一点并获得了原始值。

因此,您正在使用的字符串只包含OEmbed URL,没有iFrame。让我们修复以下问题:

function iframe_image_lazy_load($content) {
    if(!empty($content)) {
        ... do modifications to iframes
        return $post->saveHTML();
    }
}
add_filter(\'the_content\', \'iframe_image_lazy_load\', 15);
注意,我使用了传递给函数的变量,而不是忽略它并检索原始内容。我还修复了缩进级别,不良的缩进是获取bug的一种很好的方法。

接下来,if语句是不必要的,让我们将其转换为一个守卫并尽早退出:

function iframe_image_lazy_load($content) {
    if(empty($content)) {
        return $content;
    }
    ... do modifications to iframes
    return $post->saveHTML();
}
add_filter(\'the_content\', \'iframe_image_lazy_load\', 15);

OEmbed过滤器

用包含iframe的HTML字符串来考虑这些内容是一种有限而狭隘的查看方式。这些是Oembed!所以为什么不过滤oEmbed呢,我们甚至可以使用浏览器原生的延迟加载!为什么要通过取消JS实现的所有节省来模拟延迟加载?

类似这样:

function lazy_loaded_iframes( $code ) {
    return str_replace ( \'<iframe \' , \'<iframe loading="lazy"\' , $code ); 
}
add_filter( \'embed_oembed_html\', \'lazy_loaded_iframes\' );

相关推荐

过滤器嵌入标记以修改IFRAME属性

默认情况下,当在帖子/页面中放置另一个WP url时,它会将其嵌入,并生成一个blockquote和iframe代码,前端默认为:<iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" ....></iframe> 它还会在JS控制台中产生错误XMLHttpRequest cannot load http://example.com/wp-content