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

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

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

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

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

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

Рассмотрим простой пример шорткода для создания кнопки с динамическими атрибутами цвета и размера. Добавим функцию с префиксом wpmentor_ для уникальности:

function wpmentor_button_shortcode($atts, $content = null) {
    // Определяем атрибуты по умолчанию
    $atts = shortcode_atts(
        array(
            'color' => 'blue',
            'size' => 'medium',
            'url' => '#'
        ), $atts, 'wpmentor_button'
    );

    // Создаем класс кнопки в зависимости от атрибутов
    $class = 'wpmentor-btn wpmentor-btn-' . esc_attr($atts['color']) . ' wpmentor-btn-' . esc_attr($atts['size']);

    // Формируем HTML кнопки
    $html = '<a href="' . esc_url($atts['url']) . '" class="' . $class . '">';
    $html .= $content ? $content : 'Кнопка';
    $html .= '</a>';

    return $html;
}
add_shortcode('wpmentor_button', 'wpmentor_button_shortcode');

В этом примере мы задаем три атрибута: color, size и url. Если при вызове шорткода не передаются параметры, используются значения по умолчанию.

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

[wpmentor_button color="red" size="large" url="https://wpmentor.ru"]Нажми меня[/wpmentor_button]

Это создаст кнопку красного цвета большого размера, ведущую на сайт wpmentor.ru.

Как добавить валидацию и обработку ошибок для атрибутов

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

function wpmentor_validate_attrs($atts) {
    $valid_colors = array('blue', 'red', 'green', 'black');
    $valid_sizes = array('small', 'medium', 'large');

    if (!in_array($atts['color'], $valid_colors)) {
        $atts['color'] = 'blue';
    }
    if (!in_array($atts['size'], $valid_sizes)) {
        $atts['size'] = 'medium';
    }

    return $atts;
}

function wpmentor_button_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'color' => 'blue',
            'size' => 'medium',
            'url' => '#'
        ), $atts, 'wpmentor_button'
    );

    $atts = wpmentor_validate_attrs($atts);

    $class = 'wpmentor-btn wpmentor-btn-' . esc_attr($atts['color']) . ' wpmentor-btn-' . esc_attr($atts['size']);
    $html = '<a href="' . esc_url($atts['url']) . '" class="' . $class . '">';
    $html .= $content ? $content : 'Кнопка';
    $html .= '</a>';

    return $html;
}
add_shortcode('wpmentor_button', 'wpmentor_button_shortcode');

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

Как подключить стили для шорткода с динамическими атрибутами

Чтобы кнопка отображалась красиво, добавим стили, которые будут менять цвет и размер в зависимости от классов:

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

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

.wpmentor-btn {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
}
.wpmentor-btn-blue { background-color: #0073aa; }
.wpmentor-btn-red { background-color: #d54e21; }
.wpmentor-btn-green { background-color: #46b450; }
.wpmentor-btn-black { background-color: #000; }
.wpmentor-btn-small { font-size: 12px; padding: 6px 12px; }
.wpmentor-btn-medium { font-size: 16px; padding: 10px 20px; }
.wpmentor-btn-large { font-size: 20px; padding: 14px 28px; }

Примеры расширения и практические советы

1. Добавление новых атрибутов: можно добавить target для открытия ссылки в новой вкладке, rel для SEO и безопасности.

2. Использование кастомных шорткодов в темах: подключайте шорткоды через файл functions.php или создавайте отдельный плагин для удобства поддержки.

3. Кэширование результата: если шорткод генерирует сложный контент, можно кэшировать HTML в transient для ускорения загрузки.

4. Совместимость с WPShop: если вы используете темы Root или плагин Clearfy Pro от WPShop, подключайте их инструменты для оптимизации и безопасности шорткода.

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

function wpmentor_button_shortcode_extended($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'color' => 'blue',
            'size' => 'medium',
            'url' => '#',
            'target' => '_self',
            'rel' => ''
        ), $atts, 'wpmentor_button'
    );

    $atts = wpmentor_validate_attrs($atts);

    $target = in_array($atts['target'], array('_self', '_blank')) ? $atts['target'] : '_self';
    $rel = sanitize_text_field($atts['rel']);

    $class = 'wpmentor-btn wpmentor-btn-' . esc_attr($atts['color']) . ' wpmentor-btn-' . esc_attr($atts['size']);

    $html = '<a href="' . esc_url($atts['url']) . '" class="' . $class . '" target="' . $target . '" rel="' . esc_attr($rel) . '">';
    $html .= $content ? esc_html($content) : 'Кнопка';
    $html .= '</a>';

    return $html;
}
add_shortcode('wpmentor_button', 'wpmentor_button_shortcode_extended');

Заключение

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

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

Подробнее о плагинах и темах от WPShop, которые могут помочь в оптимизации и развитии вашего сайта, смотрите на wpshop.ru.