Как изменить / изменить the_post_thumbnail (); html-выход?

Я работаю над созданием настраиваемой темы и немного борюсь с этим. Я пытаюсь изменить вывод HTML в the_post_thumbnail(); функция. Мне нужно сделать это, потому что я пытаюсь поддерживать изображения сетчатки на своем сайте и предпочел бы испечь функциональность в своей теме, чем загружать плагин на бэкэнд.

По умолчанию the_post_thumbnail(); просто вызывает get_the_post_thumbnail(); который я нашел здесь . Моя первая мысль заключалась в подключении фильтра post_thumbnail_html , но я не могу заставить его работать. Так…

Вот как я называю мои миниатюры сообщений в цикле:

 <?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'unique-class-here', 'title' => 'unique-title-here')); ?> 

Это код, который мне нужен, когда я вызываю the_post_thumbnail();

 <img src="" alt="" data-src="image.png" data-alt="Alt text" class="retina unique-class-here" /> 

И приведенный ниже код – это то, что я имею в моем файле functions.php:

 <?php function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) { $src = wp_get_attachment_image_src(get_post_thumbnail_id(), $size); $html = '<img src="" alt="" data-src="' . $src['0'] . '" data-alt="" class="retina" />'; return $html; } add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5); ?> 

Несколько вещей, чтобы отметить. Я не уверен, как передать соответствующий текст метаданных в атрибуте data-alt. Кроме того, мне нужно иметь возможность передать определенный размер post_thumbnail, который мне нужен, поскольку я использую пользовательские размеры post_thumbnail во всей теме. Наконец, вы можете видеть, что массив атрибутов должен проходить в классах в дополнение к классу «сетчатки» по умолчанию, а также любым другим атрибутам в этом массиве.

Заранее благодарю за любую помощь. В этой теме действительно мало информации, и я подумал, что мой вопрос был достаточно разным, чтобы гарантировать дополнительную должность в этом сообществе. Пожалуйста, дайте мне знать, если у вас есть мысли, решения и / или нужны какие-либо разъяснения.

Solutions Collecting From Web of "Как изменить / изменить the_post_thumbnail (); html-выход?"

Хорошо, поэтому я думаю, что, возможно, пришел к решению. Это выглядит не так хорошо и просто, как хотелось бы, но в то же время серьезные изменения в функциональности WordPress иногда требуют решительных мер. 🙂

Это мое рабочее решение для перезаписи вывода HTML для эскизов сообщений на моем сайте для работы с плагином Retinise.js . Конечно, этот код может быть адаптирован для других манипуляций HTML с уменьшенными изображениями.

В моем файле functions.php я создал эту функцию:

 <?php function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) { $id = get_post_thumbnail_id(); // gets the id of the current post_thumbnail (in the loop) $src = wp_get_attachment_image_src($id, $size); // gets the image url specific to the passed in size (aka. custom image size) $alt = get_the_title($id); // gets the post thumbnail title $class = $attr['class']; // gets classes passed to the post thumbnail, defined here for easier function access // Check to see if a 'retina' class exists in the array when calling "the_post_thumbnail()", if so output different <img/> html if (strpos($class, 'retina') !== false) { $html = '<img src="" alt="" data-src="' . $src[0] . '" data-alt="' . $alt . '" class="' . $class . '" />'; } else { $html = '<img src="' . $src[0] . '" alt="' . $alt . '" class="' . $class . '" />'; } return $html; } add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5); ?> 

Затем, когда я вызываю the_post_thumbnail(); в WP-цикле я использую этот код:

 <?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'retina additional-class')); ?> 

Этот код должен работать (очевидно, с небольшими изменениями), если вы работаете вне цикла WP. Надеюсь, это спасет кого-то еще некоторое время и разочарование! Может быть, когда я обойдусь, я отправлю полный старт, чтобы закончить Q & A о том, как я испек в поддержке сетчатки моей темы. Плагины не используются!

Вот несколько ссылок, чтобы указать кому-то в правильном направлении, если они заинтересованы!

  • Добавление дополнительных размеров изображения в WP
  • Retinise.js
  • Создайте дополнительные изображения размером с сетчатку

хакерское решение:

поскольку wordpress добавляет много классов по умолчанию к <img> , если вы не изменяете это поведение с помощью силы, вы всегда можете «впрыскивать» что-то через str_replace перед строковым class= . В коде:

 $image = get_the_post_thumbnail( $post->ID, 'medium', array( 'class' => 'myclass' ) ); $moreattrs = 'data-fullimg= "full.jpg"'; $image = str_replace('class=', $moreattrs.' class=', $image ); 

Можно с уверенностью предположить, что если что-то начинается с «class =», это то, что вы хотите. Конечно, это может быть испорчено странными именами файлов, содержащими этот class= , но особенно с wordpress, это маловероятно.

вы также можете выполнить поиск <img и заменить это; думая об этом, я думаю, это должно быть немного безопаснее.

Возможно, вы можете подключиться к wp_get_attachment_image_attributes :

 function my_custom_image_attributes( $attr, $attachment ) { remove_filter('wp_get_attachment_image_attributes','my_custom_image_attributes'); $image = wp_get_attachment_image_src( $attachment->ID, 'full' ); $attr['data-src'] = $image[0]; $attr['data-alt'] = $attachment->post_title; $attr['class'] .= ' retina'; return $attr; } add_filter('wp_get_attachment_image_attributes','my_custom_image_attributes'); 

Это нужно протестировать и, возможно, изменить, я нашел здесь идею Добавить имя класса для публикации миниатюр (проверьте исходный код vwp_get_attachment_image в конце).

Вам нужно добавить крюк непосредственно перед вызовом the_post_thumbnail() в вашей теме.

Кроме того, я не знаю, что вам нужно использовать в качестве data-alt , на мой взгляд, вы можете использовать поле attachement которое проходит с фильтром (это может быть настраиваемое поле).