Шорткоды WordPress создание: полное руководство от простого к сложному

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

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

Регистрация простого шорткода с помощью add_shortcode

Самый базовый способ создать шорткод — вызвать функцию add_shortcode в файле functions.php вашей темы или в отдельном плагине.

Шаг 1: объявление функции‑обработчика

function my_simple_shortcode() {
    return '<div class="my-box">Привет, мир!</div>';
}

Шаг 2: привязка к тегу

add_shortcode( 'my_box', 'my_simple_shortcode' );

После этого в любом месте контента можно написать [my_box], и WordPress выведет указанную разметку.

Работа с атрибутами шорткода

Часто требуется передать параметры, например цвет или заголовок. WordPress передаёт массив атрибутов в обработчик.

Пример с атрибутами

function my_alert_shortcode( $atts ) {
    $args = shortcode_atts(
        array(
            'type'  => 'info',   // info, warning, error
            'text'  => 'Сообщение по умолчанию',
        ),
        $atts,
        'my_alert'
    );

    return sprintf(
        '<div class="alert %s">%s</div>',
        esc_attr( $args['type'] ),
        esc_html( $args['text'] )
    );
}
add_shortcode( 'my_alert', 'my_alert_shortcode' );

В контенте используем: [my_alert type="warning" text="Внимание!"]. Атрибуты удобно задавать через shortcode_atts, а значения экранировать функциями esc_attr и esc_html для защиты от XSS.

Вложенные шорткоды и работа с их содержимым

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

Определяем шорткод, принимающий контент

function my_wrapper_shortcode( $atts, $content = null ) {
    $args = shortcode_atts( array(
        'class' => 'wrapper',
    ), $atts );

    // Обрабатываем вложенный контент через do_shortcode, чтобы поддержать другие шорткоды
    $inner = do_shortcode( $content );

    return sprintf(
        '<div class="%s">%s</div>',
        esc_attr( $args['class'] ),
        $inner
    );
}
add_shortcode( 'my_wrapper', 'my_wrapper_shortcode' );

Пример использования: [my_wrapper class="highlight"]Текст с [my_alert type="error" text="ошибкой"] внутри[/my_wrapper]. Функция do_shortcode гарантирует, что вложенный шорткод my_alert будет обработан.

Динамическая генерация HTML и безопасность

Шорткоды часто используют данные из базы, API или пользовательского ввода. Важно соблюдать два правила:

• Экранирование вывода (esc_html, esc_attr, wp_kses_post).
• Ограничение доступа к потенциально опасным функциям.

Пример: вывод последних записей

function recent_posts_shortcode( $atts ) {
    $args = shortcode_atts( array(
        'count' => 3,
    ), $atts );

    $query = new WP_Query( array(
        'posts_per_page' => intval( $args['count'] ),
        'post_status'    => 'publish',
    ) );

    if ( ! $query->have_posts() ) {
        return '

Шорткод [recent_posts count="5"] выведет список из пяти последних публикаций. Обратите внимание на esc_url и esc_html — без этого сайт уязвим к XSS‑атакам.

Связанные темы

Если ваш шорткод генерирует стили, подумайте о скорости. Быстрая замена Google Fonts на Bunny Fonts может снизить время загрузки до 3 секунд. А для контроля доступности сайта используйте Uptime мониторинг — так вы быстро узнаете, если шорткод «сломает» страницу.

Отладка и тестирование шорткодов

Во время разработки полезно выводить в лог значения атрибутов. Функция error_log записывает данные в debug.log, если включён WP_DEBUG_LOG. Пример:

function debug_shortcode( $atts ) {
    error_log( 'Debug shortcode attrs: ' . print_r( $atts, true ) );
    return 'Отладка завершена.';
}
add_shortcode( 'debug_me', 'debug_shortcode' );

После добавления [debug_me foo="bar"] проверьте wp-content/debug.log — вы увидите массив атрибутов.

Продвинутые техники: кэширование и AJAX

Если шорткод генерирует тяжёлый запрос (например, к внешнему API), кэшируйте результат через transient API:

function api_data_shortcode() {
    $cached = get_transient( 'api_data' );
    if ( false === $cached ) {
        $response = wp_remote_get( 'https://api.example.com/data' );
        if ( is_wp_error( $response ) ) {
            return '

Для интерактивных шорткодов можно подключить AJAX: регистрируем обработчик через wp_ajax_ и выводим контейнер <div id="my-app"></div>, который заполняет JavaScript.

Связанные материалы

Не забывайте про безопасность: сравните лучшие плагины защиты WordPress 2026 и настройте firewall UFW/iptables для защиты от запросов, которые могут пытаться вызвать ваш шорткод.

Заключение

Шорткоды — мощный инструмент, который позволяет внедрять динамический PHP‑код в контент без лишних усилий. Мы рассмотрели базовый пример, работу с атрибутами, вложенные шорткоды, безопасность и продвинутые техники кэширования. Применяйте полученные знания, экспериментируйте и улучшайте пользовательский опыт вашего сайта.