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

Автор: Олеся Игнатьева | Опубликовано: 20.02.2026

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

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

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

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

Пример простого шорткода без атрибутов

function wpchecker_simple_shortcode() {
    return '<strong>Привет, мир!</strong>';
}
add_shortcode('wpchecker_hello', 'wpchecker_simple_shortcode');

Вызов [wpchecker_hello] выведет жирный текст. Но без атрибутов такой шорткод не гибкий.

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

Для обработки атрибутов в функции шорткода используется функция shortcode_atts(). Она позволяет задать значения по умолчанию и объединить их с переданными значениями.

Рассмотрим пример шорткода [wpchecker_box color="цвет" width="ширина"]текст[/wpchecker_box], который выводит цветной блок с указанной шириной и текстом внутри.

function wpchecker_box_shortcode($atts, $content = null) {
    // Определяем атрибуты и их значения по умолчанию
    $atts = shortcode_atts(array(
        'color' => 'lightblue',
        'width' => '300px'
    ), $atts, 'wpchecker_box');

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

    // Экранируем контент, разрешая базовый HTML
    $content = wp_kses_post($content);

    // Формируем HTML блока
    $html = "<div style=\"background-color: {$color}; width: {$width}; padding: 15px; border-radius: 5px;\">" . $content . "</div>";

    return $html;
}
add_shortcode('wpchecker_box', 'wpchecker_box_shortcode');

Такой шорткод позволяет использоваться так:

[wpchecker_box color="#f0c" width="400px"]Текст внутри цветного блока[/wpchecker_box]

Результат — стилизованный блок с заданными цветом и шириной.

Обработка ошибок и валидация атрибутов

Важно валидировать и фильтровать входящие значения атрибутов. Например, убедиться, что width содержит допустимые единицы измерения.

Пример валидации ширины:

function wpchecker_validate_width($width) {
    if (preg_match('/^\d+(px|em|rem|%)$/', $width)) {
        return $width;
    }
    return '300px'; // значение по умолчанию
}

Далее в основном шорткоде заменяем $width = esc_attr($atts['width']); на $width = wpchecker_validate_width($atts['width']);.

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

После регистрации шорткода его можно использовать в классическом редакторе, Gutenberg, а также в виджетах с поддержкой шорткодов.

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

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

Shortcodes Ultimate — коллекция готовых шорткодов с удобным интерфейсом.
WPBakery Page Builder и Elementor — позволяют вставлять и настраивать шорткоды в визуальном редакторе.
My Popup от WPSHOP — поддерживает добавление пользовательских шорткодов для вывода всплывающих окон.

Расширение функционала: шорткод с AJAX

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

Пример базовой реализации AJAX-запроса для шорткода:

function wpchecker_ajax_comments_shortcode() {
    wp_enqueue_script('wpchecker-ajax-script', get_template_directory_uri() . '/js/wpchecker-ajax.js', array('jquery'), null, true);
    wp_localize_script('wpchecker-ajax-script', 'wpchecker_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
    return '<div id="wpchecker-comments"><button id="load-comments">Загрузить комментарии</button><div id="comments-list"></div></div>';
}
add_shortcode('wpchecker_ajax_comments', 'wpchecker_ajax_comments_shortcode');

function wpchecker_load_comments() {
    $comments = get_comments(array('number' => 5, 'status' => 'approve'));
    $output = '';
    foreach ($comments as $comment) {
        $output .= '<p><strong>' . esc_html($comment->comment_author) . '</strong>: ' . esc_html($comment->comment_content) . '</p>';
    }
    echo $output;
    wp_die();
}
add_action('wp_ajax_wpchecker_load_comments', 'wpchecker_load_comments');
add_action('wp_ajax_nopriv_wpchecker_load_comments', 'wpchecker_load_comments');

JavaScript (файл wpchecker-ajax.js):

jQuery(document).ready(function($) {
    $('#load-comments').on('click', function() {
        $.ajax({
            url: wpchecker_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'wpchecker_load_comments'
            },
            success: function(response) {
                $('#comments-list').html(response);
            },
            error: function() {
                alert('Ошибка загрузки комментариев');
            }
        });
    });
});

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

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

Для удобной работы с отзывами и рейтингами, можно рассмотреть плагин Expert Review от WPSHOP, который поддерживает вывод через шорткоды с настройками через атрибуты.