Как добавить динамические параметры в шорткод WordPress

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

Что такое динамические параметры в шорткодах WordPress?

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

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

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

Для примера создадим шорткод [wpfactory_alert], который выводит блок с сообщением и цветом, задаваемыми через параметры.

Шаг 1. Регистрация шорткода

Чтобы зарегистрировать шорткод, используем функцию add_shortcode(). Сам код функции обработчика напишем с приставкой wpfactory_ для уникальности и удобства поддержки:

function wpfactory_alert_shortcode($atts, $content = null) {
    // Устанавливаем значения параметров по умолчанию
    $atts = shortcode_atts(
        array(
            'type' => 'info', // тип уведомления: info, success, warning, error
            'dismissible' => 'no', // можно ли закрыть уведомление
        ), $atts, 'wpfactory_alert'
    );

    // Безопасный вывод содержимого
    $content = wp_kses_post($content);

    // Классы для блока
    $classes = 'wpfactory-alert wpfactory-alert-' . esc_attr($atts['type']);
    if ($atts['dismissible'] === 'yes') {
        $classes .= ' wpfactory-alert-dismissible';
    }

    // Формируем HTML
    $html = '<div class="' . $classes . '">';
    $html .= $content;
    if ($atts['dismissible'] === 'yes') {
        $html .= '<button class="wpfactory-alert-close" onclick="this.parentElement.style.display=\'none\';">×</button>';
    }
    $html .= '</div>';

    return $html;
}
add_shortcode('wpfactory_alert', 'wpfactory_alert_shortcode');

Шаг 2. Использование шорткода с параметрами

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

• [wpfactory_alert type="success"]Операция выполнена успешно![/wpfactory_alert]
• [wpfactory_alert type="error" dismissible="yes"]Произошла ошибка! Закройте это сообщение.[/wpfactory_alert]

В результате вы получите стилизованные блоки уведомлений с разным цветом и кнопкой закрытия, если параметр dismissible установлен в yes.

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

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

В нашем примере мы используем esc_attr() для классов и wp_kses_post() для содержимого. Если вы принимаете параметры, влияющие на URL, HTML или JavaScript, обязательно дополнительно проверяйте их.

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

$allowed_types = array('info', 'success', 'warning', 'error');
$type = in_array($atts['type'], $allowed_types) ? $atts['type'] : 'info';

Расширение функционала: подключение пользовательских стилей и скриптов

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

Пример подключения стилей:

function wpfactory_enqueue_alert_assets() {
    // Проверяем, есть ли в контенте шорткод
    if (is_singular() && has_shortcode(get_post()->post_content, 'wpfactory_alert')) {
        wp_enqueue_style('wpfactory-alert-style', 'https://wpshop.ru/wp-content/plugins/wpfactory/assets/css/alert.css?utm_source=wpfactory.ru&utm_medium=article&utm_campaign=kak-dobavit-dinamicheskie-parametry-v-shortkod-wordpress');
    }
}
add_action('wp_enqueue_scripts', 'wpfactory_enqueue_alert_assets');

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

Пример расширенного шорткода с поддержкой дополнительных параметров

Допустим, хотим добавить параметр icon, который будет выводить иконку перед сообщением. Для этого расширим функцию:

function wpfactory_alert_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'type' => 'info',
            'dismissible' => 'no',
            'icon' => '',
        ), $atts, 'wpfactory_alert'
    );

    $allowed_types = array('info', 'success', 'warning', 'error');
    $type = in_array($atts['type'], $allowed_types) ? $atts['type'] : 'info';
    $dismissible = ($atts['dismissible'] === 'yes');
    $icon_html = '';

    if (!empty($atts['icon'])) {
        $icon_html = '<span class="wpfactory-alert-icon">' . esc_html($atts['icon']) . '</span> ';
    }

    $content = wp_kses_post($content);

    $classes = 'wpfactory-alert wpfactory-alert-' . esc_attr($type);
    if ($dismissible) {
        $classes .= ' wpfactory-alert-dismissible';
    }

    $html = '<div class="' . $classes . '">';
    $html .= $icon_html . $content;
    if ($dismissible) {
        $html .= '<button class="wpfactory-alert-close" onclick="this.parentElement.style.display=\'none\';">×</button>';
    }
    $html .= '</div>';

    return $html;
}
add_shortcode('wpfactory_alert', 'wpfactory_alert_shortcode');

Теперь можно использовать так:

[wpfactory_alert type="warning" icon="⚠" dismissible="yes"]Внимание! Проверьте настройки.[/wpfactory_alert]

Вывод будет сопровождаться иконкой предупреждения и кнопкой закрытия.

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

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

Для классического редактора можно добавить кнопку вставки шорткода с диалогом и динамическими параметрами, что существенно улучшит UX для контент-менеджеров.

Итоговые рекомендации по работе с динамическими параметрами в шорткодах

• Всегда используйте shortcode_atts() для установки дефолтных значений.
• Проверяйте и фильтруйте входящие параметры для безопасности.
• Добавляйте стили и скрипты выборочно, чтобы не замедлять сайт.
• Документируйте параметры шорткода, чтобы пользователи легко понимали возможности.
• При необходимости интегрируйте с плагинами оптимизации и AI для расширения функционала.

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