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

Автор: Екатерина Николаева | Опубликовано: 13.11.2025

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

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

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

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

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

Для начала нужно создать функцию, которая будет возвращать HTML-код для вставки, и зарегистрировать ее как обработчик шорткода. Пример базового шорткода:

function wpacademy_simple_shortcode() {
    return '<div style="padding:10px; background:#e3f2fd; border:1px solid #90caf9;">Это простой шорткод от WP Academy</div>';
}
add_shortcode('wpacademy_simple', 'wpacademy_simple_shortcode');

Теперь, если в редакторе вставить [wpacademy_simple], на сайте выведется стилизованный блок с текстом. Обратите внимание, что функция должна возвращать строку, а не выводить напрямую.

Добавление параметров к шорткоду: гибкость и настройка

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

Пример шорткода с параметрами:

function wpacademy_colored_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'color' => '#c8e6c9',
            'title' => 'Заголовок',
        ), $atts, 'wpacademy_box');

    $output = '<div style="border: 2px solid ' . esc_attr($atts['color']) . '; padding: 15px; background: ' . esc_attr($atts['color']) . ';">';
    $output .= '<strong>' . esc_html($atts['title']) . '</strong><br>';
    $output .= do_shortcode($content);
    $output .= '</div>';
    return $output;
}
add_shortcode('wpacademy_box', 'wpacademy_colored_box_shortcode');

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

[wpacademy_box color="#ffccbc" title="Важное сообщение"]Текст внутри цветного блока[/wpacademy_box]

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

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

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

В предыдущем примере это уже реализовано: do_shortcode($content) внутри возвращаемой строки позволяет использовать внутри [wpacademy_box] другие шорткоды, например, [gallery] или любые кастомные.

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

Практические примеры шорткодов для сайта

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

Шорткод кнопки с кастомным URL и стилем

function wpacademy_button_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => '#',
        'text' => 'Нажми меня',
        'color' => '#1976d2'
    ), $atts, 'wpacademy_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:5px;">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpacademy_button', 'wpacademy_button_shortcode');

Использование:

[wpacademy_button url="https://wpacademy.ru" text="Перейти на WP Academy" color="#388e3c"]

Шорткод отображения текущей даты в нужном формате

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

    return date_i18n($atts['format']);
}
add_shortcode('wpacademy_date', 'wpacademy_current_date_shortcode');

Использование:

[wpacademy_date format="j F Y"]

Выведет, например, "5 июня 2024".

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

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

Shortcodes Ultimate — набор готовых шорткодов с визуальным редактором.
Custom Content Shortcode — позволяет создавать свои шорткоды через админку без кода.
Insert PHP — для вставки PHP-кода в записи через шорткоды.

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

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