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

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

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

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

Параметры позволяют передавать данные в шорткод, например, [wpcat_button color="red" size="large"]Нажми меня[/wpcat_button]. Благодаря параметрам можно управлять внешним видом и поведением шорткода без изменения кода.

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

Создание простого шорткода с параметрами — пример для кнопки

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

function wpcat_button_shortcode($atts, $content = null) {
    // Устанавливаем значения параметров по умолчанию
    $atts = shortcode_atts(
        array(
            'color' => 'blue',
            'size' => 'medium'
        ),
        $atts,
        'wpcat_button'
    );

    // Валидация и подготовка параметров
    $color = esc_attr($atts['color']);
    $size = esc_attr($atts['size']);

    // Формируем CSS классы
    $class = 'wpcat-btn wpcat-btn-' . $color . ' wpcat-btn-' . $size;

    // Возвращаем HTML кнопки
    return '<button class="' . $class . '">' . do_shortcode($content) . '</button>';
}
add_shortcode('wpcat_button', 'wpcat_button_shortcode');

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

[wpcat_button color="red" size="large"]Кликни меня[/wpcat_button]

И кнопка выведется с классами wpcat-btn-red и wpcat-btn-large, которые можно стилизовать через CSS.

Стилизация кнопки через CSS

Добавьте следующие стили в ваш файл стилей (style.css):

.wpcat-btn {
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.wpcat-btn-blue { background-color: #0073aa; color: #fff; }
.wpcat-btn-red { background-color: #d63638; color: #fff; }
.wpcat-btn-medium { font-size: 16px; padding: 10px 20px; }
.wpcat-btn-large { font-size: 20px; padding: 14px 28px; }

Таким образом, вы получаете гибкую кнопку, которую легко менять через параметры шорткода.

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

Обратите внимание, что для вывода содержимого шорткода используется функция do_shortcode($content), что позволяет использовать вложенные шорткоды внутри нашего.

Также важно экранировать параметры с помощью esc_attr(), чтобы избежать внедрения вредоносного кода и обеспечить безопасность.

Если нужно добавить ещё параметры, например, URL для ссылки, можно расширить массив параметров и добавить логику для вывода ссылки или других элементов.

Как добавить шорткод в виджеты и шаблоны

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

add_filter('widget_text', 'do_shortcode');

Для вывода шорткода в PHP-шаблонах используйте функцию do_shortcode():

echo do_shortcode('[wpcat_button color="green" size="medium"]Кнопка в шаблоне[/wpcat_button]');

Использование в Gutenberg

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

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

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

Например, подключение CSS только при наличии шорткода на странице:

function wpcat_enqueue_styles() {
    if ( is_singular() && has_shortcode(get_post()->post_content, 'wpcat_button') ) {
        wp_enqueue_style('wpcat-button-style', get_template_directory_uri() . '/css/wpcat-button.css');
    }
}
add_action('wp_enqueue_scripts', 'wpcat_enqueue_styles');

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

Также можно добавлять JS для анимаций кнопок или других интерактивных элементов.

Заключение по созданию шорткодов с параметрами

Создание своих шорткодов с поддержкой параметров — это простой способ расширить функционал вашего WordPress-сайта. Вы можете создавать интерактивные элементы, настраиваемые блоки контента и многое другое без необходимости писать сложный код в каждой записи.

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