the_post_thumbnail() - миниатюра записи в анонсе WordPress

Главная » Создание блога » Настройка Wordpress » Функция the_post_thumbnail() — миниатюра записи в анонсе WordPress

Функция the_post_thumbnail() — миниатюра записи в анонсе WordPress

2014-06-09 автор: Виталий Кириллов

Всем привет! Сегодня на seo-mayak.com урок на тему: миниатюра записи в анонсе WordPress. Заодно мы разберем работу функции the_post_thumbnail() и поговорим о размерах миниатюр.

Не так давно, один мой читатель спрашивал, какой плагин я использую для вывода миниатюр в анонсах записей. Для реализации сей простой задачи, использовать плагины вовсе не обязательно, скажу больше, это вредит сайту. Объясню почему.

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

miniatiura zapisi

Поэтому всем очень советую по возможности вместо плагинов пользоваться функциями WordPress, благо таковые имеются.

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

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

Так же не маловажное значение в работе с изображениями имеет их оптимизация перед загрузкой на сайт, про это читайте здесь.

Прежде всего необходимо определится, какой размер миниатюры мы хотим вывести в анонс. Давайте разберемся, какие размеры нам предлагает WordPress по-умолчанию и как их можно изменить. Поехали!

Размеры изображений WordPress

В настройках WordPress ( Настройки -> Медиафайлы ) по умолчанию заданны следующие размеры:

Размер миниатюры — 150х150 пикселей;
Средний размер — 300х300 пикселей;
Крупный размер — 640х640 пикселей;
Исходный размер не задается.

Каждому указанному размеру WordPress присваивает обозначение или название, как угодно:

150х150 — thumbnail;
300х300 — medium;
640х640 — large;
Исходный размер — full.

Это значит, что при вызове миниатюры, вовсе не обязательно указывать ее размеры, а достаточно прописать название, в качестве параметра для функции, но об этом чуть позже.

Здесь важно понимать, что если вы уже загружали на сайт n-количество изображений и при этом не меняли настройки, то миниатюры будут созданы исходя из размеров по умолчанию. Поэтому не стоит удивляться, если миниатюры будут выводится в обрезанном виде.

В данной ситуации есть два решения.

Решение №1. Выставить нужные пропорции в настройках и перезалить все изображения, тем самым избавив сервер от лишней нагрузки, связанной с необходимостью менять размеры картинок, так сказать, на лету. Это решение, я считаю, будет самым правильным.

Решение №2. Можно обойтись без перезаливки изображений, тем самым забив на рекомендации PageSpeed и изменить размеры в самой функции.

Итак, самое время познакомить Вас с функцией вывода изображений, которая называется the_post_thumbnail().

Функция the_post_thumbnail()

Скажу сразу, функция the_post_thumbnail() — это тег шаблона, который работает только внутри цикла WordPress.

На заметку! Функция the_post_thumbnail() работает на основе get_the_post_thumbnail().

Единственное отличие функции the_post_thumbnail() от get_the_post_thumbnail() в том, что в ней нельзя указать ID записи, в качестве параметра, так как функция всегда берет миниатюру с текущего поста в цикле.

Если Вы ранее не использовали миниатюры, то обязательно проверьте включена ли поддержка миниатюр в Вашей теме. Как это сделать читайте тут.

Функция the_post_thumbnail() может принимать один или два параметра. Первым параметром всегда идет размер изображения, например:

<?php the_post_thumbnail('medium'); ?>

На данном примере, в качестве первого и единственного параметра, я указал средний размер миниатюры, который был задан в настройках WordPress.

Также можно изменить размер миниатюры заданный в настройках, но при этом пропорции сторон уже созданного изображения не изменятся:

<?php the_post_thumbnail(array(50,50)); ?>

Где 50,50 — новые размеры для миниатюры.

Вторым параметром функция может принимать CSS класс, например:

<?php the_post_thumbnail('medium', array('class' => 'miniature')); ?>

В файле style.css, для класса .miniature, можно прописать следующие стили:

.miniature{
    background: #D2D2D2;  /* задний фон */
    border: 1px solid #888888;  /* рамка */
    border-radius: 8px;  /* закругление углов */
    float: left;  /* Выравнивание по левому краю */
    height: 181px;  /* Высота изображения */
    width: 250px;  /* Ширина изображения */
    margin-bottom: 5px;  /* Внешний отступ снизу */
    margin-right: 15px;  /* Внешний отступ справа */
    padding: 5px;  /* Внутренние отступы */ 
}

Вы наверное поняли, что стили, которые я привел выше, были применены на моем блоге и конечно Вы их можете изменить на свое усмотрение. Для работы со стилями советую пользоваться расширением Firebug.

Но прописывать свой CSS класс в функции вовсе не обязательно, так как всем миниатюрам, созданными функцией get_the_post_thumbnail(), WordPress присваивает общий класс .wp-post-image, но кроме того, миниатюры получают отдельный класс, в зависимости от их размера:

.attachment-thumbnail — размер миниатюры;
.attachment-medium — средний размер;
.attachment-large — крупный размер;
.attachment-full — исходный размер.

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

Как вывести миниатюру в анонс статьи

За анонсы записей в шаблонах WordPress отвечают следующие файлы:

index.php — главная страница
category.php — страницы категорий
archive.php — страницы архивов
tag.php — страницы меток

Стоит заметить, что в вашем шаблоне возможно нет некоторых файлов из списка, так как все шаблоны разные и бывает, что за вывод категорий, тегов и архивов отвечает всего один файл.

Также, основные файлы могут быть разделены на дополнительные, так сказать, подфайлы. Советую почитать статью — Функция get_template_part(). Структура современных шаблонов WordPress.

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

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

Итак, Внутри цикла ищем строчку с тегами заголовка. У кого-то это может быть тег h1, у кого-то h2, но в большинстве случаев строчка выглядит так:

<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

И ниже этой строчки вставляем следующий код:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_post_thumbnail('medium'); ?></a>

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

Но если кому-то принципиально не хочется чтобы миниатюра была ссылкой, то достаточно будет прописать так:

<?php the_post_thumbnail('medium'); ?>

Вставляем данный код во все файлы отвечающие за вывод анонсов и не забываем добавить стили в файл style.css, с классом соответствующим размеру миниатюр, пример которых я приводил выше.

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

miniatiura zapisi2

Вот в принципе и все! Если что-то не понятно, задавайте вопросы в комментариях.

До встречи!

С уважением, Виталий Кириллов

Интересное на блоге

Комментарии: 98

Петр:

2016-01-31

Здравствуйте, Виталий. Я понял принцип реализации данной идеи. Только у меня возникли проблемы с подстановкой нужного кода. Приведите, пожалуйста пример. Спасибо. С уважением Пётр.

Ответить

Виталий Кириллов:

2016-01-31

В файл functions.php вставляем следующее:

function catch_that_alt() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+alt=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
return $first_img;
}
function catch_that_title() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+title=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
return $first_img;
}
function catch_that_width() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+width=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
return $first_img;
}
function catch_that_height() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+height=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
return $first_img;
}

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

<img src="<?php echo catch_that_image(); ?>" alt="<?php echo catch_that_alt(); ?>" title="<?php echo catch_that_title(); ?>" width="<?php echo catch_that_width(); ?>" height="<?php echo catch_that_height(); ?>"/>

Ответить