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

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().

Является основой для: 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
Хуки из функции:
Возвращает

Cтроку.

  • 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) ); // произвольный размер

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

Миниатюры создаваемые функцией get_the_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') ); ?>

Код get_the_post_thumbnail: wp-includes/post-thumbnail-template.php VER 4.9.8

<?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 картинки-миниатюры)

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

39 комментов
Полезные 3 Вопросы 1 Все
  • Александр

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

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

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

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

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

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

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

        Ответить2.8 года назад #
        • lincaseidhe70 cайт: lincaseidhe.ru

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

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

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

          .alignleft {
          	margin: 10px 10px 10px 10px; /*и установите ваши значения*/
          }
          Ответить2.8 года назад #
  • Михаил

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

    <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>

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

    Ответить2.8 года назад #
  • campusboy3061 cайт: www.youtube.com/c/wpplus

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

    Ответить2.2 года назад #
    • Kama7021

      Да!

      // 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
      Ответить2.2 года назад #
      • campusboy3061 cайт: www.youtube.com/c/wpplus

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

        Ответить2.2 года назад #
        • Kama7021

          Это ничего не меняет... Просто в этом случает не будет параметра $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
          Ответить2.2 года назад #
          • campusboy3061 cайт: www.youtube.com/c/wpplus

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

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

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

    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"

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

    Ответить1.2 год назад #
    • campusboy3061 cайт: www.youtube.com/c/wpplus

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

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

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

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

      Ответить1.2 год назад #
    • Kama7021

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

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

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

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

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

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

        Ответить1.2 год назад #
        • Kama7021

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

          Ответить1.2 год назад #
      • @ airy

        Добрый день.
        Аналогичная проблема. Есть размер "medium", который идёт из коробки. Пытаюсь с помощью этой функции его вывести - и сколько не пытаюсь, отдаётся полная версия. Файлы "{file_name}-300x300.jpg" есть в наличии, задаю $size и размерами, и названием размеров - всё бестолку. Более того, если задаю другое зарегистрированное название - всё то же самое, только изменяются атрибуты . А файл всё равно отдаётся "full".

        • Kama7021

          Так не может быть, все есть, но функция не работает... Как ты проверяешь какой файл отдается? Может srcset параметр виноват?

          -1
          • @ airy

            Да я сам удивляюсь как оно так. Файлы грузятся импортом из 1с, при загрузке создаются миниатюры 300x300 и 600x600. Соответственно, если зайти в "upload/year/month" - то там есть файлы {filename}.(jpg|png), {filename}-300x300.(jpg|png), {filename}-600x600.(jpg|png). То есть, full и две миниатюры.
            Хочу чтобы вывелись {filename}-300x300.(jpg|png), добавляю в function.php фильтр, в котором прописываю размер "medium" (который из коробки задан 300х300) или [300, 300], в атрибуты пишется

            <img width="300" height="300" class="attachment-medium size-medium wp-post-image" src="{filename}.(jpg|png)">

            , хотя ведь должен быть src="{filename}-300x300.(jpg|png)". И так с любым размером. В атрибуты заданные в функции размеры пишутся, а в src всё равно {filename}.(jpg|png). Проверяю всё естественно через developer tools, srcset атрибут не используется.
            Вот такая интересная ситуация. На атрибуты img функция влияет, а на файл - почему-то нет. Я уже даже и не знаю куда копать.

  • Как вывести 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>
Здравствуйте, !     Войти . Зарегистрироваться