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

Автор: Валерия Ширяева | Опубликовано: 17.11.2025

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

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

Шорткод — это короткая текстовая метка в квадратных скобках, например, [wpstock_button], которая при выводе страницы заменяется на определённый контент или выполняет определённое действие. Они удобны тем, что позволяют не копировать и не вставлять сложный HTML или PHP-код, а просто использовать компактный тег.

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

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

Основные преимущества использования шорткодов

Упрощают добавление функционала на страницы и записи
Обеспечивают единообразие вывода элементов
Позволяют избежать повторения кода
Легко редактируются и расширяются

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

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

Например, создадим шорткод [wpstock_hello], который просто выводит приветствие:

function wpstock_hello_shortcode() {
    return '<div style="padding:10px; background:#f0f0f0; border:1px solid #ccc;">Привет, это шорткод от WPStock!</div>';
}
add_shortcode('wpstock_hello', 'wpstock_hello_shortcode');

Этот код нужно добавить в файл functions.php вашей темы или в файл вашего плагина. После этого на любой странице достаточно вставить [wpstock_hello], и вы увидите стилизованное сообщение.

Разбор кода

Функция wpstock_hello_shortcode возвращает строку с HTML, которая будет заменять шорткод. Использовать return вместо echo обязательно, иначе вывод не сработает.

Функция add_shortcode связывает имя шорткода с функцией. Имя шорткода должно быть уникальным, чтобы не было конфликтов.

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

Часто шорткод должен принимать параметры, чтобы быть универсальным. Рассмотрим пример кнопки, где можно задать текст и URL.

function wpstock_button_shortcode($atts) {
    // Значения по умолчанию
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => '#0073aa'
        ), $atts, 'wpstock_button'
    );

    return '<a href="' . esc_url($atts['url']) . '" style="display:inline-block;padding:10px 20px; background:' . esc_attr($atts['color']) . '; color:#fff; text-decoration:none; border-radius:4px;">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpstock_button', 'wpstock_button_shortcode');

Теперь вы можете вставить шорткод:

[wpstock_button text="Купить сейчас" url="https://wpstock.ru/shop" color="#e74c3c"]

И получите красивую кнопку с нужным текстом, ссылкой и цветом.

Объяснение

Функция shortcode_atts() помогает задать параметры по умолчанию и объединить их с теми, что передал пользователь. Это гарантирует, что все параметры всегда будут заданы.

Функции esc_url() и esc_html() используются для безопасности, чтобы избежать XSS-уязвимостей.

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

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

function wpstock_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'count' => 5,
            'category' => ''
        ), $atts, 'wpstock_recent_posts'
    );

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

    if (!empty($atts['category'])) {
        $args['category_name'] = sanitize_text_field($atts['category']);
    }

    $query = new WP_Query($args);

    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('wpstock_recent_posts', 'wpstock_recent_posts_shortcode');

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

[wpstock_recent_posts count="3" category="wordpress"]

Этот шорткод выведет 3 последние записи из категории «wordpress».

Разбор решения

Мы используем класс WP_Query для выборки записей по параметрам. Это гибкий и мощный инструмент для выборки контента.

Важно всегда вызывать wp_reset_postdata() после цикла, чтобы вернуть глобальные переменные WordPress в исходное состояние.

Чтобы избежать ошибок и проблем с безопасностью, мы фильтруем и преобразуем параметры.

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

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

Shortcoder — удобный плагин для создания и управления шорткодами через админку без программирования.
Custom Content Shortcode — позволяет создавать шорткоды с различным контентом и параметрами.
Shortcodes Ultimate — большой набор готовых шорткодов с возможностью кастомизации.

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

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