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循环会创建项目的副本并在其上运行。要使用实际对象，您应该在＆之前添加＆p

我还会注意到使用temp vars进行真正的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;
});

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

1 个答案: