Функция позволяет получить изображение поста в виде HTML-тега <img>
и его атрибутами. Если для указанного поста изображения не установлено, функция вернёт пустую строку.
get_the_post_thumbnail( $post = null, $size = 'post-thumbnail', $attr = '' )
Параметры
- $post_id
- (целое число) ID поста, миниатюру которого нам нужно получить, по умолчанию — ID текущего пост из цикла.
- $size
- (строка|массив) в этом параметре указываем размер миниатюры. Может принимать следующие значения:
thumbnail
/medium
/large
— одно из стандартных размеров изображений, зарегистрированных в WordPress по умолчанию, данные размеры можно настроить в Параметры > Медиа,full
— оригинальное разрешение изображения — таким оно было загружено на сайт,- Можно указать собственные параметры ширины и высоты миниатюры в виде массива, например
array(50, 30)
. Обратите внимание, WordPress не будет создавать дубликат картинки под этот размер — вместо этого будет использоваться наиболее близкий по разрешению зарегистрированный размер картинки, подогнанный под ваши параметры с сохранением оригинальных пропорций.
Чтобы было понятнее, приведу пример. Предположим, в качестве этого аргумента мы указалиarray(50, 30)
. У меня самый близкий размер будет 125×125 (thumbnail
) — URL этой картинки и будет вставлен в атрибутsrc
. Окей, а что с пропорциями? Так как 125×125 — это квадрат, то и наша миниатюра будет квадратной, она впишется по наименьшему параметру, т.е. результат будет 30×30. - Один из собственных размеров изображений, зарегистрированных через функцию add_image_size().
- $attr
- (массив) массив переопределяемых атрибутов тега
<img>
, через него можно переопределить следующие HTML-атрибуты:src
— если вам надо, можете даже заменить URL картинки.class
— класс тега<img>
, по умолчанию имеет следующие классыwp-post-image
иattachment-{размер изображения}
.alt
— по умолчаниюtrim(strip_tags( $attachment->post_title ))
— указывается в админке при загрузке/редактировании медиафайла.title
— по умолчаниюtrim(strip_tags( $attachment->post_excerpt ))
.loading
– установив в значениеfalse
, можем отключить ленивую загрузку изображений.
Примеры
1. Использование функции
Лёгкий пример – выведем миниатюру поста с ID = 5:
echo get_the_post_thumbnail( 5, 'thumbnail' ); // <img width="150" height="150" src="http://ваш-сайт.ru/wp-content/uploads/2014/02/WordPress-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="WordPress">
2. Как сделать миниатюры с ссылками на пост?
Предположим, мы хотим реализовать это на страницах категорий. Давайте немного доработаем цикл:
while( have_posts() ) : the_post(); if( has_post_thumbnail() ): echo '<a href="' . get_permalink( $post->ID ) . '">' . get_the_post_thumbnail( $post->ID, 'thumbnail') . '</a>'; endif; echo '<a href="' . get_permalink( $post->ID ) . '">' . $post->post_title . '</a>'; endwhile;
В этом примере я также использовал функцию has_post_thumbnail() для того, чтобы в случае отсутствия миниатюры код не выводил лишний тег <a>
.
3. Как сделать, чтобы при клике на миниатюру, открывалась полная версия картинки?
Код из этого примера отлично подойдет для использования в каком-нибудь плагине jQuery, например fancybox или pretty photo. В таком случае вам возможно также понадобится добавить класс для ссылки.
if ( has_post_thumbnail()) { // опять проверка, установлена ли миниатюра для текущего поста $large_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a href="' . $large_image[0] . '">' . get_the_post_thumbnail($post->ID, 'thumbnail') . '</a>'; }
Вы также можете ознакомиться с документацией функций wp_get_attachment_image_src() и get_post_thumbnail_id() на моем блоге.
4. Используем третий параметр $attr для изменения CSS-класса миниатюры
Давайте добавим на наши миниатюры класс align-left
типа для того,чтобы они обтекались текстом слева:
$attr = array( 'class' => 'align-left' ); echo get_the_post_thumbnail( 1, 'thumbnail', $attr ); // выведет: <img width="150" height="150" src="http://ваш-сайт.ru/wp-content/uploads/2014/02/WordPress-150x150.jpg" class="align-left wp-post-image" alt="WordPress"> // обратите внимание, что стандартный класс wp-post-image никуда не делся
Хуки
post_thumbnail_size
Фильтр позволяет задать размер миниатюр, используемых на блоге (везде на блоге).
$size = apply_filters( 'post_thumbnail_size', $size );
- $size
- (строка|массив) — аналогичен параметру $size из самой функции.
В следующем примере мы устанавливаем размер для всех миниатюр на блоге medium
:
function true_set_medium_size( $size ){ return 'medium'; } add_filter('post_thumbnail_size', 'true_set_medium_size', 10, 1);
А теперь пример со следующим условием: для всех миниатюр на блоге, которые выводятся через функцию get_the_post_thumbnail()
с параметром $size равным thumbnail
заменяем размер на medium
, остальные размеры миниатюр не трогаем:
function true_set_medium_size_for_thumbnais( $size ){ if( $size == 'thumbnail') return 'medium'; } add_filter('post_thumbnail_size', 'true_set_medium_size_for_thumbnais', 10, 1);
post_thumbnail_html
О, а вот этот фильтр — уже что-то интересное, он позволяет нам модифицировать HTML миниатюры непосредственно перед тем, как функция его возвращает.
return apply_filters( 'post_thumbnail_html', $html, $post_id, $post_thumbnail_id, $size, $attr );
Количество параметров данного фильтра не может не радовать, это означает, что мы можем творить с возвращаемым HTML-кодом всё, что нам угодно.
- $html
- (строка) HTML-код, возвращаемый функцией по умолчанию,
- $post_id
- (целое число) ID поста, миниатюру которого нужно получить,
- $post_thumbnail_id
- (целое число) ID миниатюры,
- $size
- (строка|массив) размер миниатюры,
- $attr
- (массив) массив HTML-атрибутов, которые были заданы при вызове функции, если не заданы, то пустой массив;
Рассмотрим пару примеров, в первом – автоматически проставим ссылки на посты.
Фишка в том, что каждый раз при использовании функции get_the_post_tumbnail()
миниатюры уже будут возвращаться с автоматически проставленными ссылками на пост.
function true_auto_linking( $html, $post_id, $post_thumbnail_id, $size, $attr ){ return '<a href="' . get_permalink( $post_id ) . '">' . $html . '</a>'; } add_filter('post_thumbnail_html', 'true_auto_linking', 10, 5);
Круто, да? А главное — всё очень просто.
Во втором примере сделаем так, чтобы функция возвращала только URL миниатюры.
Ещё одна полезная вещь, которую можно сделать при помощи фильтра post_thumbnail_html
. Допустим, нам не нужен весь HTML-код с тегом <img>
, допустим, нам нужен только URL. В таком случае:
function true_thumbnail_url_only( $html ){ // неиспользуемые параметры можно не указывать return preg_replace('#.*src="([^"]+)".*#', '1', $html ); } add_filter('post_thumbnail_html', 'true_thumbnail_url_only', 10, 5);