Миниатюры WordPress — подключение, настройка, добавление и изменение размеров, а также использование в шаблоне

Logo

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

Миниатюры Wordpress - подключение, настройка, добавление и изменение размеров, а также использование в шаблоне

Добавление поддержки миниатюр в WordPress

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

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}

После этого при создании страницы в правой колонке появится новый блок «Миниатюра записи».

Блок WordPress - Миниатюра записи

Чтобы задать миниатюру для записи, достаточно нажать на ссылку и выбрать нужное изображение, после чего нажать «Задать миниатюру». При этом вы можете выбирать изображение как с общей библиотеки файлов, так и загрузить отдельно, используя стандартный загрузчик.

Выбор изображения для создания миниатюры

После добавления миниатюры, в соответствующем блоке отобразится выбранное вами изображение.

Блок с миниатюрой

Если же блок добавления миниатюр не появился  на странице добавления/редактирования записи, то зайдите в пункт «Настройки экрана» в правом верхнем углу рядом с кнопкой «Помощь» и отметьте чекбокс «Миниатюра записи».

Меню настроек экрана

Если и это не помогло – проверяйте корректность добавления функции активации миниатюр.

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

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

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 6

  • Денис

    Здравствуйте. На второй картинке этой записи (как задать миниатюру), изображен стандартный загрузчик, который очень неудобный. Пробовал его видоизменить с помощью плагина WordPress Uploaded Files Cleaner. Получилось, однако пропала возможность передвигать виджеты и ряд других функций. Помогите, плиз.

  • Дмитрий

    Здравствуйте, Денис. Попробуйте использовать плагин Faster Image Insert. С его помощью очень удобно управлять графикой и он не нарушает работу других скриптов.

  • Денис

    Большое спасибо! Все отлично работает! На одну проблему стало меньше)

  • Евгений

    Здравствуйте!

    Я так и не понял, можно ли с помощью этой функции сделать произвольный размер. Воспользовался функцией add_image_size, но он все равно подбирает ближайший размер. Можно ли сделать так, чтоб размер картинки пиксель в пиксель соответствовал указанному?

  • Дмитрий

    Евгений, используйте кадрирование. Для этого добавьте true в функцию сразу после указания размера. При этом стоит отметить, что размеры генерируются только при загрузке новых изображений. Для генерации миниатюр для уже загруженных файлов, используйте плагин Regenerate Thumbnails.

  • Дмитрий

    Благодаря вашей статье я наконец то решил свою большую проблему и смог разобраться как изменять размер миниатюры на своем сайте. Очень полезная статья. Спасибо вам большое)

Оставить комментарий

отменить ответ