Изменение html-структуры всех тегов img в WordPress

У меня есть блог WordPress и я пытаюсь реализовать сценарий изображения foresight.js . Короче говоря, мне нужно настроить таргетинг на все почтовые изображения, поменять атрибуты src, width, & height атрибутами data-src, data-width, & data-height . Затем мне нужно дублировать линию изображения и обернуть ее в теги <noscript> . Это структура, в которой я пытаюсь создать / создать WordPress:

 <img data-src="wordpress/image/url/pic.jpg" data-width="{get width of image with PHP & pass-in that value here} data-height="{get height of image with PHP and pass-in that value here}" class="fs-img"> <noscript> <img src="wordpress/image/url/pic.jpg"> </noscript> 

Я искал WordPress codex, и наилучший возможный маршрут, который я могу найти, – использовать фильтры (то есть. Get_image_tag ' и ' image_tag ' ) для изменения html, который WordPress выводит для каждого изображения. Я думаю, что один из этих вариантов должен работать, или что я могу выполнить сопоставление шаблонов с регулярным выражением (я знаю, а не идеально) , забросить preg_replace и затем preg_replace это обратно в the_content .

Я пробовал некоторые из этих вариантов, но не могу заставить их работать. Может кто-нибудь, пожалуйста, предложит некоторую помощь? Нашел одно предложение здесь , но даже не может заставить его работать!

попытка get_image_tag:

Нашел этот конкретный в Интернете, но он должен был быть изменен, чтобы соответствовать моей логике (см. Выше структуру) … не может понять, что preg_replace массив preg_replace самостоятельно.

 <?php function image_tag($html, $id, $alt, $title) { return preg_replace(array( '/'.str_replace('//','\/\/',get_bloginfo('url')).'/i', '/\s+width="\d+"/i', '/\s+height="\d+"/i', '/alt=""/i' ), array( '', '', '', alt='"' . $title . '"' ), $html); } add_filter('get_image_tag', 'image_tag', 0, 4); ?> 

Другая попытка get_image_tag:

 <?php function get_image_tag($id, $alt, $title, $align, $size='full') { list($width, $height, $type, $attr) = getimagesize($img_src); $hwstring = image_hwstring($width, $height); $class = 'align' . esc_attr($align) . ' size-' . esc_attr($size) . ' wp-image-' . $id; $class = apply_filters('get_image_tag_class', $class, $id, $align, $size); $html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" data-width="' . $width . '" data-height="' . $height . '" class="' . $class . ' fs-img" />'; $html = apply_filters( 'get_image_tag', $html, $id, $alt, $title, $align, $size); return $html; } ?> 

Попытка сопоставления шаблонов:

Попробовал создать собственное собственное регулярное выражение на этом, но не уверен, что это правильно.

 <?php function restructure_imgs($content) { global $post; $pattern = "/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)(|\")(.*?)>/i"; list($width, $height, $type, $attr) = getimagesize($2$3.$4$5); $hwstring = image_hwstring($width, $height); $replacement = '<img$1data-src=$2$3.$4$5 title="'.$post->post_title.'" data-width="'.$width.'" data-height="'.$height.'" class="fs-img"$6>'; $content = preg_replace($pattern, $replacement, $content); return $content; } add_filter('the_content', 'restructure_imgs'); ?> 

К сожалению, ни один из этих примеров не может работать. Любая помощь или совместное использование ваших предварительно написанных сценариев / функций будет очень признательна! Спасибо, что помогли студенту узнать!

Фильтры, которые вы пытаетесь использовать, запускаются при вставке изображений , поэтому невозможно заменить все изображения, уже присутствующие в ваших сообщениях, используя эти фильтры. Однако он должен работать, если вы намереваетесь изменить теги img с этого момента .

Фильтр the_content , однако, применяется к сообщению после его получения из базы данных и перед отображением его на экран. Я считаю, что для внесения изменений в существующие сообщения без повторного вставки изображений вы можете использовать этот фильтр.

Вы можете разобрать the_content используя класс PHP DOMDocument . Когда дело доходит до разбора HTML в PHP, не используйте регулярное выражение .

Я написал образец функции для того, что вы хотите сделать, это немного подробный, чтобы объяснить проходы. Не стесняйтесь настраивать его по своему усмотрению.

 <?php function foresight_hires_img_replace($the_content) { // Create a new istance of DOMDocument $post = new DOMDocument(); // Load $the_content as HTML $post->loadHTML($the_content); // Look up for all the <img> tags. $imgs = $post->getElementsByTagName('img'); // Iteration time foreach( $imgs as $img ) { // Let's make sure the img has not been already manipulated by us // by checking if it has a data-src attribute (we could also check // if it has the fs-img class, or whatever check you might feel is // the most appropriate. if( $img->hasAttribute('data-src') ) continue; // Also, let's check that the <img> we found is not child of a <noscript> // tag, we want to leave those alone as well. if( $img->parentNode->tagName == 'noscript' ) continue; // Let's clone the node for later usage. $clone = $img->cloneNode(); // Get the src attribute, remove it from the element, swap it with // data-src $src = $img->getAttribute('src'); $img->removeAttribute('src'); $img->setAttribute('data-src', $src); // Same goes for width... $width = $img->getAttribute('width'); $img->removeAttribute('width'); $img->setAttribute('data-width', $width); // And height... (and whatever other attribute your js may need $height = $img->getAttribute('height'); $img->removeAttribute('height'); $img->setAttribute('data-height', $height); // Get the class and add fs-img to the existing classes $imgClass = $img->getAttribute('class'); $img->setAttribute('class', $imgClass . ' fs-img'); // Let's create the <noscript> element and append our original // tag, which we cloned earlier, as its child. Then, let's insert // it before our manipulated element $no_script = $post->createElement('noscript'); $no_script->appendChild($clone); $img->parentNode->insertBefore($no_script, $img); }; return $post->saveHTML(); } add_filter('the_content', 'foresight_hires_img_replace'); ?> 

Я не тестировал его специально с помощью WordPress, но я тестировал его с помощью типового вывода сообщений, и он должен работать.