Как изменить размер миниатюры записи (featured image) в WordPress

В WordPress миниатюры записей (featured images) играют важную роль в визуальном оформлении сайта. Часто возникает задача изменить размер этих изображений, чтобы они лучше вписывались в дизайн или оптимизировать загрузку страниц. В этой статье подробно разберем, как изменить размер миниатюр записей в WordPress с помощью функций и плагинов, а также рассмотрим практические примеры кода.

Что такое миниатюры записей и почему важно менять их размер

Миниатюра записи — это изображение, назначенное конкретной записи или странице, которое служит ее визуальным представлением. По умолчанию WordPress генерирует несколько размеров изображений при загрузке: thumbnail, medium, large и full size. Однако стандартные размеры не всегда подходят под ваш дизайн, и чтобы избежать искажений или неэффективной загрузки, нужно настраивать свои размеры.

Изменение размеров миниатюр помогает:

• Улучшить внешний вид сайта;
• Оптимизировать скорость загрузки страниц — меньшее изображение грузится быстрее;
• Снизить нагрузку на сервер и трафик;
• Обеспечить адаптивность под разные устройства.

Как добавить и изменить размеры миниатюр в WordPress через functions.php

Для создания нового размера миниатюры нужно использовать функцию add_image_size(). Она позволяет задать имя размера, ширину, высоту и режим обрезки.

Пример добавления собственного размера миниатюры в теме (в файле functions.php):

function wpinc_add_custom_image_size() {
    // Добавляем размер 300x200 пикселей, жесткое обрезание
    add_image_size('wpinc-thumb-300x200', 300, 200, true);
}
add_action('after_setup_theme', 'wpinc_add_custom_image_size');

Параметры функции:

• 'wpinc-thumb-300x200' — уникальное имя размера;
• 300 — ширина в пикселях;
• 200 — высота в пикселях;
• true — жесткое обрезание (crop), иначе масштабирование без обрезки.

После добавления нового размера нужно обновить миниатюры для уже загруженных изображений. Для этого используйте плагин Regenerate Thumbnails. Он пересоздаст все размеры.

Как вывести миниатюру с новым размером в шаблоне

Чтобы использовать созданный размер при выводе миниатюр в шаблонах, в функциях the_post_thumbnail() или get_the_post_thumbnail() указывайте имя размера:

if ( has_post_thumbnail() ) {
    the_post_thumbnail('wpinc-thumb-300x200');
}

Если размер не задан, по умолчанию используется post-thumbnail или thumbnail.

Как изменить размер миниатюры в Gutenberg и блоках WordPress

В редакторе Gutenberg при добавлении блока миниатюры записи можно выбрать размер изображения. Чтобы добавить в список свой размер, нужно зарегистрировать его с помощью add_image_size() и затем добавить в фильтр image_size_names_choose:

function wpinc_custom_sizes_select( $sizes ) {
    return array_merge( $sizes, array(
        'wpinc-thumb-300x200' => __('Миниатюра 300x200')
    ) );
}
add_filter('image_size_names_choose', 'wpinc_custom_sizes_select');

Теперь в блоке миниатюры появится возможность выбирать этот размер.

Примеры плагинов, которые помогают управлять размерами миниатюр

Если вы предпочитаете использовать готовые решения, обратите внимание на следующие плагины:

• Simple Image Sizes — позволяет управлять всеми размерами изображений в админке и быстро менять их параметры без кода.
• Regenerate Thumbnails — пересоздает миниатюры после изменения размеров, обязательный для обновления новых размеров.
• Resize Image After Upload — автоматически изменяет размер изображений при загрузке, что помогает сохранять оптимальные размеры.

Все эти плагины можно найти на wpshop.ru.

Как программно изменить размер миниатюры для конкретной записи

Иногда нужно динамически изменять размер миниатюры для конкретных условий. Для этого можно использовать фильтр post_thumbnail_size или напрямую получить изображение с нужным размером.

Пример функции для вывода миниатюры с измененным размером в зависимости от категории:

function wpinc_dynamic_thumbnail_size($size, $post_id) {
    if ( has_term('special', 'category', $post_id) ) {
        return 'medium'; // для категории special используем medium
    }
    return $size;
}
add_filter('post_thumbnail_size', 'wpinc_dynamic_thumbnail_size', 10, 2);

Или вывод миниатюры с нужным размером вручную:

$thumb_id = get_post_thumbnail_id($post->ID);
$thumb_url = wp_get_attachment_image_url($thumb_id, 'wpinc-thumb-300x200');
echo '<img src="' . esc_url($thumb_url) . '" alt="' . esc_attr(get_the_title()) . '">';

Оптимизация и советы по работе с размерами миниатюр

При работе с миниатюрами важно придерживаться нескольких правил:

• Создавайте только необходимые размеры, чтобы не нагружать сервер лишними копиями;
• Используйте жесткое обрезание, если важна точная композиция изображения;
• Оптимизируйте изображения до загрузки, чтобы уменьшить вес;
• Периодически пересоздавайте миниатюры после изменения размеров с помощью Regenerate Thumbnails;
• Тестируйте отображение на мобильных устройствах, чтобы подобрать оптимальные размеры.

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