Добавить имя класса к миниатюре записи
Я использую миниатюры записей для создания ссылок на страницы.
Возможно ли добавить имя класса к изображению миниатюры записи.
<li><a href="<?php the_permalink(); ?>" ><?php the_post_thumbnail(); ?></a></li>

Да - вы можете передать класс, который хотите использовать, в функцию the_post_thumbnail()
в качестве части аргумента атрибутов, например: <?php the_post_thumbnail('thumbnail', array('class' => 'ваш-класс')); ?>
Ссылка: http://codex.wordpress.org/Function_Reference/the_post_thumbnail#Styling_Post_Thumbnails

@SimonCooper Я сделал, и теперь класс имеет attachment- без размера.

Вы можете фильтровать эти классы.
function alter_attr_wpse_102158($attr) {
remove_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');
$attr['class'] .= ' new-class';
return $attr;
}
add_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');
Добавьте фильтр непосредственно перед вызовом the_post_thumbnail
. Фильтр автоматически удалит сам себя.
Это немного сложный путь, но the_post_thumbnail
использует get_the_post_thumbnail
, который в свою очередь использует wp_get_attachment_image
, применяющий этот фильтр.

Имеет ли название функции 'alter_attr_wpse_102158' определенное значение? Можно ли назвать эту функцию myClass - function myClass($attr) {

Название в некоторой степени описательное, а суффикс ссылается на этот вопрос. В остальном, особого значения нет. Изнутри экземпляра класса — например, класса плагина — вы можете использовать array($this,'methodname')
, а также можно использовать статические классы с фильтрами, используя array('ClassName','methodname')

http://codex.wordpress.org/Function_Reference/add_filter#Notes

Для большинства изображений на моих сайтах я добавляю элемент figure вокруг изображений, как показано ниже. Таким образом, я сохраняю всё в целости и сохранности и при этом могу обращаться к элементу через класс в CSS.
<?php if ( has_post_thumbnail() ) { ?>
<figure class="your-class">
<?php echo get_the_post_thumbnail(); ?>
</figure>
<?php } ?>

Май 2021
Протестировано и работает на WordPress 5.7 ✔
По умолчанию
Функция the_post_thumbnail()
по умолчанию выводит все необходимые атрибуты из WordPress.
<?php the_post_thumbnail(); ?>
<!-- DOM -->
<img
src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg"
class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
alt=""
loading="lazy"
srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w"
sizes="(max-width: 1500px) 100vw, 1500px"
width="1500"
height="800"
>
Использование атрибута class
в массиве
Использование class
без параметра $size
или с параметром $size
как thumbnail
полностью удалит атрибут srcset
. Потому что зачем вам адаптивность, если размер всего 150 x 150
.
<?php the_post_thumbnail(array('class' => 'classname')); ?>
<?php the_post_thumbnail('thumbnail' array('class' => 'classname')); ?>
<!-- DOM -->
<img
src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-150x150.jpg"
class="classname wp-post-image"
alt=""
loading="lazy"
width="150"
height="150"
>
Атрибут srcset
будет доступен для всех размеров, кроме thumbnail
. Доступные размеры: thumbnail
, medium
, large
, full
. Размеры можно настроить в WordPress: 'Консоль > Настройки > Медиафайлы'
thumbnail: 150px
medium: 300px
large: 1024px
full: Оригинальный загруженный размер
Использование размера medium
.
<?php the_post_thumbnail('medium' array('class' => 'classname')); ?>
<!-- DOM -->
<img
src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg"
class="classname img-fluid wp-post-image"
alt=""
loading="lazy"
srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w"
sizes="(max-width: 300px) 100vw, 300px"
width="300"
height="160"
>
Использование функции
Вы можете использовать функцию для добавления класса к постам (функция предоставлена @s_ha_dum). Я добавляю класс Bootstrap img-fluid
. Внимание! Прочитайте полностью
// использование функции для добавления класса к `the_post_thumbnail()`
function alter_attr_wpse_102158($attr) {
remove_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');
$attr['class'] .= ' img-fluid';
return $attr;
}
add_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');
Обратите внимание, что класс Bootstrap img-fluid
добавлен к атрибуту class.
<?php the_post_thumbnail(); ?>
<!-- DOM -->
<img
src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg"
class="attachment-post-thumbnail size-post-thumbnail img-fluid wp-post-image"
alt=""
loading="lazy"
srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w,
http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w"
sizes="(max-width: 1500px) 100vw, 1500px"
width="1500"
height="800"
>
Класс class
исчез во втором посте
При использовании функции, class
работает только для первого поста и исчезает во втором.
Используйте класс напрямую в the_post_thumbnail()
<?php the_post_thumbnail('full' array('class' => 'img-fluid')); ?>
Помните, что атрибут srcset
бесполезен для thumbnail
.

Вызов чего-то вроде the_post_thumbnail(array('class' => 'classname'));
на самом деле вызовет кучу PHP предупреждений. Если первый параметр — это массив, он ожидает параметры ширины и высоты. Также он все равно выводит значения srcset, если у изображения есть другие размеры.

Начиная с WordPress 5.7.1 этого не происходит. Кроме того, параметр $size является необязательным — (https://developer.wordpress.org/reference/functions/the_post_thumbnail/#parameters)

Я попробовал это на версии 5.7.1 и получил srcsets, как и ожидалось. Параметр $size
может быть необязательным, но это не значит, что вы можете просто пропустить его и перейти к следующему параметру. Если следовать документации через the_post_thumbnail()
-> get_the_post_thumbnail()
-> wp_get_attachment_image()
, то этот массив передается как $size
на всем пути, так как это первый переданный параметр. Присоединяйтесь к The Loop Chat для более широкого обсуждения, чем возможно в комментариях здесь.
