Миниатюры 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, созданную при помощи кода, приведенного чуть выше. Аналогичным образом выводятся миниатюры и с другими названиями.

На этом данная статья подошла к концу. Удачи вам и успехов в создании сайтов!