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

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

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

Что такое shortcode и зачем он нужен в WordPress

Shortcode — это текст в квадратных скобках, например [gallery], который WordPress автоматически заменяет на определенный функционал или контент. Основное преимущество шорткодов — простота использования и возможность внедрять сложные элементы без необходимости писать HTML или PHP прямо в редакторе.

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

Вставлять повторяющиеся элементы, например, кнопки, формы, галереи;
Добавлять динамический контент, например, данные из базы;
Упрощать редактирование сайта для контент-менеджеров.

Теперь перейдем к практике.

Как создать базовый shortcode в WordPress

Для создания собственного шорткода нужно зарегистрировать его в WordPress и написать функцию, которая будет генерировать вывод. Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

function wpcore_generate_button_shortcode($atts) {
    // Атрибуты по умолчанию
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => 'blue',
        ),
        $atts,
        'wpcore_button'
    );

    // Формируем HTML кнопки
    return '<a href="' . esc_url($atts['url']) . '" style="background-color:' . esc_attr($atts['color']) . '; padding:10px 20px; color:#fff; text-decoration:none; border-radius:4px;">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpcore_button', 'wpcore_generate_button_shortcode');

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

[wpcore_button url="https://wpcore.ru" text="Перейти на WPCore" color="#0073aa"]

И получите стилизованную кнопку со ссылкой. Важно использовать функции esc_url и esc_html для безопасности вывода.

Передача параметров и обработка атрибутов в шорткодах

Передача атрибутов позволяет гибко настраивать поведение шорткода. Рассмотрим более сложный пример с параметрами:

text — текст кнопки;
url — ссылка;
color — цвет фона;
size — размер шрифта.

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

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

function wpcore_generate_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => 'blue',
            'size' => '16px',
        ),
        $atts,
        'wpcore_button'
    );

    $style = sprintf('background-color:%s; font-size:%s; padding:10px 20px; color:#fff; text-decoration:none; border-radius:4px;', esc_attr($atts['color']), esc_attr($atts['size']));

    return '<a href="' . esc_url($atts['url']) . '" style="' . $style . '">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpcore_button', 'wpcore_generate_button_shortcode');

Пример использования:

[wpcore_button url="https://wpcore.ru" text="Перейти" color="#e74c3c" size="20px"]

Такой шорткод создаст красную кнопку с увеличенным шрифтом.

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

Шорткоды могут принимать и вложенный контент — текст или HTML между тегами. Для этого используется второй параметр функции.

Пример шорткода, который оборачивает вложенный контент в стилизованный блок:

function wpcore_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'title' => 'Заголовок',
        'color' => '#3498db',
    ), $atts, 'wpcore_box');

    $output = '<div style="border:2px solid ' . esc_attr($atts['color']) . '; padding:15px; margin:10px 0; border-radius:5px;">';
    $output .= '<h3 style="color:' . esc_attr($atts['color']) . ';">' . esc_html($atts['title']) . '</h3>';
    $output .= do_shortcode($content);
    $output .= '</div>';

    return $output;
}
add_shortcode('wpcore_box', 'wpcore_box_shortcode');

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

[wpcore_box title="Важно" color="#2ecc71"]Это содержимое будет в цветной рамке.[/wpcore_box]

Этот приём полезен для выделения информации или создания блоков с контентом.

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

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

Всегда фильтруйте и экранируйте входящие данные с помощью esc_html, esc_attr, esc_url.
Не выполняйте тяжелые операции в шорткодах, чтобы не замедлять загрузку страниц.
Используйте кэширование, если шорткод выводит данные из внешних источников.
Проверяйте наличие необходимых данных перед выводом, чтобы избежать ошибок.

Заключение

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

Как создать свой shortcode в WordPress