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

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

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

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

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

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

Регистрация шорткода с параметрами в WordPress

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

function wpelement_dynamic_shortcode($atts, $content = null) {
    // Задаем значения параметров по умолчанию
    $atts = shortcode_atts(
        array(
            'color' => 'black',
            'size' => 'medium',
        ), $atts, 'wpelement_box'
    );

    // Выбираем CSS класс по размеру
    switch ($atts['size']) {
        case 'small':
            $size_class = 'wpelement-box-small';
            break;
        case 'large':
            $size_class = 'wpelement-box-large';
            break;
        default:
            $size_class = 'wpelement-box-medium';
    }

    // Формируем HTML выдачу
    $output = '<div class="wpelement-box ' . esc_attr($size_class) . '" style="color:' . esc_attr($atts['color']) . ';">';
    $output .= do_shortcode($content);
    $output .= '</div>';

    return $output;
}
add_shortcode('wpelement_box', 'wpelement_dynamic_shortcode');

Этот код создает шорткод [wpelement_box], который принимает параметры color и size. Внутри шорткода можно писать текст или другой контент.

Добавление CSS для стилизации шорткода

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

.wpelement-box { 
    padding: 15px;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin: 10px 0;
}
.wpelement-box-small { font-size: 12px; }
.wpelement-box-medium { font-size: 16px; }
.wpelement-box-large { font-size: 22px; }

Если хотите подключить стили через PHP, используйте хук wp_enqueue_scripts:

function wpelement_enqueue_styles() {
    wp_add_inline_style('wp-block-library', ".wpelement-box { padding: 15px; border: 2px solid #ccc; border-radius: 5px; margin: 10px 0; }
    .wpelement-box-small { font-size: 12px; }
    .wpelement-box-medium { font-size: 16px; }
    .wpelement-box-large { font-size: 22px; }");
}
add_action('wp_enqueue_scripts', 'wpelement_enqueue_styles');

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

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

• [wpelement_box color="red" size="large"]Важное сообщение![/wpelement_box] — красный большой блок с текстом.
• [wpelement_box color="#0073aa" size="small"]Маленький блок с синим цветом.[/wpelement_box] — маленький синий блок.
• [wpelement_box]Стандартный блок с черным цветом и средним размером.[/wpelement_box] — блок по умолчанию.

Такой подход позволяет легко создавать разнообразные визуальные элементы без дублирования кода и без необходимости писать CSS для каждого блока вручную.

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

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

Кроме того, можно добавить фильтры для изменения параметров перед выводом. Например:

function wpelement_filter_shortcode_atts($out, $pairs, $atts, $shortcode) {
    if ($shortcode === 'wpelement_box' && empty($atts['color'])) {
        $out['color'] = 'green'; // По умолчанию зеленый, если цвет не указан
    }
    return $out;
}
add_filter('shortcode_atts_wpelement_box', 'wpelement_filter_shortcode_atts', 10, 4);

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

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

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

• Shortcodes Ultimate — большой набор готовых шорткодов с настройками.
• WPGPT — плагин с ИИ-интеграцией для генерации шорткодов и контента на основе GPT.
• Clearfy Pro — для оптимизации и управления функционалом шорткодов.

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

Заключение

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