Создать динамические шорткоды в WordPress с поддержкой параметров

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

Что такое динамические шорткоды и зачем они нужны

Динамический шорткод — это шорткод, который принимает параметры и меняет свое поведение в зависимости от них. Например, шорткод [wpqa_button color="red" size="large"] может выводить кнопку с разным цветом и размером. Такой подход облегчает контроль над выводом без дублирования кода и позволяет создавать более универсальные компоненты.

Практическое применение динамических шорткодов:

• Вывод различных вариантов контента (кнопки, блоки, списки) с разным стилем или данными.
• Создание персонализированных элементов, например, формы обратной связи с разными темами.
• Интеграция с внешними API с параметрами запроса.

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

Регистрация шорткода в WordPress происходит через функцию add_shortcode. Для динамического шорткода нужно определить функцию-обработчик, которая принимает параметры и возвращает HTML.

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

function wpqa_dynamic_button_shortcode($atts) {
    // Задаём значения параметров по умолчанию
    $atts = shortcode_atts(array(
        'color' => 'blue',
        'size' => 'medium',
        'text' => 'Нажми меня',
        'url' => '#'
    ), $atts, 'wpqa_button');

    // Формируем CSS классы
    $class = 'wpqa-btn wpqa-btn-' . esc_attr($atts['color']) . ' wpqa-btn-' . esc_attr($atts['size']);

    // Возвращаем HTML кнопки
    return '<a href="' . esc_url($atts['url']) . '" class="' . $class . '">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpqa_button', 'wpqa_dynamic_button_shortcode');

В этом коде мы создали шорткод [wpqa_button], который принимает параметры color, size, text и url. По умолчанию цвет — синий, размер — средний, текст и ссылка задаются тоже по умолчанию.

Использование шорткода

В редакторе WordPress можно вставить:

[wpqa_button color="red" size="large" text="Купить" url="https://example.com"]

Это выведет кнопку красного цвета большого размера с текстом "Купить" и ссылкой.

Добавление стилей и скриптов для шорткода

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

Пример подключения CSS:

function wpqa_enqueue_button_style() {
    // Проверяем, есть ли шорткод на странице
    global $post;
    if (has_shortcode($post->post_content, 'wpqa_button')) {
        wp_enqueue_style('wpqa-button-style', 'https://wpshop.ru/wp-content/plugins/wpqa/button-style.css?utm_source=wpqa.ru&utm_medium=article&utm_campaign=sozdat-dinamicheskie-shortkody-v-wordpress-s-podderzhkoy-parametrov');
    }
}
add_action('wp_enqueue_scripts', 'wpqa_enqueue_button_style');

В файле button-style.css можно определить стили для классов .wpqa-btn, .wpqa-btn-red, .wpqa-btn-large и т.д.

Расширение функционала: обработка вложенного контента и условий

Иногда полезно, чтобы шорткод принимал вложенный контент между тегами, например:

[wpqa_button color="green"]Текст кнопки[/wpqa_button]

Для этого функция шорткода должна принимать второй параметр $content и обрабатывать его:

function wpqa_dynamic_button_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => 'blue',
        'size' => 'medium',
        'url' => '#'
    ), $atts, 'wpqa_button');

    $class = 'wpqa-btn wpqa-btn-' . esc_attr($atts['color']) . ' wpqa-btn-' . esc_attr($atts['size']);

    $text = $content ? do_shortcode($content) : 'Нажми меня';

    return '<a href="' . esc_url($atts['url']) . '" class="' . $class . '">' . esc_html($text) . '</a>';
}

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

Пример с условием

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

function wpqa_dynamic_button_shortcode($atts, $content = null) {
    if (!is_user_logged_in()) {
        return '';// Пусто для гостей
    }
    $atts = shortcode_atts(array(
        'color' => 'blue',
        'size' => 'medium',
        'url' => '#'
    ), $atts, 'wpqa_button');

    $class = 'wpqa-btn wpqa-btn-' . esc_attr($atts['color']) . ' wpqa-btn-' . esc_attr($atts['size']);

    $text = $content ? do_shortcode($content) : 'Нажми меня';

    return '<a href="' . esc_url($atts['url']) . '" class="' . $class . '">' . esc_html($text) . '</a>';
}

Примеры плагинов с расширенными динамическими шорткодами

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

• WPGPT — позволяет создавать шорткоды с динамическим контентом на базе ИИ и параметров.
• Clearfy Pro — расширяет управление шорткодами и оптимизацию вывода.
• Expert Review — шорткоды для отзывов с динамическими параметрами.

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

Советы по написанию динамических шорткодов

• Всегда используйте shortcode_atts для обработки параметров и задавайте разумные значения по умолчанию.
• Обрабатывайте входящие данные через esc_html, esc_url и другие функции безопасности, чтобы избежать XSS-уязвимостей.
• Подключайте стили и скрипты только тогда, когда шорткод реально используется на странице.
• Используйте вложенный контент для гибкости и возможности расширения шорткода.
• Пишите код чисто и комментируйте важные участки для поддержки в будущем.

Заключение

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