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

Автор: Юлия Полякова | Опубликовано: 31.10.2025

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

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

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

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

Основы создания собственного шорткода в WordPress

Для создания шорткода необходимо зарегистрировать функцию, которая будет возвращать HTML или любой другой контент, и связать её с именем шорткода с помощью функции add_shortcode. Пример самой простой реализации:

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

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

Параметры шорткода — как сделать его гибким

Часто нужно, чтобы шорткод принимал параметры для изменения вывода. Для этого функция получает массив атрибутов. Рассмотрим пример шорткода с параметром color:

function wpbegin_colored_text_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array('color' => 'black'),
        $atts,
        'wpbegin_colored_text'
    );

    return '<span style="color:' . esc_attr($atts['color']) . '">' . do_shortcode($content) . '</span>';
}
add_shortcode('wpbegin_colored_text', 'wpbegin_colored_text_shortcode');

Использование в контенте: [wpbegin_colored_text color="red"]Этот текст будет красным[/wpbegin_colored_text]. Такой подход позволяет создавать универсальные компоненты.

Примеры полезных шорткодов для WordPress

Шорткод для вывода текущей даты

Иногда нужно вставить динамическую дату. Создадим шорткод, который выводит дату в нужном формате:

function wpbegin_current_date_shortcode($atts) {
    $atts = shortcode_atts(array(
        'format' => 'd.m.Y',
    ), $atts, 'wpbegin_current_date');

    return date($atts['format']);
}
add_shortcode('wpbegin_current_date', 'wpbegin_current_date_shortcode');

Пример использования: [wpbegin_current_date format="j F Y"] — выведет дату в формате «15 июня 2024».

Шорткод для создания кнопки с ссылкой

Чтобы быстро добавлять стилизованные кнопки, можно сделать такой шорткод:

function wpbegin_button_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'url' => '#',
        'color' => '#0073aa',
        'target' => '_self',
    ), $atts, 'wpbegin_button');

    $button = '<a href="' . esc_url($atts['url']) . '" target="' . esc_attr($atts['target']) . '" style="display:inline-block;padding:10px 20px;background-color:' . esc_attr($atts['color']) . ';color:#fff;text-decoration:none;border-radius:3px;">' . do_shortcode($content) . '</a>';

    return $button;
}
add_shortcode('wpbegin_button', 'wpbegin_button_shortcode');

Пример использования: [wpbegin_button url="https://wpbegin.ru" color="#e74c3c" target="_blank"]Посетить WPBegin[/wpbegin_button].

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

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

Экранируйте вывод — используйте функции esc_html, esc_attr, esc_url для обработки данных перед выводом.
Обрабатывайте вложенные шорткоды — если внутри шорткода могут быть другие шорткоды, используйте do_shortcode($content).
Избегайте тяжелых запросов — шорткоды выполняются при генерации страницы, поэтому не стоит делать сложные или медленные запросы к базе.

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

function wpbegin_flexible_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'title' => 'Заголовок',
        'class' => 'default-class',
    ), $atts, 'wpbegin_flexible');

    $output = '<div class="' . esc_attr($atts['class']) . '">';
    $output .= '<h3>' . esc_html($atts['title']) . '</h3>';
    $output .= '<div>' . do_shortcode($content) . '</div>';
    $output .= '</div>';

    return $output;
}
add_shortcode('wpbegin_flexible', 'wpbegin_flexible_shortcode');

Такой шорткод можно легко адаптировать под разные задачи и стили.

Плагины для расширения возможностей шорткодов

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

Shortcodes Ultimate — большой набор готовых шорткодов с визуальным редактором.
WP Shortcode by MyThemeShop — простой плагин с базовым набором элементов.
Custom Content Shortcode — позволяет создавать пользовательские шорткоды для контента.

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

Заключение

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

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