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

Добавление поддержки миниатюр в WordPress
Чтобы иметь возможность задавать изображения в качестве миниатюр для страниц WordPress, необходимо активировать поддержку миниатюр в шаблоне. Для этого добавьте следующий код в файл functions.php вашей темы оформления.
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}
После этого при создании страницы в правой колонке появится новый блок «Миниатюра записи».
Чтобы задать миниатюру для записи, достаточно нажать на ссылку и выбрать нужное изображение, после чего нажать «Задать миниатюру». При этом вы можете выбирать изображение как с общей библиотеки файлов, так и загрузить отдельно, используя стандартный загрузчик.
После добавления миниатюры, в соответствующем блоке отобразится выбранное вами изображение.
Если же блок добавления миниатюр не появился на странице добавления/редактирования записи, то зайдите в пункт «Настройки экрана» в правом верхнем углу рядом с кнопкой «Помощь» и отметьте чекбокс «Миниатюра записи».
Если и это не помогло – проверяйте корректность добавления функции активации миниатюр.
Функция вывода миниатюр в WordPress
Для вывода миниатюр в теме оформления WordPress используется специальная функция the_post_thumbnail(). Она используется внутри цикла WordPress и может принимать два параметра – размер миниатюры и массив атрибутов.
the_post_thumbnail( $size, $attr );
- $size – название миниатюры (стандартные thumbnail, medium, large, full) или массив, содержащий ширину и высоту изображения, например, array(64, 64). Также в качестве значения можно передавать название миниатюр с произвольными размерами, созданными при помощи функции add_image_size().
- $attr – массив атрибутов. Например, чтобы задать класс для изображения достаточно прописать array(‘class’ => ‘thumb-class’). Поскольку другие параметры используются очень редко, то мы их рассматривать не будем. Более подробно обо всех значениях можно прочесть в кодексе WordPress.
Код вывода миниатюр разных размеров
the_post_thumbnail(); // Передается параметр -> 'post-thumbnail'
the_post_thumbnail('thumbnail'); // Размер по умолчанию: 150px x 150px max
the_post_thumbnail('medium'); // Размер по умолчанию: 300px x 300px max
the_post_thumbnail('large'); // Размер по умолчанию: 640px x 640px max
the_post_thumbnail('full'); // оригинальный размер загруженного файла
the_post_thumbnail( array(100,100) ); // Произвольный размер (100px x 100px)
Пример готового кода для вывода миниатюр в шаблоне WordPress
В качестве примера, давайте рассмотрим код вывод миниатюры-ссылки на большое изображение. Это особенно удобно, если на сайте используются всплывающие изображения. Поскольку отдельно расписывать код довольно неудобно, то напротив каждой строчки будет комментарий с объяснениями.
<?php
if ( has_post_thumbnail()) { /* Проверка наличия прикрепленной к посту миниатюры */
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); /* Получаем ссылку на большое изображение */
echo '<a class="highslide" href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >'; /* Формируем ссылку на большое изображение с использованием классов CSS и атрибута Title */
the_post_thumbnail('thumbnail', array('class' => 'single-thumb')); /* Выводим миниатюру thumbnail с классом single-thumb */
echo '</a>'; /* Добавляем закрывающий тег для ссылки */
} else { /* Если у поста нет миниатюры */ ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" > <?php /* Формируем ссылку на текущую страницу с заголовком, равным заголовку текущей страницы */ ?>
<img src="<?php bloginfo('template_directory'); ?>/images/noimage.jpg" width="180" height="180" alt="No image" /> <?php /* Вручную задаем код вывода альтернативного изображения */ ?>
</a><?php } /* Добавляем закрывающий тег для ссылки */ ?>
Изменение размеров миниатюр
По умолчанию размеры стандартных миниатюр можно изменять непосредственно через административную панель сайта в разделе Настройки – Медиафайлы. К ним относятся миниатюры thumbnail, medium и large.
Кроме того, вы можете изменить/установить размер миниатюры поста, выводимой функцией the_post_thumbnail(), при помощи функции set_post_thumbnail_size(), которую необходимо добавить в файл functions.php:
set_post_thumbnail_size($width, $height, $crop);
- $width – ширина миниатюры в пикс (по умолчанию. 0).
- $height – высота миниатюры в пикс. (по умолчанию 0).
- $crop – кадрирование или уменьшение изображения. true — будет взята часть изображения с указанными размерами, false – изображение будет уменьшено пропорционально, а все лишнее обрезано (по умолчанию: false).
Добавление миниатюр с произвольными размерами
Если стандартных миниатюр вам недостаточно, то при необходимости вы можете создать дополнительно любое количество миниатюр с произвольными размерами. Для этого используйте следующую функцию, которую необходимо будет добавить в файл functions.php вашей темы оформления WordPress.
add_image_size( $name, $width, $height, $crop );
- $name – название миниатюры.
- $width – ширина миниатюры в пикселях.
- $height – высота миниатюры в пикселях.
- $crop – кадрирование (true) или уменьшение (false) изображения (по умолчанию false).
Пример:
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'my-thumb', 180, 210 ); //180 в ширину и 210 в высоту
}
В этом случае при загрузке изображения WordPress будет дополнительно создавать еще один файл изображения с максимальным размером 180 пикс в ширину и 210 пикс в высоту. Подгонка всегда ведется по большей стороне. Например, если исходное изображение имело размер 500×1000 пикс., то миниатюра будет размером 105×210 пикс.
Использование произвольных миниатюр
Использование миниатюр произвольных размеров ничем не отличается от использования стандартных. Разница лишь в названии миниатюры.
the_post_thumbnail('my-thumb');
Вышеприведенный код выведет миниатюру my-thumb, созданную при помощи кода, приведенного чуть выше. Аналогичным образом выводятся миниатюры и с другими названиями.
На этом данная статья подошла к концу. Удачи вам и успехов в создании сайтов!
Здравствуйте. На второй картинке этой записи (как задать миниатюру), изображен стандартный загрузчик, который очень неудобный. Пробовал его видоизменить с помощью плагина WordPress Uploaded Files Cleaner. Получилось, однако пропала возможность передвигать виджеты и ряд других функций. Помогите, плиз.
Здравствуйте, Денис. Попробуйте использовать плагин Faster Image Insert. С его помощью очень удобно управлять графикой и он не нарушает работу других скриптов.
Большое спасибо! Все отлично работает! На одну проблему стало меньше)
Здравствуйте!
Я так и не понял, можно ли с помощью этой функции сделать произвольный размер. Воспользовался функцией add_image_size, но он все равно подбирает ближайший размер. Можно ли сделать так, чтоб размер картинки пиксель в пиксель соответствовал указанному?
Евгений, используйте кадрирование. Для этого добавьте true в функцию сразу после указания размера. При этом стоит отметить, что размеры генерируются только при загрузке новых изображений. Для генерации миниатюр для уже загруженных файлов, используйте плагин Regenerate Thumbnails.
Благодаря вашей статье я наконец то решил свою большую проблему и смог разобраться как изменять размер миниатюры на своем сайте. Очень полезная статья. Спасибо вам большое)