如何在 PHP 中的图像下方添加 noscript 标签？

Question

我正在为我的图像使用延迟加载，作为Google pointed out，在每个 img 下方添加一个 noscript 标签至关重要。

我想在 Wordpress 编辑器中的每张图片下方添加一个 noscript 标签，类似于：

<figure>
   <img src="img.jpg">
   <nocript><img src="img.jp"></noscript>
   <figcaption> Caption</figcaption>
<figure>

但我不能:(

这是我在 PHP 中的函数。

add_filter('the_content', function ($content) {
    $dom = new DOMDocument();
    $dom->loadHTML($post->post_content);
    foreach($dom->getElementsByTagName( 'img' ) as $img) {
        if ( $img->hasAttribute( 'src' )) {
         $src_attr = $img->getAttribute( 'src' );
         $noscript      = $dom->createElement( 'noscript' );
         $noscript_node = $img->parentNode->insertBefore( $noscript, $img );
         $noscript_img  = $dom->createElement( 'IMG' );
         $new_img = $noscript_node->appendChild( $noscript_img );
         $new_img->setAttribute( 'src', $src_attr );
         $content = $dom->saveHTML();
      }
    };

    return $content;
});

请帮忙：D

Answer 1

在更新现有对象（或数组）时，如果按引用工作，使用 foreach 循环需要注意的事项

默认情况下，foreach 循环会创建项目的副本并在其上运行。要使用实际对象，您应该在之前添加 &

我还会注意到在实际 dom 分配中使用临时变量： 创建临时变量并使用它们的结果插入到对象中

但它应该可以工作

我也将 saveHTML 排除在循环之外，因为不需要中间保存

希望对你有帮助

下面是 &$img

add_filter('the_content', function ($content) {
    $dom = new DOMDocument();
    $dom->loadHTML($post->post_content);
    foreach($dom->getElementsByTagName( 'img' ) as &$img) {
        if ( $img->hasAttribute( 'src' )) {
         $src_attr = $img->getAttribute( 'src' );
         $noscript      = $dom->createElement( 'noscript' );
         $noscript_node = $img->parentNode->insertBefore( $noscript, $img );
         $noscript_img  = $dom->createElement( 'IMG' );
         $new_img = $noscript_node->appendChild( $noscript_img );
         $new_img->setAttribute( 'src', $src_attr );
      }
    };
 $content = $dom->saveHTML();

    return $content;
});