Функция the_post_thumbnail() в WordPress используется для вывода миниатюры (изображения поста) на экран. Миниатюры могут быть разных размеров, и с помощью этой функции можно гибко выбирать размер изображения и задавать ему дополнительные атрибуты.
the_post_thumbnail( string|int[] $size = ‘post-thumbnail’, string|array $attr = ” )Параметры:
$size(необязательный): название зарегистрированного размера изображения (например,'thumbnail','medium','large') или массив с шириной и высотой в пикселях. По умолчанию используется'post-thumbnail', что соответствует специальному размеру для миниатюр постов.$attr(необязательный): строка или массив атрибутов для изображения, таких как класс, альт-текст и другие HTML-атрибуты.
Когда использовать
Эта функция широко используется в темах WordPress для вывода изображений, связанных с постами или записями. Например, можно выводить миниатюры записей на главной странице блога или внутри отдельных постов.
Пример 1: Вывод миниатюры текущего поста
В этом примере миниатюра выводится внутри цикла WordPress для текущей записи:
<?php if ( has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail( 'medium' ); ?>
</div>
<?php endif; ?>
Пример 2: Вывод миниатюры с кастомными атрибутами
Можно добавить дополнительные HTML-атрибуты для изображения, например, класс или альт-текст:
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'large', ['class' => 'custom-thumbnail', 'alt' => 'Описание картинки'] ); ?>
<?php endif; ?>
Пример 3: Вывод изображения с ссылкой на пост
Этот пример показывает, как обернуть изображение ссылкой на сам пост:
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 'thumbnail' ); ?>
</a>
<?php endif; ?>
Пример 4: Задание произвольного размера для миниатюры
Можно задать произвольный размер изображения в пикселях с помощью массива:
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( [200, 200] ); ?>
<?php endif; ?>
Пример 5: Использование миниатюры как фоновое изображение
Функция the_post_thumbnail() может быть использована для задания фонового изображения. Это особенно полезно для стилизации блоков:
<div class="post-thumbnail" style="background-image: url(<?php the_post_thumbnail_url( 'large' ); ?>);">
<!-- Контент поста -->
</div>
Пример 6: Удаление атрибутов width и height
Если вам нужно убрать атрибуты ширины и высоты для изображения, чтобы оно лучше подходило для адаптивного дизайна, можно использовать фильтр:
function remove_thumbnail_dimensions( $html ) {
return preg_replace( '/(width|height)="\d+"\s/', "", $html );
}
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions' );
Управление lazy-loading
Начиная с версии WordPress 5.5, миниатюры по умолчанию подгружаются лениво (lazy-loading). Если нужно отключить это поведение:
the_post_thumbnail( '', array( 'loading' => 'eager' ) );
Заключение
Функция the_post_thumbnail() — это мощный инструмент для работы с изображениями в WordPress. С ее помощью можно выводить миниатюры постов в различных размерах и с разными атрибутами. Этот гибкий подход позволяет адаптировать вывод изображений к любым задачам, будь то блоги, интернет-магазины или фотогалереи.
