WordPress как на ладони
wordpress jino

the_post_thumbnail() WP 2.9.0 the post thumbnail

Выводит html код картинки-миниатюры поста.

Дополнительный размер картинки, которую затем можно получить с помощью этой функции, можно создать через add_image_size(). По умолчанию доступны следующие размеры: thumbnail, medium, large, full, post-thumbnail.

Этот Тег шаблона должен использоваться внутри Цикла WordPress.

Работает на основе: get_the_post_thumbnail()
✈ 1 раз = 0.003724с = очень медленно | 50000 раз = 41.51с = очень медленно

Хуков нет.

Возвращает

Ничего - выводит на экран строку. Функция выводит на экран html код картинки или пустое значение (null), если картинки не существует.

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

<?php the_post_thumbnail( $size, $attr ); ?>
$size(строка/массив)

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

Когда указан массив, новая миниатюра с указанными размерами не создается. А WP ищет самый подходящий размер из тех что уже есть, берет его и просто указывает высоту и ширину в пикселях для тега IMG, чтобы уменьшить картинку. Т.е. картинка уменьшается только визуально.

По умолчанию: 'post-thumbnail', размер который устанавливается для темы функцией set_post_thumbnail_size()

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

Массив атрибутов, которые нужно добавить получаемому html тегу img. Можно указать строкой: alt=альтернативное название&class=alignleft или массивом:

$default_attr = array(
	'src' => $src,
	'class' => "attachment-$size",
	'alt' => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )),
);

Атрибуты можно указывать любые.
По умолчанию: ''

Примеры

Дополнительные примеры, то как стилизовать миниатюры и передавать атрибуты смотрите в описании функции get_the_post_thumbnail().

#1 Миниатюра как ссылка на пост

Пример 1: Используйте следующий код, чтобы сделать картинку-миниатюру ссылкой на пост. Пример для использования внутри Цикла WordPress:

<?php if ( has_post_thumbnail()) { ?>
   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail(); ?>
   </a>
 <?php } ?>

#2: Сделаем миниатюру ссылкой на пост

Для этого используем хук post_thumbnail_html. В этом случае картинка будет ссылкой на пост сразу при вызове функции the_post_thumbnail();. Код нужно добавлять в файл шаблона functions.php:

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );

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;

}

#3 Миниатюра-ссылка на оригинальный размер

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

<?php
 if ( has_post_thumbnail()) {
   $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
   echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
   the_post_thumbnail('thumbnail');
   echo '</a>';
 }
 ?>

#4 Регистрация нового размера

С помощью add_image_size() можно зарегистрировать новый размер и затем получить его по ключу:

// допустим в functions.php мы регистрируем дополнительный размер так:
add_image_size( 'spec_thumb', 360, 240, true );

// далее в цикле выводим этот размер так:
the_post_thumbnail( 'spec_thumb' );

Код из wp-includes/post-thumbnail-template.php WP 4.7.3

<?php
function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ) {
	echo get_the_post_thumbnail( null, $size, $attr );
}

Связанные Функции

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

the_post_thumbnail 32 комментария
Полезные 3 Вопросы 4 Все
  • Игорь cайт: new-lady.com

    У меня такой код теме вордпресс.

    <img width="" height="" src="" alt=""/>
    <div class="thumb ">

    <a href="" class="line-height-1">

    Что мне нужно в нем изменить. чтобы можно было при клике здесь на картинку переходить на страницу с портфолио.

    Ответитьгод назад #
  • Oleg cайт: angrygif.com
    @

    Хочу от все души вас поблагодарить за информацию о функции которая делает миниатюру кликабельной большое спасибо решил проблему с помощь ваших рекомендаций, и коду который вы выложили при том что в php я полный ноль, удачи вам, а вашему блогу офигенного трафика smile

    Ответитьгод назад #
    1
    • Kama4197

      Спасибо за теплые слова! thank_you

      Ответитьгод назад #
      1
      • Oleg cайт: angrygif.com
        @

        Доброй ночи, еще раз поблагодарю за ваши труды, у меня нескромный вопрос, вам случайно не известна возможность снятия ограничений на мета описания title и description в seo плагине для wordpress all in one seo pack, это необходимо делать в коде плагина я признаться все перерыл написал разработчика, они проигнорировали мое письмо. При этом эти ограничения сильно влияют на оптимизацию и продвижение сайта, и если Вам случайно знакома возможность изменения данной функции, благодарны бы Вам были бы многие cms очень популярная. Извините что не в тему написал smile еще раз спасибо за ваши труды!!!

        Ответитьгод назад #
  • Веточка
    @

    Подскажите, пожалуйста, как мне header вложить в div с thumbnail'ом, чтобы ничего не сломать? wacko
    Я совсем не знаю php, появилось желание переверстать заголовок так, чтобы h1 красиво лежал поверх изображения, но для этого мне вложенность нужна, а тут всякие if, echo, они меня напрягают boredom

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    	<?php
    	if (has_post_thumbnail()) {
    		echo '<div class="single-post-thumbnail clear">';
    		echo the_post_thumbnail('large-thumb');
    		echo '</div>';
    	}
    	?>
    	<header class="entry-header">
    		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    	</header>
    Ответитьгод назад #
  • Алексей cайт: redluck-casino.info

    Здравствуйте. Подскажите, как можно сделать такое? Например картинка 1024x768. Надо что бы миниатюра была 1024х300

    • campusboy1381 cайт: wp-plus.ru
      @

      Приветствую. Читаем самое начало статьи:

      Дополнительный размер картинки, которую затем можно получить с помощью этой функции можно создать через add_image_size(). Например: по умолчанию доступны следующие размеры: thumbnail, medium, large, full, post-thumbnail.

      То есть Используем код:

      add_image_size( 'big-my-thumb', 1024, 768, true );

      Можно, кстати, ничего не прописывать, а зайти в настройки движка, пункт меню "Медиафайлы" и у "Крупный размер" размер выставить свои значения, чтобы лишних картинок не плодить относительно 1 способа. А использовать так потом в шаблоне:

      <?php the_post_thumbnail('large'); ?>
  • lincaseidhe21 cайт: ardeya.ru

    А как работает массив с размерами? На лету картинка обрезается? И получается что каждый раз при запросе этой страницы будет обрезаться? Или она потом сохраняется с тем размером, который указан в массиве?

    Ответить4 месяца назад #
  • Игорь Плеван

    Здравствуйте, у меня вопрос как мне в этом массиве вывести тайтл изображения?

    $default_attr = array(
    	'src' => $src,
    	'class' => "attachment-$size",
    	'alt' => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )),
    );
    Ответить2 месяца назад #
  • Egor cайт: azbuka12.ru/category/styazhka-pola
    @

    В админке есть возможность задать миниатюру, тема b3. Но она не выводится в рубриках анонсов. Может быть нужно что-то поменять в файле content.php?

    ```<div class="entry-content clearfix">
    <?php
    if ('Y' == b3theme_option('excerpt')) {
    if (b3theme_option('post_thumbnail')) {
    the_post_thumbnail('thumbnail', array('class' => 'thumbnail attachment-thumbnail alignleft'));
    }
    the_excerpt(); ?>
    <?php
    }
    else {
    the_content( __('Continue reading <span class="meta-nav">→</span>', 'b3theme') );
    wp_link_pages();
    }
    ?>
    </div><!-- .entry-content -->

    Ответить14 дней назад #

Здравствуйте, !

Ваш комментарий