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

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

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

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

Например, вы можете создать шорткод [wpkey_button color="red" size="large" text="Кнопка"], который будет выводить кнопку с разными цветами, размерами и текстом в зависимости от параметров.

Использование динамических шорткодов позволяет:

• Создавать гибкие компоненты без необходимости писать отдельные шорткоды под каждый вариант.
• Облегчить редактирование и поддержку сайта, централизовав логику вывода.
• Интегрировать сложный функционал с минимальными знаниями HTML и PHP у контент-менеджеров.

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

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

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

function wpkey_shortcode_button($atts) {
    // Устанавливаем значения по умолчанию
    $atts = shortcode_atts(
        array(
            'color' => 'blue',
            'size' => 'medium',
            'text' => 'Нажми меня',
            'url' => '#'
        ), $atts, 'wpkey_button'
    );

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

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

Этот шорткод позволяет использовать в редакторе запись вида:

[wpkey_button color="red" size="large" text="Подробнее" url="https://wpkey.ru"]

И получить на выходе стилизованную кнопку с нужными параметрами.

Добавляем стили для динамических шорткодов

Чтобы кнопка выглядела красиво, добавим CSS-классы. Рекомендуется подключать стили через wp_enqueue_style в functions.php или вашем плагине, чтобы избежать конфликтов.

function wpkey_enqueue_shortcode_styles() {
    wp_enqueue_style('wpkey-shortcodes', 'https://wpkey.ru/wp-content/themes/root/css/wpkey-shortcodes.css', array(), '1.0');
}
add_action('wp_enqueue_scripts', 'wpkey_enqueue_shortcode_styles');

В файле wpkey-shortcodes.css можно прописать такие стили:

.wpkey-btn {
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.wpkey-btn-blue { background-color: #0073aa; }
.wpkey-btn-red { background-color: #d54e21; }
.wpkey-btn-large { font-size: 18px; padding: 14px 28px; }
.wpkey-btn-medium { font-size: 14px; padding: 10px 20px; }

Таким образом, внешний вид кнопок будет управляться через CSS, а функционал — через шорткод.

Расширение функционала: вложенные шорткоды и фильтры

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

function wpkey_shortcode_box($atts, $content = null) {
    $atts = shortcode_atts(array(
        'title' => 'Заголовок блока',
    ), $atts, 'wpkey_box');

    $output = '<div class="wpkey-box">';
    $output .= '<h3>' . esc_html($atts['title']) . '</h3>';
    $output .= do_shortcode($content); // Вложенные шорткоды
    $output .= '</div>';

    return $output;
}
add_shortcode('wpkey_box', 'wpkey_shortcode_box');

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

[wpkey_box title="Полезная информация"]Текст внутри блока, можно использовать HTML и другие шорткоды.[/wpkey_box]

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

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

[wpkey_box title="Акция"] [wpkey_button color="red" text="Купить" url="https://wpkey.ru/shop"] [/wpkey_box]

Полезные плагины для работы с шорткодами

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

• Shortcodes Ultimate — набор готовых шорткодов с визуальным редактором.
• WPGPT от WPShop — позволяет создавать динамический контент с интеграцией AI (https://wpshop.ru/plugins/wpgpt/?utm_source=wpkey.ru&utm_medium=article&utm_campaign=kak-sozdat-dinamicheskie-shortkody-v-wordpress-s-podderzhkoy-parametrov).
• Clearfy Pro — оптимизация и расширение функционала, включая работу с шорткодами.

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

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

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

• Используйте функции esc_html, esc_attr, esc_url для очистки входящих данных и вывода.
• Не выполняйте опасный PHP-код или запросы, основанные на параметрах без проверки.
• Кэшируйте результаты сложных вычислений, чтобы не замедлять сайт.

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