Автоматическое создание изображений thumbnail в WordPress: практическое руководство

Автор: Маргарита Волкова | Опубликовано: 18.12.2025

В WordPress для большинства тем и плагинов важна правильная работа с миниатюрами изображений (thumbnail). Они позволяют оптимизировать отображение медиа, ускорить загрузку страниц и улучшить пользовательский опыт. В этой статье мы рассмотрим, как автоматически создавать и настраивать изображения thumbnail в WordPress, используя как встроенные функции, так и плагины. Также приведём примеры кода для расширенной настройки.

Что такое изображения thumbnail и зачем они нужны в WordPress

Изображения thumbnail — это уменьшенные копии оригинальных изображений, которые используются для отображения в списках записей, каруселях, виджетах и других местах сайта. Они позволяют:

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

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

Включение поддержки миниатюр и создание пользовательских размеров изображений

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

function wpnote_add_theme_support() {
    add_theme_support('post-thumbnails'); // Включаем поддержку миниатюр
    // Добавляем пользовательские размеры
    add_image_size('wpnote-thumb-small', 150, 150, true); // Обрезка до 150x150 px
    add_image_size('wpnote-thumb-medium', 300, 200, true); // Обрезка до 300x200 px
}
add_action('after_setup_theme', 'wpnote_add_theme_support');

В этом примере мы добавили два новых размера: wpnote-thumb-small и wpnote-thumb-medium с жёсткой обрезкой. Параметр true означает, что изображение будет обрезано по центру до нужного размера.

После добавления новых размеров при загрузке новых изображений WordPress автоматически создаст миниатюры этих размеров. Чтобы обновить миниатюры для уже загруженных изображений, используйте плагин Regenerate Thumbnails. Этот плагин позволяет массово пересоздать все миниатюры с учётом новых размеров.

Использование созданных размеров в шаблонах

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

if (has_post_thumbnail()) {
    the_post_thumbnail('wpnote-thumb-small');
}

Это выведет миниатюру в размере 150×150 пикселей.

Автоматическое назначение миниатюр для записей без изображений

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

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

function wpnote_set_post_thumbnail_from_first_image($post_id) {
    if (has_post_thumbnail($post_id)) {
        return;
    }
    $post = get_post($post_id);
    if (!$post) {
        return;
    }
    preg_match('/<img.+src=["']([^"']+)["'].*>/i', $post->post_content, $matches);
    if (isset($matches[1])) {
        $image_url = $matches[1];
        $attachment_id = wpnote_get_attachment_id_by_url($image_url);
        if ($attachment_id) {
            set_post_thumbnail($post_id, $attachment_id);
        }
    }
}
add_action('save_post', 'wpnote_set_post_thumbnail_from_first_image');

function wpnote_get_attachment_id_by_url($url) {
    global $wpdb;
    $attachment = $wpdb->get_col($wpdb->prepare(
        "SELECT ID FROM {$wpdb->posts} WHERE guid=%s", $url
    ));
    return $attachment ? $attachment[0] : false;
}

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

Плагины для расширенного управления миниатюрами в WordPress

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

Regenerate Thumbnails — массовое пересоздание миниатюр после изменения размеров или добавления новых форматов.
Simple Image Sizes — удобный интерфейс для управления размерами изображений без редактирования кода.
Dynamic Featured Image — позволяет назначать несколько миниатюр к одной записи.
Auto Featured Image — автоматически ставит миниатюру из первого изображения записи.

Для примера, плагин Clearfy Pro имеет опции оптимизации работы с изображениями и кешем, которые полезны для работы с миниатюрами и повышают производительность сайта.

Оптимизация изображений thumbnail: сжатие и lazy load

Создание миниатюр — только часть задачи. Чтобы ускорить сайт, важно оптимизировать сами изображения:

Используйте плагины для сжатия изображений, например, EWWW Image Optimizer или Smush.
Включайте отложенную загрузку (lazy load) для миниатюр, это снижает время загрузки страниц.
Настраивайте правильные форматы изображений, например WebP, для современных браузеров.

В WordPress 5.5+ lazy load включён по умолчанию через добавление атрибута loading="lazy" у тегов <img>. Вы можете дополнительно управлять этим в коде темы.

Вывод и проверка миниатюр в пользовательских запросах и REST API

Если вы разрабатываете кастомные шаблоны или API, нужно правильно получать URL миниатюр. Например, для пользовательского WP_Query:

$query = new WP_Query(array(
    'post_type' => 'post',
    'posts_per_page' => 10
));
if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        if (has_post_thumbnail()) {
            $thumb_url = get_the_post_thumbnail_url(null, 'wpnote-thumb-medium');
            echo '<img src="' . esc_url($thumb_url) . '" alt="' . get_the_title() . '"/>';
        }
    }
    wp_reset_postdata();
}

Для REST API можно добавить поле с URL миниатюры через фильтр rest_prepare_post:

function wpnote_add_thumbnail_to_rest($data, $post, $context) {
    if (has_post_thumbnail($post->ID)) {
        $thumbnail_id = get_post_thumbnail_id($post->ID);
        $thumbnail = wp_get_attachment_image_src($thumbnail_id, 'wpnote-thumb-medium');
        if ($thumbnail) {
            $data->data['thumbnail_url'] = $thumbnail[0];
        }
    }
    return $data;
}
add_filter('rest_prepare_post', 'wpnote_add_thumbnail_to_rest', 10, 3);

Это позволит клиентским приложениям получать миниатюры прямо из API.

Резюме: практические рекомендации по работе с миниатюрами

Обязательно включайте поддержку миниатюр в теме и добавляйте пользовательские размеры под задачи сайта.
Используйте плагин Regenerate Thumbnails после изменения размеров.
Автоматизируйте назначение миниатюр, если записи загружаются без них.
Оптимизируйте изображения с помощью сжатия и lazy load.
В REST API и кастомных запросах корректно получайте URL миниатюр для отображения.

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