get_the_post_thumbnail()

  2.9.0     wp-includes / post-thumbnail-template.php  /  Кодекс WordPress

Функция позволяет получить изображение поста в виде 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);
Кодекс WordPress: Вложения: add_image_size(), attachment_url_to_postid(), get_attached_file(), get_post_thumbnail_id(), get_the_post_thumbnail(), has_post_thumbnail(), is_attachment(), media_sideload_image(), the_post_thumbnail(), wp_check_filetype(), wp_get_attachment_image_src(), wp_get_attachment_url(), wp_get_original_image_path(), wp_get_original_image_url()

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 37

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

Миша Рудрастых и WordPress

Полезности из мира WordPress и жизни студии.

Мой телеграм-канал