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

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

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

Стандартный шорткод — это тег вида [example], который заменяется на определённый вывод. Динамический шорткод расширяет эту идею, позволяя передавать параметры: [example param="value"]. Благодаря этому можно кастомизировать вывод, создавать универсальные решения и избегать дублирования кода.

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

• Отображение галереи с разным количеством изображений
• Вывод текста с разным стилем или цветом
• Встраивание видео с разными параметрами
• Формы с настраиваемыми полями

Для разработчика динамический шорткод — это возможность сделать удобный инструмент для контент-менеджеров и пользователей сайта.

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

Чтобы создать динамический шорткод, нужно зарегистрировать функцию-обработчик с помощью функции add_shortcode. Рассмотрим пример простого шорткода с параметром color, который изменяет цвет текста:

function wpeditor_dynamic_shortcode($atts, $content = null) {
    // По умолчанию цвет — черный
    $atts = shortcode_atts(
        array('color' => 'black'), 
        $atts, 
        'wpeditor_dynamic'
    );
    
    // Экранируем цвет для безопасности
    $color = esc_attr($atts['color']);
    
    // Если есть контент, выводим с цветом
    if ($content) {
        return '<span style="color:' . $color . '">' . do_shortcode($content) . '</span>';
    }
    return '';
}
add_shortcode('wpeditor_dynamic', 'wpeditor_dynamic_shortcode');

Теперь в контенте можно использовать: [wpeditor_dynamic color="red"]Текст красного цвета[/wpeditor_dynamic]. Важно использовать функцию shortcode_atts для задания значений по умолчанию и обработки параметров.

Обработка нескольких параметров

Динамический шорткод может принимать несколько параметров. Например, добавим параметр font_size:

function wpeditor_dynamic_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'color' => 'black',
            'font_size' => '14px'
        ), 
        $atts, 
        'wpeditor_dynamic'
    );
    $color = esc_attr($atts['color']);
    $font_size = esc_attr($atts['font_size']);
    if ($content) {
        return '<span style="color:' . $color . '; font-size:' . $font_size . ';">' . do_shortcode($content) . '</span>';
    }
    return '';
}
add_shortcode('wpeditor_dynamic', 'wpeditor_dynamic_shortcode');

Пример использования: [wpeditor_dynamic color="blue" font_size="20px"]Синий текст размером 20px[/wpeditor_dynamic].

Пример: динамическая таблица с параметрами

Создадим шорткод, который выводит таблицу с заданным количеством строк и столбцов. Параметры — rows и cols. Это хороший пример для понимания, как работать с параметрами и циклом.

function wpeditor_table_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'rows' => 3,
            'cols' => 3
        ),
        $atts,
        'wpeditor_table'
    );

    $rows = intval($atts['rows']);
    $cols = intval($atts['cols']);

    if ($rows <= 0) $rows = 3;
    if ($cols <= 0) $cols = 3;

    $html = '<table border="1" style="border-collapse: collapse; width: 100%;">';
    for ($r = 1; $r <= $rows; $r++) {
        $html .= '<tr>';
        for ($c = 1; $c <= $cols; $c++) {
            $html .= '<td>Row ' . $r . ' Col ' . $c . '</td>';
        }
        $html .= '</tr>';
    }
    $html .= '</table>';

    return $html;
}
add_shortcode('wpeditor_table', 'wpeditor_table_shortcode');

Использование: [wpeditor_table rows="4" cols="5"] выведет таблицу 4 на 5.

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

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

• Экранирование параметров. Всегда используйте функции типа esc_attr или esc_html для обработки входящих данных, чтобы избежать XSS-уязвимостей.
• Валидация параметров. Проверяйте тип и диапазон значений, особенно если параметры влияют на вывод или логику.
• Использование do_shortcode. Если внутри шорткода может быть вложенный контент с другими шорткодами, обязательно вызывайте do_shortcode($content), чтобы они отработали.
• Кэширование. Если шорткод генерирует ресурсоёмкий вывод, подумайте о кэшировании результата с помощью Transients API или плагинов кеширования.

Использование плагина Clearfy Pro для управления шорткодами

Плагин Clearfy Pro помогает убирать лишний код и оптимизировать работу WordPress, в том числе управлять выводом шорткодов. Например, он позволяет отключать шорткоды в определённых областях сайта, что улучшит производительность и предотвратит ошибки.

Можно комбинировать собственные динамические шорткоды с Clearfy Pro для гибкого контроля и оптимизации.

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

Чтобы добавить шорткод на сайт, поместите код в файл functions.php вашей темы или создайте отдельный плагин. После этого используйте шорткод в любом месте контента, например: [wpeditor_dynamic color="green" font_size="18px"]Текст с параметрами[/wpeditor_dynamic].

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

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