Как создать уникальный shortcode с атрибутами в WordPress

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

Что такое shortcode и зачем нужны атрибуты

Shortcode — это специальный тег, заключённый в квадратные скобки, например [shortcode], который WordPress заменяет на определённый контент или функциональность. Атрибуты позволяют передавать в shortcode параметры, влияющие на вывод, например [shortcode color="red" size="large"].

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

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

Создание простого shortcode с атрибутами

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

function wpreg_shortcode_button($atts) {
    // Устанавливаем значения атрибутов по умолчанию
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'color' => '#0073aa',
            'url' => '#'
        ),
        $atts,
        'wpreg_button'
    );

    // Экранируем атрибуты для безопасности
    $text = esc_html($atts['text']);
    $color = esc_attr($atts['color']);
    $url = esc_url($atts['url']);

    // Формируем HTML кнопки
    $button = '<a href="'. $url .'" style="display:inline-block;padding:10px 20px;background-color:'. $color .';color:#fff;text-decoration:none;border-radius:4px;">'. $text .'</a>';

    return $button;
}
add_shortcode('wpreg_button', 'wpreg_shortcode_button');

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

[wpreg_button text="Купить" color="#e74c3c" url="https://example.com"]

Он выведет красную кнопку с текстом «Купить», ведущую на указанный URL.

Объяснение кода

Функция wpreg_shortcode_button принимает массив атрибутов, задает значения по умолчанию через shortcode_atts, экранирует данные для безопасности и возвращает HTML. Хук add_shortcode регистрирует этот shortcode.

Расширение shortcode: условный вывод и дополнительные стили

Допустим, нужно добавить параметр target, чтобы открывать ссылку в новом окне, и условно менять класс кнопки. Расширим функцию:

function wpreg_shortcode_button($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'color' => '#0073aa',
            'url' => '#',
            'target' => '_self',
            'class' => ''
        ),
        $atts,
        'wpreg_button'
    );

    $text = esc_html($atts['text']);
    $color = esc_attr($atts['color']);
    $url = esc_url($atts['url']);
    $target = ($atts['target'] === '_blank') ? '_blank' : '_self';
    $class = sanitize_html_class($atts['class']);

    $button = '<a href="'. $url .'" class="wpreg-btn '. $class .'" target="'. $target .'" style="background-color:'. $color .';color:#fff;padding:10px 20px;border-radius:4px;text-decoration:none;display:inline-block;">'. $text .'</a>';

    return $button;
}

При этом рекомендую добавить CSS для класса wpreg-btn в вашу тему или плагин, чтобы стилизовать кнопку централизованно:

.wpreg-btn:hover {
    opacity: 0.85;
}

Использование плагина Clearfy Pro для управления shortcode

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

Обработка ошибок и безопасность shortcode

При создании shortcode важно предусмотреть проверку входящих данных и обработку ошибок. Например, если URL невалидный, можно вывести альтернативный текст или скрыть кнопку.

Также не стоит забывать про экранирование вывода — как мы делали с помощью функций esc_html, esc_attr и esc_url. Это защитит ваш сайт от XSS-атак и других уязвимостей.

Пример обработки ошибки

if (empty($url) || !filter_var($url, FILTER_VALIDATE_URL)) {
    return '<span style="color:red;">Неверный URL</span>';
}

Как отладить и протестировать shortcode

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

error_log(print_r($atts, true));

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

Итоги и рекомендации

Создание собственного shortcode с атрибутами в WordPress — мощный способ расширить функциональность сайта. Главное — грамотно обработать параметры, обеспечить безопасность и продумать адаптивность. Для комплексного управления shortcode и оптимизации рекомендую использовать дополнительные инструменты, например, плагин Clearfy Pro.

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