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

Автор: Константин Титов | Опубликовано: 03.11.2025

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

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

Шорткод — это специальный тег, заключённый в квадратные скобки, который WordPress обрабатывает и заменяет на определённый контент во время вывода страницы или записи. Например, [gallery] — встроенный шорткод для вывода галереи изображений.

Создавая собственные шорткоды, вы можете:

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

Теперь перейдём к практике и создадим свой шорткод.

Создание простого шорткода: пошаговое руководство

Для регистрации шорткода в WordPress используется функция add_shortcode(). Она принимает два параметра: название шорткода и функцию-обработчик, которая возвращает HTML-код для вывода.

Рассмотрим пример простого шорткода, который выводит приветственное сообщение:

function wp8_greeting_shortcode($atts) {
    $attributes = shortcode_atts(array(
        'name' => 'Гость',
    ), $atts);

    return '<p>Привет, ' . esc_html($attributes['name']) . '! Добро пожаловать на наш сайт.</p>';
}
add_shortcode('wp8_greeting', 'wp8_greeting_shortcode');

Разберём, что здесь происходит:

Функция wp8_greeting_shortcode принимает массив атрибутов $atts.
С помощью shortcode_atts задаём значение по умолчанию для атрибута name.
Возвращаем строку с приветствием, где имя пользователя выводится с экранированием esc_html для безопасности.
Регистрируем шорткод с именем wp8_greeting.

Чтобы использовать шорткод, вставьте в редактор WordPress следующий текст:

[wp8_greeting name="Вася"]

Это выведет: «Привет, Вася! Добро пожаловать на наш сайт.»

Добавление параметров и динамического контента в шорткод

Шорткоды становятся по-настоящему мощными, если умеют принимать параметры. Рассмотрим пример шорткода, который выводит список последних записей блога с опциональным количеством:

function wp8_recent_posts_shortcode($atts) {
    $attributes = shortcode_atts(array(
        'count' => 5,
    ), $atts);

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

    if (!$query->have_posts()) {
        return '<p>Нет доступных записей.</p>';
    }

    $output = '<ul>';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('wp8_recent_posts', 'wp8_recent_posts_shortcode');

Этот шорткод позволяет вывести список последних публикаций, например:

[wp8_recent_posts count="3"]

Отобразит три последних поста блога с ссылками.

Подробности реализации

Мы используем класс WP_Query для выборки публикаций. Это даёт гибкость в настройке запроса. Важно не забывать сбрасывать постдаты с помощью wp_reset_postdata(), чтобы не нарушить глобальный цикл WordPress.

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

Расширенные возможности: шорткод с вложенным HTML и CSS

Шорткоды могут возвращать сложный HTML и даже стили. Рассмотрим пример, где шорткод выводит цветной блок с настраиваемым цветом фона и текстом:

function wp8_colored_box_shortcode($atts, $content = null) {
    $attributes = shortcode_atts(array(
        'bgcolor' => '#f0f0f0',
        'color' => '#333333',
    ), $atts);

    $style = 'background-color:' . esc_attr($attributes['bgcolor']) . ';'
           . 'color:' . esc_attr($attributes['color']) . ';'
           . 'padding:15px; border-radius:5px;';

    return '<div style="' . $style . '">' . do_shortcode($content) . '</div>';
}
add_shortcode('wp8_colored_box', 'wp8_colored_box_shortcode');

Использовать можно так:

[wp8_colored_box bgcolor="#cceeff" color="#004466"]Это важное сообщение в цветном блоке.[/wp8_colored_box]

Выведет блок с голубым фоном и тёмно-синим текстом. При этом мы обрабатываем вложенный контент функцией do_shortcode, чтобы внутри блока можно было использовать другие шорткоды.

Практические советы и лучшие практики создания шорткодов

Безопасность и фильтрация данных

Обязательно фильтруйте входные данные и экранируйте вывод. Никогда не выводите пользовательский ввод напрямую. Используйте функции esc_html, esc_attr и другие для защиты от XSS-уязвимостей.

Производительность

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

Совместимость

Давайте шорткодам уникальные имена (например, с префиксом wp8_), чтобы избежать конфликтов с другими плагинами или темами.