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

Автор: Сергей Савельев | Опубликовано: 16.04.2026

Динамические изображения — это изображения, которые генерируются или модифицируются на лету в зависимости от параметров пользователя, даты, настроек и других условий. В WordPress это можно реализовать без плагинов, используя встроенные возможности PHP и WordPress API. Сегодня мы подробно рассмотрим, как создать динамические изображения, когда и зачем это нужно, а также приведём практические примеры с кодом.

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

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

Генерация водяных знаков на изображениях.
Создание баннеров с динамическим текстом (например, дата, имя пользователя).
Кастомизация изображений в зависимости от параметров URL.
Автоматическое создание превью с дополнительной информацией.

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

Как реализовать динамические изображения в WordPress: базовые принципы

Для генерации динамического изображения нам понадобится PHP-библиотека GD или ImageMagick (чаще GD, так как она встроена во многие серверы). В WordPress мы можем создать отдельный PHP-скрипт, который будет выводить изображение с нужными параметрами, а для удобства подключать его через rewrite rules или использовать AJAX.

Основные шаги:

Создать PHP-файл с генерацией изображения.
Обработать входные параметры (GET, POST или WP Query vars).
Сформировать изображение с помощью GD.
Установить правильные заголовки (content-type).
Вывести изображение в браузер.

Рассмотрим пример кода.

Пример простого динамического изображения: баннер с текстом

function wpwp_generate_dynamic_image() {
    // Параметры изображения
    $width = 600;
    $height = 200;
    $text = isset($_GET['text']) ? sanitize_text_field($_GET['text']) : 'Пример текста';

    // Создаём пустое изображение
    $im = imagecreatetruecolor($width, $height);

    // Цвета
    $bg_color = imagecolorallocate($im, 50, 50, 50); // тёмно-серый фон
    $text_color = imagecolorallocate($im, 255, 255, 255); // белый текст

    // Заливаем фон
    imagefilledrectangle($im, 0, 0, $width, $height, $bg_color);

    // Путь к шрифту (нужно загрузить ttf файл в папку темы или плагина)
    $font_path = get_template_directory() . '/fonts/Roboto-Regular.ttf';

    // Добавляем текст по центру
    $font_size = 20;
    $bbox = imagettfbbox($font_size, 0, $font_path, $text);
    $text_width = $bbox[2] - $bbox[0];
    $text_height = $bbox[7] - $bbox[1];
    $x = ($width - $text_width) / 2;
    $y = ($height - $text_height) / 2 - $bbox[7];

    imagettftext($im, $font_size, 0, $x, $y, $text_color, $font_path, $text);

    // Заголовки
    header('Content-Type: image/png');
    imagepng($im);
    imagedestroy($im);
    exit;
}

// Обработчик запроса
if (isset($_GET['dynamic_image'])) {
    wpwp_generate_dynamic_image();
}

Данный код можно разместить в файле functions.php или в отдельном плагине. Для вызова достаточно перейти по URL https://site.ru/?dynamic_image=1&text=Ваш+текст. Сервер сгенерирует изображение с указанным текстом.

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

Чтобы использовать динамические изображения в публикациях или шаблонах, достаточно формировать URL с параметрами. Например:

<img src="https://site.ru/?dynamic_image=1&text=Привет+мир" alt="Динамический баннер" />

Также можно создать шорткод для удобного вставления в контент:

function wpwp_dynamic_image_shortcode($atts) {
    $atts = shortcode_atts(array('text' => 'Динамический текст'), $atts);
    $url = add_query_arg(array('dynamic_image' => 1, 'text' => urlencode($atts['text'])), home_url('/'));
    return '<img src="' . esc_url($url) . '" alt="' . esc_attr($atts['text']) . '" />';
}
add_shortcode('dynamic_image', 'wpwp_dynamic_image_shortcode');

Теперь в редакторе можно писать [dynamic_image text="Текст для баннера"], и будет выводиться динамическое изображение.

Расширенные возможности: добавление водяных знаков и фильтров

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

function wpwp_generate_image_with_watermark($image_path, $watermark_path) {
    $image = imagecreatefromjpeg($image_path);
    $watermark = imagecreatefrompng($watermark_path);

    // Получаем размеры
    $image_w = imagesx($image);
    $image_h = imagesy($image);
    $watermark_w = imagesx($watermark);
    $watermark_h = imagesy($watermark);

    // Размещение водяного знака в правом нижнем углу с отступом 10px
    $dst_x = $image_w - $watermark_w - 10;
    $dst_y = $image_h - $watermark_h - 10;

    // Накладываем водяной знак с прозрачностью
    imagecopy($image, $watermark, $dst_x, $dst_y, 0, 0, $watermark_w, $watermark_h);

    // Выводим изображение
    header('Content-Type: image/jpeg');
    imagejpeg($image);

    // Освобождаем память
    imagedestroy($image);
    imagedestroy($watermark);
    exit;
}

// Пример вызова
if (isset($_GET['watermark'])) {
    $image_path = ABSPATH . 'wp-content/uploads/2023/06/photo.jpg';
    $watermark_path = get_template_directory() . '/images/watermark.png';
    wpwp_generate_image_with_watermark($image_path, $watermark_path);
}

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

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

Хотя мы сегодня говорим о реализации без плагинов, иногда удобнее использовать готовые решения. Например:

Clearfy Pro — расширенные возможности оптимизации и управления изображениями.
WPStories — для динамических визуальных историй с поддержкой изображений.

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

Оптимизация и безопасность динамических изображений

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

Кэширование: Генерируемые изображения лучше кэшировать на уровне сервера или CDN, чтобы снизить нагрузку.
Валидация входных данных: Всегда фильтруйте и проверяйте параметры запроса, чтобы избежать XSS и других атак.
Ограничение ресурсов: Устанавливайте лимиты по времени выполнения скриптов, размеру изображений и памяти.
Логирование ошибок: Для отладки полезно вести логи генерации.

Например, можно добавить заголовки для кэширования:

header('Cache-Control: max-age=86400, public'); // Кэшировать на сутки

Это позволит браузерам и прокси хранить изображения, не запрашивая их повторно.

Итоги и рекомендации

Динамические изображения — мощный инструмент для создания уникального визуального контента в WordPress без плагинов. Используйте PHP GD для генерации, создавайте шорткоды и интегрируйте их в темы и посты. Не забывайте про оптимизацию и безопасность.

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