Фильтрация изображений с тегами <meta>

Я использую инструмент тестирования структурированных данных Google и тип данных рецепта Google, чтобы написать собственный плагин WordPress, который правильно маркирует все необходимые метаданные schema.org для рецепта с ингредиентами и инструкциями. Я преуспел во всех других частях рецепта, за исключением изображения, которое Google, как известно, является строгим, позволяя устанавливать через метаданные. Рекомендуемый образ, используемый в метаданных для Google, должен быть таким же, как на странице.

Для этого я напрямую фильтрую тэг <img> любого изображения WordPress. Я уже успел пометить все остальные части рецепта, и только сейчас нужно исправить изображение.

Вот скриншот текущих результатов тестирования Google Structured Data . Мне нужно по-прежнему правильно пометить отображаемое изображение в сообщениях WordPress, чтобы оно отображалось как часть этих структурированных метаданных.

Мой вопрос не зависит от функциональности темы (этот код не для темы, а для плагина, поэтому нельзя управлять файлами темы WordPress.)

Часть 1: окружающий div

Мне нужно определить, требует ли Google структурированных данных <meta itemprop="url" content="http://"> находиться внутри div после признака <img> , или если <meta> можно добавить независимо от окружающего div, непосредственно после изображения и все еще распознаются Google Structured Data.

Часть 2: метатег

Независимо от ответа на часть 1, мне все равно нужно добавить после тега img или div новый тег <meta itemprop="url" с атрибутом контента, содержащим URL-адрес изображения. Для этого я не могу использовать add_filter для wp_get_attachment_image_attributes , то есть:

 add_filter('wp_get_attachment_image_attributes','simmer_image_URL'); function simmer_image_URL($image) { $image_data = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) ); $feat_image_url = $image_data[0]; 

Поскольку метатег с URL-адресом изображения нужно добавлять после и независимо от wp_get_attachment_image_attributes , не фильтроваться через него, я должен использовать поиск и замену для достижения изменения, а не add_filter .

Вот атрибуты, которые я уже успешно фильтрую:

 add_filter( 'wp_get_attachment_image_attributes', 'itemprop_attributes', 10, 3 ); function itemprop_attributes( $attr, $attachment, $size ) { $attr['itemprop'] = 'image'; return $attr; } add_filter( 'wp_get_attachment_image_attributes', 'imageObject_attributes', 10, 3 ); function imageObject_attributes( $attr, $attachment, $size ) { $attr['itemscope itemtype'] = 'http://schema.org/ImageObject'; return $attr; } 

Вы уже увидите, что я отфильтровал тег img и добавил itemprop="image" и itemtype="https://schema.org/ImageObject" в тег img для изображений с четным изображением, но теперь я хочу сделать шаг после фильтрации и добавления нового тега <meta itemprop="url" content="' . $feat_image_url . '"> после каждого отображаемого изображения.

Я знаю, что могу выполнить это с помощью поиска и замены, но именно там я застрял / не получил результатов в коде. Я хочу найти последнюю часть тега img, где бы он ни появлялся для показанных изображений, и заменить его на конец тега img PLUS вложенным мета-элементомpropro. Re: part 2, это будет либо отфильтровано, чтобы заменить <img> как <div> , либо сохранить <img> как он существует. В любом случае оба решения, которые в этом случае следуют сообщениям об ошибках Google в инструменте тестирования структурированных данных, требуют добавить новый <meta> после выбранного изображения. Это последняя часть, где мне нужна помощь с PHP.

Я пытаюсь использовать этот код в моих functions.php после указанных выше фильтров, но он не добавляет <meta> после тега <img> (который теперь правильно имеет itemprop="image" and itemscope itemtype="http://schema.org/ImageObject" .

 add_filter('wp_get_attachment_image_attributes','simmer_image_URL'); function simmer_image_URL($image) { $image_data = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) ); $feat_image_url = $image_data[0]; $image = str_replace('itemprop="image" itemscope itemtype="http://schema.org/ImageObject" scale="0">', 'itemprop="image" itemscope itemtype="http://schema.org/ImageObject" scale="0"><meta itemprop="url" content="' . $feat_image_url . '">', $image); return $thumb; } 

Re: часть 1 , мне нужно повторно фильтровать <img> полностью, чтобы изменить его на <div> и вставить весь признанный образ в свой собственный div, добавив / присвоив itemprop , itemscope и itemtype через div, включить новый <img> , а затем включить в этот <div> <meta> атрибут itemprop="url" ? Вот пример кода, как часть 1 может быть написана с использованием этой техники с помощью wp_get_attachment_image_src .

 <?php $article_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' ); ?> <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="<?php echo $article_image[0]; ?>"> <meta itemprop="width" content="<?php echo $article_image[1]; ?>"> <meta itemprop="height" content="<?php echo $article_image[2]; ?>"> </div> 

Чтобы превратить ваши изображения, которые выглядят так:

 <img width="825" height="510" src="http://img.wordpressask.com/custom-post-types/image.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="zucchini fritters-1-2" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"> 

В этом:

 <div itemprop="image" itemscope itemtype= itemtype="http://schema.org/ImageObject"> <meta itemprop="url" content="http://img.wordpressask.com/custom-post-types/image.jpg"> <meta itemprop="width" content="825"> <meta itemprop="height" content="510"> </div> 

Добавьте в свой пользовательский плагин следующие функции. Это будет проходить через все ваши сообщения / страницы, на которых есть изображения рецептов, и превратить их в <meta> :

 add_action( 'plugins_loaded', 'wpse_237802_buffer', 10, 1 ); function wpse_237802_buffer() { // Enable output buffering for our function ob_start( 'wpse_237802_replace_img_meta' ); } function wpse_237802_replace_img_meta( $content ) { // Automatically insert width and height attributes preg_match_all( '/<img[^>]+>/i', $content, $images ); if ( count( $images ) < 1 ) { // Don't change content if there are no images return $content; } foreach ( $images[0] as $image ) { // Find all images with these attributes preg_match_all( '/(src|itemprop|itemscope|itemtype|width|height)=("[^"]*")/i', $image, $img ); if ( !in_array( 'src', $img[1] ) ) { continue; } if ( in_array( 'itemprop', $img[1] ) || in_array( 'itemscope', $img[1] ) || in_array( 'itemtype', $img[1] ) ) { // Only update images with Open Graph attributes $src = $img[2][array_search('src', $img[1] )]; $itemprop = in_array( 'itemprop', $img[1] ) ? ' itemprop=' . $img[2][array_search('itemprop', $img[1] )] : ''; $itemscope = in_array( 'itemscope', $img[1] ) ? ' itemscope=' . $img[2][array_search('itemscope', $img[1] )] : ''; $itemtype = in_array( 'itemtype', $img[1] ) ? ' itemtype=' . $img[2][array_search('itemtype', $img[1] )] : ''; list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\"", "" , $src ) ); $image_tag = sprintf( // Turn image into meta '<div itemprop="image" itemscope itemtype=%s> <meta itemprop="url" content=%s> <meta itemprop="width" content="%s"> <meta itemprop="height" content="%s"> </div>', $itemtype, $src, $width, $height ); $content = str_replace( $image, $image_tag, $content ); } } return $content; }