PHP DOM 在 Wordpress 过滤器中追加 HTML

Question

我使用此处建议的 DOM API 方法创建了一个 Wordpress 过滤器 https://wordpress.stackexchange.com/a/61036/103233 来更改我的图像的某些属性：

function add_lazyload($content) {

    $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
    $dom = new DOMDocument();
    @$dom->loadHTML($content);

    foreach ($dom->getElementsByTagName('img') as $node) {  
        $oldsrc = $node->getAttribute('src');
        $node->setAttribute('data-src', $oldsrc );
        $newsrc = get_template_directory_uri() . '/images/placeholder.gif';
        $node->setAttribute('src', $newsrc);
    }

    $newHtml = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML()));
    return $newHtml;
}
add_filter('the_content', 'add_lazyload');
add_filter('post_thumbnail_html', 'add_lazyload');

如何在 foreach 循环中添加 HTML 元素？

我尝试添加一个新的 DOMDocument 并在循环中显示它：

$test = new DOMDocument();
$test->loadHTML('<a>Hello</a>');
$test->saveHTML();

但是这首先打印所有新的 $test 元素（每个循环一个），然后打印我改变的 $newHTML 。我想将新的 $test 元素附加到 foreach 循环的每个 img。我以前从未使用过 DOM...有什么建议吗？ appendChild？但是怎么办？

Answer 1

http://php.net/manual/en/domdocument.createelement.php 是要走的路。所以你会做这样的事情：

foreach ($dom->getElementsByTagName('img') as $node) {  
    $oldsrc = $node->getAttribute('src');
    $node->setAttribute('data-src', $oldsrc );
    $newsrc = get_template_directory_uri() . '/images/placeholder.gif';
    $node->setAttribute('src', $newsrc);

    // Create new anchor
    $testNode = $dom->createElement('a', 'Hello');
    $node->appendChild($testNode); // Insert new node inside (bad idea for images though)
    $node->parentNode->appendChild($testNode); // Insert new node after image
    $node->parentNode->insertBefore($testNode, $node); // Insert new node before image
}

您需要小心使用 createElement 附加文本，因为 HTML 实体（例如 & 和号需要转义。

PHP DOM 在 Wordpress 过滤器中追加 HTML

PHP DOM append HTML in Wordpress filter

php

wordpress

dom

append

appendchild