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

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

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

Например, вместо того чтобы вручную вставлять сложный код галереи или формы, вы используете shortcode, который WordPress подставляет автоматически. Это снижает вероятность ошибок и упрощает управление контентом.

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

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

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

Пример простого шорткода, который выводит текущий год:

function wpstuff_current_year_shortcode() {
    return date('Y');
}
add_shortcode('current_year', 'wpstuff_current_year_shortcode');

Теперь в любом редакторе WordPress, если вы напишете [current_year], будет выводиться текущий год.

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

Добавление атрибутов к шорткоду: настройка вывода

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

Разберём пример шорткода для кнопки с настраиваемым текстом и ссылкой:

function wpstuff_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#'
        ), $atts, 'button');

    return '<a href="'. esc_url($atts['url']) .'" class="wpstuff-button">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('button', 'wpstuff_button_shortcode');

Пример использования: [button text="Перейти" url="https://wpstuff.ru"]

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

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

Если нужно вывести более сложный HTML, например, блок с картинкой и текстом, можно написать так:

function wpstuff_profile_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'name' => 'Имя пользователя',
            'avatar' => 'https://wpstuff.ru/avatar.png',
            'description' => 'Описание профиля'
        ), $atts, 'profile');

    $html = '<div class="wpstuff-profile">';
    $html .= '<img src="'. esc_url($atts['avatar']) .'" alt="'. esc_attr($atts['name']) .'" class="wpstuff-profile-avatar"/>';
    $html .= '<h3 class="wpstuff-profile-name">' . esc_html($atts['name']) . '</h3>';
    $html .= '<p class="wpstuff-profile-description">' . esc_html($atts['description']) . '</p>';
    $html .= '</div>';

    return $html;
}
add_shortcode('profile', 'wpstuff_profile_shortcode');

Вывод в редакторе: [profile name="Иван Иванов" avatar="https://wpstuff.ru/avatar-ivan.jpg" description="Опытный разработчик"]

Для стилизации такого блока можно добавить CSS в файл стилей темы или плагина:

.wpstuff-profile { display: flex; align-items: center; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
.wpstuff-profile-avatar { width: 80px; height: 80px; border-radius: 50%; margin-right: 15px; }
.wpstuff-profile-name { margin: 0; font-size: 1.2em; }
.wpstuff-profile-description { margin: 5px 0 0 0; color: #666; }

Как использовать шорткоды в шаблонах PHP

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

Пример вывода шорткода [button] в файле single.php темы:

echo do_shortcode('[button text="Купить" url="https://wpstuff.ru/shop"]');

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

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

Для расширения функционала шорткодов можно использовать готовые плагины:

Shortcoder — позволяет создавать и управлять собственными шорткодами через админку, подключать HTML, JavaScript, PHP.
Shortcodes Ultimate — набор из более 50 готовых шорткодов с возможностью кастомизации и вставки визуально.
WP Shortcode by MyThemeShop — удобный плагин для добавления популярных элементов: кнопок, колонок, галерей и т.д.

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

Безопасность и оптимизация при создании шорткодов

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

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

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

Итоги: как создать эффективный шорткод на WordPress

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

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

Практикуйтесь, экспериментируйте и делитесь своими наработками с сообществом WordPress — это лучший путь к профессиональному росту.