На многих блогах рядом с описанием постов можно встретить небольшую (большую) миниатюру, которая должна передавать содержание поста. До некоторых пор создать такое было нелегко. С появлением же Wordpress 2.9 осуществить такое стало намного легче.

В этом уроке я покажу Вам как добавить подобный функционал к Вашим шаблонам оформления Wordpress.

Включение Post-Thumbnail функции в шаблонах

Включение происходит очень просто. Все что от Вас требуется - добавление одной строки в файле functions.php:

add_theme_support('post-thumbnails');

Вставка миниатюр к постам

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

Заметьте, что новый отдел может находится вне видимости и Вам придется опуститься немного ниже. После нажатия Set thumbnail появляется новое диалоговое окно

Нажмите Use as thumbnail и миниатюра будет добавлена к Вашему сообщению:

Отображение миниатюр

После того как мы написали новость, давайте добавим ее. Для того, чтобы миниатюра отображалась необходимо добавить строку в цикл Wordpress. Откройте файл index.php и добавьте следующее:

Это позволит вывести изображение используя классы attachment-post-thumbnail и wp-post-image. C помощью этих классов мы сможем оформить внешний вид миниатюр с помощью CSS. В картинке ниже мы можем увидеть миниатюру с границей и отступом.

На картинке выше миниатюра довольно большая. Ее размер можно менять из админки Settings > Media.

Другой способ определение размеров миниатюры - это изменение файла functions.php. Для этого нам понадобится добавить еще одну строку:

add_theme_support('post-thumbnails');
set_post_thumbnail_size(588, 250, true);

Теперь нам необходимо сообщить Wordpress, чтобы использовался именно этот размер. Требуется немного видоизменить наш цикл в index.php:

Теперь Wordpress точно знает какую версию миниатюры использовать. Вот что у нас получилось:

Теперь добавим еще немного PHP в файл single.php, чтобы при открытии сообщения миниатюра была в самом верху:

Добавление больше размеров миниатюр

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

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

add_image_size('loopThumb', 588, 125, true);

Описание аргументов:

- loopthumb - название нового размера миниатюр
- 588 - ширина в пикселях
- 125 - высота
- true - настройка, которая сообщает Wordpress следует ли использовать средства движка для изменения размеров изображения

Нам необходимо будет изменить наш код в файле index.php:

Также следует заметить, что у нас появятся два новых стиля для управления внешним видом миниатюры нового размера: attachment-loopThumb и wp-post-image. Может быть полезно обращаться к классу wp-post-image в таблице стилей или же добавить собственный класс при обращении к миниатюре:

'loopyThumbs')); ?>

Это выдаст тег img со следующими классами: loopyThumbs и wp-post-image.

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

add_image_size('squareThumb', 125, 125, true);

Также, возможно, Вы захотите, чтобы миниатюры была слева и был небольшой отступ справа:

.attachment-post-thumbnail {
 float: left;
 margin-right: 10px;
}

Теперь мы меняем код в index.php для отображения нашего квадрата:

Вот что у нас получится:

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

Но есть выход и в этой ситуации. Нам поможет плагин Regenerate Thumbnails. После установки плагина - зайдите Tools > Regen и сгенерируйте новые миниатюры (Regenerate all Thumbnails). После этого у нас будут ровные квадраты.

И помните - для отображения миниатюр у Вас должен стоять Wordpress 2.9.

Надеюсь, Вам понравился урок. До следующих встреч!