Как создать и использовать шорткоды в WordPress

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

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

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

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

• Упрощать добавление сложных элементов в контент без знаний программирования.
• Делать контент более гибким и управляемым.
• Повторно использовать один и тот же функционал в разных местах сайта.

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

Как создать простой шорткод в WordPress

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

function wpsell_hello_shortcode($atts) {
    $atts = shortcode_atts(array(
        'name' => 'Гость'
    ), $atts, 'hello');
    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на наш сайт.</p>';
}
add_shortcode('hello', 'wpsell_hello_shortcode');

В этом примере мы создали шорткод [hello] с атрибутом name. Если указать [hello name="Иван"], на странице отобразится «Привет, Иван! Добро пожаловать на наш сайт.».

Пояснение к коду

Функция wpsell_hello_shortcode принимает массив атрибутов, задаёт значение по умолчанию через shortcode_atts и возвращает HTML-строку с приветствием. Функция add_shortcode связывает название шорткода hello с нашей функцией.

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

Шорткоды могут принимать не только атрибуты, но и содержать вложенный контент. Например, создадим шорткод [wpsell_box], который оборачивает контент в стилизованный блок.

function wpsell_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '#f0f0f0'
    ), $atts, 'wpsell_box');
    return '<div style="background-color:' . esc_attr($atts['color']) . '; padding: 15px; border-radius: 5px;">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpsell_box', 'wpsell_box_shortcode');

Пример использования: [wpsell_box color="#cceeff"]Это важное сообщение![/wpsell_box]. В результате текст будет обёрнут в блок с голубым фоном.

Как это работает

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

Реальные кейсы использования шорткодов

Шорткоды полезны для вставки:

• Кнопок с кастомным стилем и ссылкой.
• Форм обратной связи.
• Таблиц с данными.
• Встраиваемых видео и аудио плееров.
• Галерей изображений с уникальным оформлением.

Например, создадим шорткод для кнопки с настраиваемым текстом и URL:

function wpsell_button_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => '#',
        'text' => 'Нажми меня',
        'color' => '#0073aa'
    ), $atts, 'wpsell_button');

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

Использование: [wpsell_button url="https://wpsell.ru" text="Перейти на WPSell" color="#e74c3c"].

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

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

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

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

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

При создании шорткодов важно:

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

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

function wpsell_cached_shortcode() {
    $cache_key = 'wpsell_cached_data';
    $data = get_transient($cache_key);
    if (false === $data) {
        // Дорогой запрос
        $data = 'Данные из БД или API';
        set_transient($cache_key, $data, HOUR_IN_SECONDS);
    }
    return '<p>' . esc_html($data) . '</p>';
}
add_shortcode('wpsell_cache', 'wpsell_cached_shortcode');

Как подключить шорткоды в виджетах и шаблонах

По умолчанию шорткоды не работают в текстовых виджетах WordPress. Чтобы их активировать, добавьте в файл functions.php вашей темы следующий код:

add_filter('widget_text', 'do_shortcode');

Также шорткод можно вызвать напрямую из PHP-шаблона с помощью функции do_shortcode:

echo do_shortcode('[hello name="Алексей"]');

Это полезно, если нужно вставить динамический контент в произвольном месте темы.