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

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

我需要换衣服src 到data-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   小码农  

相关推荐

过滤器嵌入标记以修改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