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

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

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

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

Например, стандартный шорткод [gallery] выводит галерею изображений, а [audio] — аудиоплеер. Но что делать, если вы хотите добавить собственный функционал? В этом случае нужно создавать свои шорткоды, которые будут выполнять именно ту задачу, которая вам нужна.

Далее разберёмся, как это сделать с помощью возможностей WordPress, и приведём практические примеры.

Создание простого шорткода: базовый синтаксис и регистрация

Чтобы создать шорткод, нужно написать функцию, которая возвращает или выводит HTML-код или любой другой контент, а затем зарегистрировать её с помощью функции add_shortcode().

Пример простой функции и регистрации шорткода:

function wpwebsite_hello_shortcode() {
    return '<p>Привет, это мой первый шорткод!</p>';
}
add_shortcode('hello', 'wpwebsite_hello_shortcode');

Теперь, если в редакторе записей вставить [hello], на сайте появится строка «Привет, это мой первый шорткод!».

Обратите внимание, что функция называется с префиксом wpwebsite_, чтобы избежать конфликтов с другими плагинами или темами.

Шорткод с параметрами: как передавать аргументы в функцию

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

Пример шорткода, который принимает параметр color и выводит цветной текст:

function wpwebsite_color_text_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array('color' => 'black'),
        $atts,
        'colortext'
    );
    return '<span style="color:' . esc_attr($atts['color']) . '">' . do_shortcode($content) . '</span>';
}
add_shortcode('colortext', 'wpwebsite_color_text_shortcode');

Использовать такой шорткод можно так: [colortext color="red"]Важный текст[/colortext]. В результате текст внутри тега будет красного цвета.

Обратите внимание на использование функции shortcode_atts() для установки значений по умолчанию, а также на экранирование атрибутов через esc_attr() для безопасности.

Шорткод с использованием данных из базы данных и WP_Query

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

function wpwebsite_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array('count' => 3), $atts, 'recentposts');

    $query = new WP_Query(array(
        'posts_per_page' => intval($atts['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('recentposts', 'wpwebsite_recent_posts_shortcode');

Пример использования: [recentposts count="5"] выведет 5 последних записей. Такой шорткод полезен для вставки блока новостей или блог-поста на любую страницу.

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

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

Рассмотрим пример шорткода [box][/box], который оборачивает контент в стилизованный блок с возможностью указать цвет фона:

function wpwebsite_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array('bgcolor' => '#f0f0f0'), $atts, 'box');
    $content = do_shortcode($content); // Обработка вложенных шорткодов
    return '<div style="background-color:' . esc_attr($atts['bgcolor']) . '; padding:15px; border-radius:5px;">' . $content . '</div>';
}
add_shortcode('box', 'wpwebsite_box_shortcode');

Использование: [box bgcolor="#dff0d8"]Текст внутри цветного блока[/box]. Это позволяет создавать визуально выделенные участки без изменения темы.

Советы по безопасности и оптимизации шорткодов

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

Всегда экранируйте входящие данные, особенно если используете атрибуты, через esc_attr() или esc_html().
Используйте wp_reset_postdata() после запросов WP_Query, чтобы не нарушать глобальный цикл WordPress.
Минимизируйте количество запросов к базе данных внутри шорткодов для оптимальной скорости.
Если шорткод может выводить HTML, проверяйте и фильтруйте содержимое, чтобы избежать XSS-уязвимостей.

Следуя этим рекомендациям, вы создадите надёжные и удобные для использования шорткоды.

Выводы и практическое применение

Шорткоды — мощный инструмент для расширения функциональности WordPress без изменения кода темы. Создавая свои шорткоды, вы можете:

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

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