Как создать автоматический генератор изображений в WordPress

Автор: Алексей Смирнов | Опубликовано: 07.04.2026

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

Почему автоматический генератор изображений важен для WordPress

Изображения занимают значительную часть весового бюджета страниц и влияют на скорость загрузки сайта. Автоматическое создание изображений нужного размера и формата помогает:

Избежать ручного редактирования и загрузки нескольких версий изображений.
Оптимизировать изображения под разные устройства и разрешения экрана.
Снизить нагрузку на сервер и улучшить SEO-показатели.

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

Основные подходы к генерации изображений в WordPress

Существует несколько способов автоматической генерации и обработки изображений в WordPress:

1. Использование встроенных возможностей WordPress

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

function wpgenerate_add_custom_image_size() {
    add_image_size('wpgenerate-custom-size', 600, 400, true); // Обрезка по центру
}
add_action('after_setup_theme', 'wpgenerate_add_custom_image_size');

После этого вы сможете использовать этот размер в темах и плагинах через the_post_thumbnail('wpgenerate-custom-size') или wp_get_attachment_image_src().

2. Генерация изображений на лету с помощью PHP-библиотек

Если нужно создавать динамические изображения с текстом, водяными знаками или графикой, можно использовать библиотеки GD или Imagick. Например, генерация изображения с текстом:

function wpgenerate_create_dynamic_image($text) {
    $width = 400;
    $height = 200;
    $im = imagecreatetruecolor($width, $height);
    $bg = imagecolorallocate($im, 255, 255, 255);
    $text_color = imagecolorallocate($im, 0, 0, 0);
    imagefilledrectangle($im, 0, 0, $width, $height, $bg);
    $font_path = get_template_directory() . '/fonts/arial.ttf';
    imagettftext($im, 20, 0, 10, 100, $text_color, $font_path, $text);
    header('Content-Type: image/png');
    imagepng($im);
    imagedestroy($im);
}

Такую функцию можно вызывать через отдельный endpoint или шорткод для отображения динамического изображения.

3. Использование плагинов для генерации и оптимизации изображений

Для автоматизации часто применяют плагины. Вот несколько полезных:

Clearfy Pro — содержит функции для оптимизации и автоматической очистки изображений.
OmniVideo — если нужны автоматические превью для видео, которые тоже являются изображениями.
Regenerate Thumbnails — позволяет пересоздавать все размеры изображений, если вы добавите новые размеры через add_image_size().

Как создать свой автоматический генератор изображений при загрузке медиафайла

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

Для этого используем хук wp_generate_attachment_metadata, который запускается после загрузки файла и создания миниатюр.

function wpgenerate_add_watermark_on_upload($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file_path = path_join($upload_dir['basedir'], $metadata['file']);
    $image = wp_get_image_editor($file_path);
    if ( ! is_wp_error($image) ) {
        // Загружаем водяной знак
        $watermark_path = get_template_directory() . '/images/watermark.png';
        $image->load($file_path);
        $image->set_watermark($watermark_path, 'bottomright', 10, 10); // Псевдофункция для примера
        $image->save($file_path);
    }
    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpgenerate_add_watermark_on_upload', 10, 2);

В реальности функции set_watermark нет, но с помощью wp_get_image_editor можно получить объект и применить водяной знак через методы библиотеки GD или Imagick. Вот более точный пример добавления водяного знака с Imagick:

function wpgenerate_add_watermark($file) {
    if ( !class_exists('Imagick') ) return;
    $imagick = new Imagick($file);
    $watermark = new Imagick(get_template_directory() . '/images/watermark.png');
    $imagick->compositeImage($watermark, imagick::COMPOSITE_OVER, $imagick->getImageWidth() - $watermark->getImageWidth() - 10, $imagick->getImageHeight() - $watermark->getImageHeight() - 10);
    $imagick->writeImage($file);
    $imagick->clear();
    $imagick->destroy();
}

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

Как использовать автоматический генератор изображений для кастомных типов постов

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

Например, добавим размер 800x600 для кастомного типа «portfolio» и выведем изображение нужного размера:

function wpgenerate_register_portfolio_image_size() {
    add_image_size('wpgenerate-portfolio', 800, 600, true);
}
add_action('after_setup_theme', 'wpgenerate_register_portfolio_image_size');

function wpgenerate_display_portfolio_thumbnail($post_id) {
    if (has_post_thumbnail($post_id)) {
        echo get_the_post_thumbnail($post_id, 'wpgenerate-portfolio');
    }
}

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

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

Чтобы генератор изображений работал эффективно и не создавал ненужную нагрузку, учитывайте следующие моменты:

Используйте кэширование сгенерированных изображений, чтобы не создавать их заново при каждом запросе.
Применяйте lazy-load для изображений, чтобы уменьшить начальную загрузку страниц.
Оптимизируйте водяные знаки и текст на изображениях, чтобы не ухудшать качество.
Используйте современные форматы изображений WebP, которые поддерживаются WordPress с версии 5.8 и выше. Плагин Clearfy Pro поможет с конвертацией и оптимизацией.

Выводы и дополнительные ресурсы

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

Для быстрой реализации рекомендуем совмещать собственный код с плагинами, например, Clearfy Pro для оптимизации и Regenerate Thumbnails для пересоздания размеров.