Практическое применение функции Post-Thumbnail в Wordpress 2.9

29 Мая 2022г. в 04:33

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

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



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

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

add_theme_support('post-thumbnails');
Вставка миниатюр к постам

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



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



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



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

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

<?php the_post_thumbnail(); ?>
Это позволит вывести изображение используя классы 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:

<?php the_post_thumbnail('thumbnail'); ?>
Теперь Wordpress точно знает какую версию миниатюры использовать. Вот что у нас получилось:



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



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

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

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

add_image_size('loopThumb', 588, 125, true);
Описание аргументов:

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

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

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


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

<?php the_post_thumbnail('loopThumb', array('class'=>'loopyThumbs')); ?>
Это выдаст тег img со следующими классами: loopyThumbs и wp-post-image.

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

add_image_size('squareThumb', 125, 125, true);
Также, возможно, Вы захотите, чтобы миниатюры была слева и был небольшой отступ справа:

.attachment-post-thumbnail {
float: left;
margin-right: 10px;
}
Теперь мы меняем код в index.php для отображения нашего квадрата:

<?php the_post_thumbnail('squareThumb'); ?>
Вот что у нас получится:



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

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



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