2016-09-21 5 views
0

Я создал Wordpress фильтр, используя метод API DOM, который был предложен здесь https://wordpress.stackexchange.com/a/61036/103233 изменить некоторые атрибуты моих изображений:PHP DOM добавить HTML в Wordpress фильтр

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'); 

Как я могу добавить HTML-элемент в foreach цикл?

Я попытался добавить новый DOMDocument и его отображение в цикле:

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

Но это первый печатают все новые $test элементов (один для каждого цикла), а затем мой изменен $newHTML печатаются. Я хочу добавить новый элемент $test к каждому img цикла foreach. Я никогда не использовал DOM раньше ... каких-либо предложений? appendChild? Но как?

+0

Вы хотите добавить узел '$ test' внутри' img'? Или вы хотите добавить его после/раньше? –

ответ

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-объектами, такими как & амперсанды должны быть экранированы.

+0

Также, когда вы выводите свой узел, вам не нужно выполнять замену всего gumpth вокруг него: $ doc-> saveHTML ($ node); узел - это контекст того, где он начнет экспортировать ваш html. –

+0

Мы на правильном пути, спасибо человеку! Вы правы, этот элемент должен быть добавлен после изображения. Проблема: когда я использую ваш код, все элементы формата « Hello» распечатываются после того, как будут напечатаны все изображения. Но после этого я пытаюсь напечатать каждое изображение и новый элемент. Последняя вещь будет элементом '

+0

«insertBefore» работает, хотя ... Так что я буду использовать это! –