WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

get_the_post_thumbnail() WP 2.9.0

Получает IMG тег миниатюры поста, если она существует.

Получает миниатюру поста, которая установлена на странице редактирования записи и формирует html код картинки <img> на основе полученной ссылки на миниатюру. Если миниатюру получить не удалось (она не установлена), то будет возвращен пустой результат ''.

Заметка! Чтобы для поста можно было определить картинку миниатюру, нужно активировать такую возможность функцией add_theme_support( 'post-thumbnails' ); в файле шаблона funсtions.php.

Когда нужно получить только URL картинки, используйте get_the_post_thumbnail_url().

Когда в теме добавляется поддержка post-thumbnail, регистрируется специальный размер изображения post-thumbnail, который отличается от размера thumbnail, управляемого через Настройки > Медиа. При использовании этой или связанных функций, используется этот размер post-thumbnail.

Стилизация миниатюр

Миниатюры создаваемые этой функцией получают класс wp-post-image (class="wp-post-image"). Также, устанавливается класс в зависимости от размера миниатюры. В CSS миниатюры стилизуются через следующие селекторы:

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

Также можно задать свой класс:

<?php echo get_the_post_thumbnail( $id, 'thumbnail', array('class' => 'alignleft') ); ?>
Является основой для: the_post_thumbnail()
Работает на основе: wp_get_attachment_image(), get_post_thumbnail_id()
✈ 1 раз = 0.001687с = очень медленно | 50000 раз = 5.72с = быстро | PHP 7.1.5, WP 4.8.2
Возвращает

Строку.

  • HTML код картинки <img>.
  • Пустую строку, если не удалось найти картинку миниатюру записи.

Использование

$thumbnail = get_the_post_thumbnail( $id, $size, $attr );
$id(число/WP_Post)
ID или объект поста, миниатюру которого надо получить.
По умолчанию: null (ID текущего поста)
$size(строка/массив)

Размер необходимой миниатюры:

  • Можно указать строку: thumbnail, medium, large или full.
  • Или массив из двух элементов, обозначающих размер миниатюры (ширину и высоту): array(32, 32).

По умолчанию: 'post-thumbnail'

$attr(строка/массив)

Строка в виде запроса или массив аргументов, которые определят атрибуты тега img.

$default_attr = array(
	'src'   => $src,
	'class' => "attachment-$size",
	'alt'   => trim(strip_tags( $attachment->post_excerpt )),
	'title' => trim(strip_tags( $attachment->post_title )),
);

По умолчанию: ''

Примеры

#1 Что вернет функция

$thumb = get_the_post_thumbnail( 6462, 'thumbnail' );

/* $thumb будет равен
<img
	width="80" height="80"
	src="/wp-content/uploads/2016/07/http-api-80x80.png"
	class="attachment-thumbnail size-thumbnail wp-post-image"
	alt="WordPress HTTP API"
/>
*/

#2 Базовый пример использования

<?php $pages = get_pages(array( 'child_of'=>1 )); ?>
<ul>
	<?php foreach( $pages as $page ){ ?>
		<li>
			<?php echo get_the_post_thumbnail( $page->ID, 'thumbnail'); ?>
			<h1><?php echo get_the_title($page); ?></h1>
			<?php echo get_the_excerpt($page); ?>
		</li>
	<?php } ?>
</ul>

#3 Размеры миниатюр

Размеры для картинок в WordPress обозначаются условно:

  • thumbnail - маленькая миниатюра;
  • medium - средняя;
  • large - большая;
  • full - оригинал, картинка которую мы загружали.

Указать конкретные размеры в пикселях для каждого типа можно в настройках (Параметры > мадиафайлы).

Эти примеры показывают, как можно получить картинку нужного размера:

get_the_post_thumbnail( $id );         // без параметра $size

get_the_post_thumbnail( $id, 'thumbnail' );     // маленькая миниатюра
get_the_post_thumbnail( $id, 'medium' );        // среднего размера
get_the_post_thumbnail( $id, 'large' );         // большого размера

get_the_post_thumbnail( $id, array(100,100) ); // произвольный размер

Список изменений

С версии 2.9.0 Введена.
С версии 4.4.0 $post can be a post ID or WP_Post object.

Код get the post thumbnail: wp-includes/post-thumbnail-template.php WP 5.4.2

<?php
function get_the_post_thumbnail( $post = null, $size = 'post-thumbnail', $attr = '' ) {
	$post = get_post( $post );
	if ( ! $post ) {
		return '';
	}
	$post_thumbnail_id = get_post_thumbnail_id( $post );

	/**
	 * Filters the post thumbnail size.
	 *
	 * @since 2.9.0
	 * @since 4.9.0 Added the `$post_id` parameter.
	 *
	 * @param string|array $size    The post thumbnail size. Image size or array of width and height
	 *                              values (in that order). Default 'post-thumbnail'.
	 * @param int          $post_id The post ID.
	 */
	$size = apply_filters( 'post_thumbnail_size', $size, $post->ID );

	if ( $post_thumbnail_id ) {

		/**
		 * Fires before fetching the post thumbnail HTML.
		 *
		 * Provides "just in time" filtering of all filters in wp_get_attachment_image().
		 *
		 * @since 2.9.0
		 *
		 * @param int          $post_id           The post ID.
		 * @param string       $post_thumbnail_id The post thumbnail ID.
		 * @param string|array $size              The post thumbnail size. Image size or array of width
		 *                                        and height values (in that order). Default 'post-thumbnail'.
		 */
		do_action( 'begin_fetch_post_thumbnail_html', $post->ID, $post_thumbnail_id, $size );
		if ( in_the_loop() ) {
			update_post_thumbnail_cache();
		}
		$html = wp_get_attachment_image( $post_thumbnail_id, $size, false, $attr );

		/**
		 * Fires after fetching the post thumbnail HTML.
		 *
		 * @since 2.9.0
		 *
		 * @param int          $post_id           The post ID.
		 * @param string       $post_thumbnail_id The post thumbnail ID.
		 * @param string|array $size              The post thumbnail size. Image size or array of width
		 *                                        and height values (in that order). Default 'post-thumbnail'.
		 */
		do_action( 'end_fetch_post_thumbnail_html', $post->ID, $post_thumbnail_id, $size );

	} else {
		$html = '';
	}
	/**
	 * Filters the post thumbnail HTML.
	 *
	 * @since 2.9.0
	 *
	 * @param string       $html              The post thumbnail HTML.
	 * @param int          $post_id           The post ID.
	 * @param string       $post_thumbnail_id The post thumbnail ID.
	 * @param string|array $size              The post thumbnail size. Image size or array of width and height
	 *                                        values (in that order). Default 'post-thumbnail'.
	 * @param string       $attr              Query string of attributes.
	 */
	return apply_filters( 'post_thumbnail_html', $html, $post->ID, $post_thumbnail_id, $size, $attr );
}

Cвязанные функции

Из метки: thumbnail (image картинки-миниатюры)

Еще из раздела: Миниатюры

Еще из тегов шаблона: Миниатюры Вложения

42 коммента
Полезные 4 Вопросы 1 Все
  • Александр

    Здравствуйте!
    Не подскажите, как вывести картинку в начале поста, которая установлена в качестве миниатюры, но в самой теме разработчиком не предусмотрен ее вывод в начале поста. Не судите строго, если сформулировал свой вопрос не достаточно правильно, я только учусь работать с вордпресс.

    В файл темы (loop-single.php) я вставляю код следующего вида

    <?php the_post_thumbnail('large', array('class' => 'alignleft')); ?>

    и картинка выводится перед началом текста, так как и нужно, но она не увеличивается в размере, не могу понять что именно нужно прописать в functions.php, что бы картинка установленная в качестве миниатюры выводилась и в посте перед началом текста в своем исходном размере размере.

    Использую тему zeeFlow, ссылка на тему http://business.themezee.com/themes/zeeflow/
    Заранее благодарен за ответы, советы и помощь.

    Ответить4.5 года назад #
    • Kama7770
      <?php the_post_thumbnail('full', array('class' => 'alignleft')); ?>
      2
      Ответить4.5 года назад #
      • Валерий

        Здравствуйте! Подскажите как сюда добавить отступы, к картинке?

        Ответить4.5 года назад #
        • lincaseidhe82 lincaseidhe.ru

          отступы вы можете указать в файле style.css вашей темы. для этого используйте селектор который вы добавляете к картинке. например, если картинка выводится этим кодом:

          <?php the_post_thumbnail('full', array('class' => 'alignleft')); ?>

          то в style.css нужно добавить:

          .alignleft {
          	margin: 10px 10px 10px 10px; /*и установите ваши значения*/
          }
          Ответить4.5 года назад #
      • Сергей topinc.ru

        Подскажите как получить не картинку (ID, 'full'); ?>) а именно ссылку картинки чтобы можно было ее вставить на фон блока...

        Ответить1.5 года назад #
  • добрый день, как с помощью этой функции получить вывод картинки такого вида:

    <img src="/wp-content/uploads/изображение.jpg" class="img-responsive">

    Хочу чтобы вордпресс не добавлял никаких атрибутов и присвоил только нужный мне класс. У меня выводит сейчас такое :

    <a href="http://test.ru/1/"><img width="800" height="600" src="http://test.ru/wp-content/uploads/изображение.jpg" class="img-responsive wp-post-image" alt="2" srcset="http://test.ru/wp-content/uploads/изображение-300x225.jpg 300w, http://test.ru/wp-content/uploads/изображение-768x576.jpg 768w, http://test.ru/wp-content/uploads/изображение.jpg 800w" sizes="(max-width: 800px) 100vw, 800px"></a>

    Хочу убрать всё лишнее

    Ответить4.5 года назад #
  • campusboy3554 www.youtube.com/c/wpplus

    До сих пор не могу никак начать работать с фильтрами и хуками, что пишутся обычно к функциям. Вот к примеру, могу ли я перехватить вывод результата данной функции и подменить своим?

    Ответить3.9 года назад #
    • Kama7770

      Да!

      // apply_filters( 'post_thumbnail_html', $html, $post->ID, $post_thumbnail_id, $size, $attr );
      add_filter('post_thumbnail_html', function( $html, $post_id, $post_thumbnail_id, $size, $attr ){
      	// делаем что-нить с $html
      
      	return $html;
      }, 10, 5);
      1
      Ответить3.9 года назад #
      • campusboy3554 www.youtube.com/c/wpplus

        Я наверное уточню "хотелку". К примеру, есть старый сайт и там все картинки подтягиваются с других сайтов. В своей теме у меня написана функция, которая берет контент, с помощью регулярки находит 1 картинку и выводит. Эдакий аналог the_the_post_thumbnail. Но если я поставлю новую тему, где используется the_the_post_thumbnail, то хотелось бы её "перехватывать" и подставлять результат своей функции этой, дабы не перекопировать к себе на сайт картинки и не прикреплять их к записи.

        Ответить3.9 года назад #
        • Kama7770

          Это ничего не меняет... Просто в этом случает не будет параметра $post_thumbnail_id и соответственно $html будет равен ''. Т.е. тебе нужно сунуть свою функцию в этот фильтр. Если где-то нужно изменить размер на основе указанного в the_post_thumbnail() размера то опирайся на параметр $size в хуке. Т.е. будет как-то так:

          // apply_filters( 'post_thumbnail_html', $html, $post->ID, $post_thumbnail_id, $size, $attr );
          add_filter('post_thumbnail_html', 'my_thumb_hook', 10, 5);
          function my_thumb_hook( $html, $post_id, $post_thumbnail_id, $size, $attr ){
          	// если нет своей картинки у записи
          	if( ! $html ){
          		// твоя функция получения картинки записи
          		$html = my_function( $post_id );
          
          		// если твоя функцию умеет работать с размерами то
          		// $html = my_function( $post_id, $size );
          	}
          
          	return $html;
          }
          1
          Ответить3.9 года назад #
          • campusboy3554 www.youtube.com/c/wpplus

            Низкий тебе поклон. Бомба! Пашет, аж шуба заворачивается!

            2
            Ответить3.9 года назад #
  • Роман

    Добрый день. Указываю размер

    get_the_post_thumbnail( $aValue->ID, array(250, 160) )

    а миниатюра всё равно выводится большая
    например

    src="/wp-content/uploads/2016/07/http-api.png"

    а должна быть

    src="/wp-content/uploads/2016/07/http-api-250x160.png"

    Что это может быть ?

    Ответить2.9 года назад #
    • campusboy3554 www.youtube.com/c/wpplus

      Приветствую. Может быть не зарегистрировано близких по значению миниатюр? Ведь get_the_post_thumbnail() не режет картинку по указанным размерам, а лишь выводит указанный вариант или же пытается подобрать самый подходящий, что есть, если переданы значения высоты/ширины.

      Ответить2.9 года назад #
    • Роман

      Самое интересное что класс миниатюре пишет правильный
      class="attachment-250x160 size-250x160 wp-post-image"
      а src - не правильно.

      <img width="250" height="153" - ширину формирует правильно, а высоту нет - непонятно как высчитывает.

      Ответить2.9 года назад #
    • Kama7770

      Все тут правильно! Смотри, ты регнул размер, для него указано не кадрировать (судя по всему). Размер указан как 250x160. Миниатюра создается, но при этом подбирается наиболее подходящая сторона, в результате реальные резамеры миниатюры получаются 160x153. Далее ты просишь вывести картинку 250x160 но подходящей картинки нет, потому что ширина подходит, а высота нет. Поэтому выводится полная картинка...

      Функция не выведет картинку меньшую чем ты попросил - только большую, при этом учитываются обе стороны.

      Тебе лучше всего выводить картинку по называнию создаваемой миниатюры (при реге указывается название)... Или попробуй указать размер без высоты array(250, 0), не уверен что сработает...

      Ответить2.9 года назад #
      • Роман

        Добрый день. Какой же выход? Регистрировать свой размер и получать его?.

        Интересно ещё то что на одном сервере функция работает правильно, какой размер написал такой и делает (правильно и высоту и ширину и сама регистрирует нужный размер миниатюры), а на другом выбирает только указанную ширину и пропорционально под нее делает высоту.

        Ответить2.9 года назад #
        • Kama7770

          Это зависит от начальной картинки. Функция на всех серверах одинаково работает, начальные условия разные судя по всему...

          Ответить2.9 года назад #
  • Как вывести alt? для картинки
    вывожу так

    <picture>
    	<source srcset="<?= get_the_post_thumbnail_url($id, 'medium' ); // thumbnail - medium - large ?>" media="(max-width: 767px)">
    	<?= get_the_post_thumbnail( $id, 'large', $attr ); // thumbnail - medium - large ?>
    </picture>
    Ответить2.1 года назад #
  • 8Вітя

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

    <?php the_post_thumbnail('full', array('class' => 'alignleft')); ?>

    А как можно добавить тайтл и альт к этому коду. Тайтл и альт нужно взять с названия статьи

    Ответить1.4 года назад #
    • игорь

      я беру урл и сам строю розметку с ссілки классов стилей и альта и чего то еще - а не вівожу картинку уже готовую с вп но єто мой принцип — читайте про the_post_thumbnail().

      Ответить1.4 года назад #
      • 8Вітя

        Я так тоже делаю. Но для плагин a3 lazy load не видит таких изображений

        Ответить1.4 года назад #
        • игорь
          $attr = array(
          	'src'   => $src,
          	'class' => "attachment-$size",
          	'alt'   => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )),
          );
          
          the_post_thumbnail( $size, $attr );
          
          1
          Ответить1.4 года назад #