Как создать динамическую картинку из шорткода в WordPress с примером кода

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

Почему стоит использовать динамические картинки в WordPress

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

Примером может быть QR-код со ссылкой, которая зависит от ID пользователя, или график с актуальными показателями, которые берутся из базы данных.

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

Обзор популярных плагинов для генерации динамических изображений

1. QR Code Generator

Плагин генерирует QR-коды на лету, которые можно вставлять через шорткод с параметрами. Это удобно для создания персонализированных QR-ссылок.

2. WP Graphs

Позволяет строить графики и диаграммы на основе данных, вводимых в админке или получаемых из API. Вывод через шорткод.

3. Easy Watermark

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

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

Создаем собственный шорткод для генерации PNG с динамическим текстом

Для примера сделаем шорткод [wp24_dynamic_image text="Ваш текст"], который выведет картинку с указанным текстом.

Для генерации изображения используем библиотеку GD, встроенную в PHP.

Код функции генерации картинки

function wp24_generate_dynamic_image() {
    if (!isset($_GET['wp24_image'])) {
        return;
    }
    $text = sanitize_text_field($_GET['wp24_image']);

    $width = 400;
    $height = 100;

    $image = imagecreatetruecolor($width, $height);
    $bg_color = imagecolorallocate($image, 255, 255, 255);
    $text_color = imagecolorallocate($image, 0, 0, 0);

    imagefilledrectangle($image, 0, 0, $width, $height, $bg_color);

    $font_path = dirname(__FILE__) . '/arial.ttf'; // Путь к шрифту
    $font_size = 20;

    if (file_exists($font_path)) {
        imagettftext($image, $font_size, 0, 10, 50, $text_color, $font_path, $text);
    } else {
        imagestring($image, 5, 10, 40, $text, $text_color);
    }

    header('Content-Type: image/png');
    imagepng($image);
    imagedestroy($image);
    exit;
}
add_action('init', 'wp24_generate_dynamic_image');

Код шорткода для вставки картинки

function wp24_dynamic_image_shortcode($atts) {
    $atts = shortcode_atts(array(
        'text' => 'Привет, WP24'
    ), $atts, 'wp24_dynamic_image');

    $url = add_query_arg('wp24_image', urlencode($atts['text']), home_url('/'));

    return '<img src="' . esc_url($url) . '" alt="Динамическая картинка" />';
}
add_shortcode('wp24_dynamic_image', 'wp24_dynamic_image_shortcode');

Таким образом, при вставке шорткода в пост или страницу, например:

[wp24_dynamic_image text="Тестовая надпись"]

на странице появится картинка с текстом «Тестовая надпись». Картинка формируется динамически при каждом запросе.

Как улучшить и расширить функционал динамической картинки

Добавление цветов и размеров через атрибуты шорткода

Можно добавить параметры для цвета фона, цвета текста, размера шрифта. Допустим, расширим наш шорткод так:

function wp24_dynamic_image_shortcode($atts) {
    $atts = shortcode_atts(array(
        'text' => 'Привет, WP24',
        'bg_color' => 'ffffff',
        'text_color' => '000000',
        'font_size' => 20
    ), $atts, 'wp24_dynamic_image');

    $query_args = array(
        'wp24_image' => $atts['text'],
        'bg_color' => $atts['bg_color'],
        'text_color' => $atts['text_color'],
        'font_size' => $atts['font_size']
    );

    $url = add_query_arg($query_args, home_url('/'));

    return '<img src="' . esc_url($url) . '" alt="Динамическая картинка" />';
}

function wp24_generate_dynamic_image() {
    if (!isset($_GET['wp24_image'])) {
        return;
    }

    $text = sanitize_text_field($_GET['wp24_image']);
    $bg_color = sanitize_hex_color_no_hash($_GET['bg_color'] ?? 'ffffff');
    $text_color = sanitize_hex_color_no_hash($_GET['text_color'] ?? '000000');
    $font_size = intval($_GET['font_size'] ?? 20);

    $width = 400;
    $height = 100;

    $image = imagecreatetruecolor($width, $height);
    $bg_rgb = sscanf($bg_color, "%02x%02x%02x");
    $text_rgb = sscanf($text_color, "%02x%02x%02x");

    $bg = imagecolorallocate($image, $bg_rgb[0], $bg_rgb[1], $bg_rgb[2]);
    $txt_col = imagecolorallocate($image, $text_rgb[0], $text_rgb[1], $text_rgb[2]);

    imagefilledrectangle($image, 0, 0, $width, $height, $bg);

    $font_path = dirname(__FILE__) . '/arial.ttf';

    if (file_exists($font_path)) {
        imagettftext($image, $font_size, 0, 10, 50, $txt_col, $font_path, $text);
    } else {
        imagestring($image, 5, 10, 40, $text, $txt_col);
    }

    header('Content-Type: image/png');
    imagepng($image);
    imagedestroy($image);
    exit;
}
add_action('init', 'wp24_generate_dynamic_image');
add_shortcode('wp24_dynamic_image', 'wp24_dynamic_image_shortcode');

Теперь вы можете задавать цвет фона, цвет текста и размер шрифта прямо в шорткоде, например:

[wp24_dynamic_image text="WP24" bg_color="ffcc00" text_color="003366" font_size="25"]

Кэширование динамических картинок

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

Это повысит скорость загрузки и снизит нагрузку на сервер.

Интеграция с плагинами WPShop для расширения функционала

Если вы используете WPShop, можно дополнительно автоматизировать создание динамических баннеров или QR-кодов для своих продуктов с помощью плагина WPGPT или WPRemark. Они позволяют создавать динамические блоки и отзывы, которые можно визуализировать в виде картинок.

Это поможет создавать более интерактивный и привлекательный контент.

Выводы и советы по безопасности

При работе с динамическими изображениями важно тщательно фильтровать входящие параметры, чтобы избежать XSS-атак или инъекций. В нашем примере мы использовали sanitize_text_field и обработки цветов.

Также убедитесь, что на сервере включена библиотека GD или ImageMagick, иначе код не сможет создавать изображения.

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