Добавить имя класса к миниатюре записи

6 июн. 2013 г., 23:16:31
Просмотры: 110K
Голосов: 27

Я использую миниатюры записей для создания ссылок на страницы.

Возможно ли добавить имя класса к изображению миниатюры записи.

<li><a href="<?php the_permalink(); ?>" ><?php the_post_thumbnail(); ?></a></li>
0
Все ответы на вопрос 4
4
67

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

Ссылка: http://codex.wordpress.org/Function_Reference/the_post_thumbnail#Styling_Post_Thumbnails

6 июн. 2013 г. 23:20:34
Комментарии

Но это удалит класс attachment-$size.

fuxia fuxia
6 июн. 2013 г. 23:21:35

Но можно ли добавить класс "attachment-$size my-class-name"

Simon Cooper Simon Cooper
7 июн. 2013 г. 08:45:59

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

Zhianc Zhianc
27 апр. 2015 г. 13:33:12

Это, как правило, плохое и негибкое решение. Даже жесткая привязка к attachment-$size стирает все возможные будущие инъекции классов.

Fusion Fusion
18 февр. 2019 г. 13:18:11
5
15

Вы можете фильтровать эти классы.

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, применяющий этот фильтр.

7 июн. 2013 г. 17:59:59
Комментарии

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

Simon Cooper Simon Cooper
7 июн. 2013 г. 18:17:07

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

s_ha_dum s_ha_dum
7 июн. 2013 г. 18:23:20

Почему вы добавляете фильтр, который сам себя удаляет?

AlxVallejo AlxVallejo
29 сент. 2013 г. 15:36:52

@AlxVallejo : Чтобы он выполнялся только один раз в конкретной ситуации, когда вам это нужно.

s_ha_dum s_ha_dum
29 сент. 2013 г. 17:11:02
0

Для большинства изображений на моих сайтах я добавляю элемент figure вокруг изображений, как показано ниже. Таким образом, я сохраняю всё в целости и сохранности и при этом могу обращаться к элементу через класс в CSS.

<?php if ( has_post_thumbnail() ) { ?>
    <figure class="your-class">
        <?php echo get_the_post_thumbnail(); ?>
    </figure>
<?php } ?>
6 июл. 2021 г. 15:44:49
3

Май 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.

4 мая 2021 г. 07:40:33
Комментарии

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

Howdy_McGee Howdy_McGee
4 мая 2021 г. 08:24:37

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

Dexter Dexter
4 мая 2021 г. 08:50:24

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

Howdy_McGee Howdy_McGee
4 мая 2021 г. 17:14:52