get_the_post_thumbnail() — позволяет получить изображение миниатюры поста

Возвращает изображение (вместе с HTML-тегом <img> и его атрибутами), которое установлено в качестве миниатюры поста. Если указанный пост не имеет миниатюры, то функция возвращает пустую строку.

get_the_post_thumbnail( $post_id = 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 )).

Пример 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 для изменения класса миниатюры

Давайте добавим на наши миниатюры класс 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-атрибутов, которые были заданы при вызове функции, если не заданы, то пустой массив;

А теперь несколько интересных примеров.

Пример 1. Автоматическое проставление ссылок на пост

Фишка в том, что каждый раз при использовании функции 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);

Круто, да? А главное — всё очень просто.

Пример 2. Возвращаем только 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);

Комментарии 35

  • Ярослав25 августа 2014 в 14:08 #

    Доброе время суток. Подскажите, как миниатюры автоматически делать ссылками на (единственный) файл в посте (в моем случае PDF)?

  • extstar10 февраля 2015 в 00:02 #

    Здравствуйте!
    Помогите пожалуйста настроить миниатюру ссылкой, вот кусок кода из content.php

       		$title_attribute = get_the_title( $post->ID );
         		$image .= '<figure class="post-featured-image">';
      			$image .= '<a href="' . get_permalink() . '" title="'.the_title( '', '', false ).'">';
      			$image .= get_the_post_thumbnail( $post->ID, $featured, array( 'title' => esc_attr( $title_attribute ), 'alt' => esc_attr( $title_attribute ) ) ).'</a>';
      			$image .= '</figure>';
     
      			echo $image;
      		}
    	?>
     
    	<div class="entry-content clearfix">
    		<?php
    			the_excerpt();
    		?>
    	</div>
     
    	<?php if ( 'post' == get_post_type() ) : ?>
  • Татьяна27 февраля 2015 в 11:02 #

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

  • Татьяна27 февраля 2015 в 11:02 #

    Вот полный код

    <?php /*<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo catch_that_image();?>&amp;h=180&amp;w=206&amp;q=90&amp;zc=0" class="alignleft">
    <img src="<?php echo catch_that_image();?>" width="200" class="alignleft">
    • Миша28 февраля 2015 в 08:02 #

      Добрый день!

      <a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image();?>" width="200" class="alignleft"></a>
  • cсергей12 марта 2015 в 17:03 #

    Как вывести текстом размеры оригинальной картинки, которая добавлена в пост в виде миниатюры, например, рядом колонка, разрешения картинки: 200x340 (сайт посвящен галереи, по-этому для каждого поста нужна информация о размерах картинки, один пост - одна картинка, похожее badfon.ru)

  • Миша13 марта 2015 в 14:03 #

    Функция wp_get_attachment_image_src() позволяет это сделать.

  • Павел22 апреля 2015 в 00:04 #

    Здравствуйте! Буду примного благодарен если сможете мне помочь с моей проблемой...
    Во время добавления изображения в пост из медиагалереи, автоматически подставляются "height" и ''weight".

    <img class="alignnone size-full wp-image-856" src="/wp-content/uploads/2015/04/icon.png" width="800" height="650" />

    Можно ли сделать так, чтобы добавляемые изображения имели вид:

    <img class="alignnone size-full wp-image-856" src="/wp-content/uploads/2015/04/icon.png" />

    и не приходилось каждый раз руками все это удалять...

    Заранее спасибо!

  • Руслан23 апреля 2015 в 18:04 #

    Подскажите как можно прописать отображение миниатюры к текущей записи на блоге при постинге в социальные сети:

    Чтобы Вы меня правильно поняли, вот так можно задать определенную картинку:

    <meta property="og:image" content="http://www.mysite.ru/article_image.jpg"/>

    А мне нужно чтобы вместо картинки подставлялась миниатюра которая используется в данной записи, Спасибо!

    • Миша24 апреля 2015 в 08:04 #

      Примерно так:

      <meta property="og:image" content="<?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id() ); echo $thumbnail[0]; ?>"/>
      • Руслан24 апреля 2015 в 09:04 #

        Спасибо за код вроде работает, проблема возникла только с google+, ну это уже другая история. Кстати на просторах инета нашел еще вот такой вариант что скажите:

        <?php global $wp_query; $thePostID = $wp_query->post->ID; if( has_post_thumbnail( $thePostID )){ $thumb_id = get_post_thumbnail_id( $thePostID ); $image = wp_get_attachment_image_src( $thumb_id ); echo '<meta property="og:image" content="'.$image[0].'" />'; } ?>
    • Миша24 апреля 2015 в 08:04 #

      Описание функций вы найдёте у меня на сайте.

  • Алексей25 сентября 2015 в 22:09 #

    подскажите как удалить стандартный класс wp-post-image ?
    вывожу миниатюру для анонса так

    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('medium', array('class' => '')); ?></a>
  • Саша3 ноября 2015 в 22:11 #

    Здравствуйте! Подскажите пожалуйста как изменить этот код чтобы ссылка, кликая на миниатюру товара работала только в каталоге товара, а на странице самого товара не работала? Спасибо!

    add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
    if  ( $post_id = 98 ) {
    function my_post_image_html( $html, $post_id, $post_image_id ) {
     $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
    return $html;
    }
    }
    • Миша4 ноября 2015 в 09:11 #

      Здравствуйте!
      Этот код сам по себе неправильный (или просто так вырван из контекста) :)

      А вообще думаю достаточно в самом начале кода добавить if( !is_singular() )

      • Саша4 ноября 2015 в 09:11 #

        Спасибо, но не помогло =)
        Не можете тогда подсказать как сделать правильно, чтобы ссылка, кликая на миниатюру товара работала только в каталоге товара, а на странице самого товара не работала?

  • Иван24 марта 2016 в 15:03 #

    Миша подскажите,
    Как правильно вывести ссылку на картинку привязанную к посту (как дополнительная миниатюра) в headere в тегах

    <meta...

    я вот так вывожу:

    <meta property="og:image" content="<?php echo the_post_thumbnail(get_post_type($post_id),'soc-sent-image');endif;?>">

    У меня естессно получается:

    <meta property="og:image" content="&lt;img width=" 755"="" height="300" src="http://mysite/wp-content/uploads/kartinka.png" class="attachment-soc_thumbnail_url_only size-soc_thumbnail_url_only wp-post-image" alt="Альт картинки" soc-sent-image="">

    Из этого мне нужна только ссылка на картинку как убрать все остальное? Спасибо!

  • Иван24 марта 2016 в 15:03 #

    То есть должно получиться:

    <meta property="og:image" content="http://mysite/wp-content/uploads/kartinka.png">
    • Артем25 марта 2016 в 02:03 #

      Иван, привет.
      Если, я не ошибаюсь то тебе нужно сделать так:

      <?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'soc-sent-image' ); ?>
      <meta property="og:image" content="<?php echo ($thumbnail[0]); ?> ">

      Можно добавить еще проверку "есть ли миниатюра?", если нет то отдавать в соц сеть заглушку.

      • Иван25 марта 2016 в 10:03 #

        Здорово! Спасибо работает! А не поможете "с заглушкой", а то это у меня еще полдня займет.. на поиски решения, как добавить такую проверку

  • Иван25 марта 2016 в 17:03 #

    Мыша у меня к посту прикреплены 4 картинки, почему при

    <meta property="og:image" content="<?php $post_thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'uploader_custom'); echo $post_thumbnail[0]; ?>" />

    Сайт выводит основной thumbnail поста а не картинку с id "uploader_custom"

    • Миша26 марта 2016 в 08:03 #

      а не картинку с id "uploader_custom"

      Это как понимать? :)

      Если смотреть ваш код, то в нём и выводится основной thumbnail поста с размером изображения "uploader_custom". Так что в данном случае я не совсем понимаю задачу.

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Миша: Да, точно)

  • Владимир: и на третьей строке не хватает скобки ) закрывающей if :)

  • Миша: Добрый вечер! Рекомендую получить ID пользователя через функцию get_current_user_id().

  • Дмитрий: Миша, подскажите пожалуйста, я использую такой редирект, но он не срабатывает: add_action( 'template_redirect', funct...

  • Миша: Ну как не определена - это аргумент функции. Или я просто вас не до конца понимаю.