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

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

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

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

Использовать шорткоды удобно, если вы хотите:

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

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

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

Создание шорткода — это добавление PHP-функции, которая возвращает HTML-код, и регистрация этой функции с помощью встроенной функции WordPress add_shortcode(). Рассмотрим пример, как создать простой шорткод для вывода приветственного сообщения.

function wpcourse_hello_shortcode($atts) {
    // Обработка атрибутов шорткода с значением по умолчанию
    $atts = shortcode_atts(array(
        'name' => 'Гость'
    ), $atts, 'hello');

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

Теперь, если добавить в запись [hello name="Иван"], на сайте отобразится: Привет, Иван! Добро пожаловать на сайт.

Обратите внимание на использование функции esc_html() для безопасности и shortcode_atts() для установки параметров по умолчанию.

Передача параметров в шорткод

Шорткод может принимать множество параметров, которые позволяют гибко управлять выводом. Например, добавим шорткод для вывода кнопки с настраиваемым текстом и ссылкой:

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

    return '<a href="' . esc_url($atts['url']) . '" class="wpcourse-btn wpcourse-btn-' . esc_attr($atts['color']) . '">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpcourse_button', 'wpcourse_button_shortcode');

Использование: [wpcourse_button text="Перейти" url="https://wpcourse.ru" color="red"]

Для стилизации такой кнопки достаточно добавить CSS-классы в тему или плагин.

Продвинутые примеры: шорткод с вложенным контентом и условной логикой

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

function wpcourse_alert_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'type' => 'info' // info, warning, error
    ), $atts, 'alert');

    $type_class = 'wpcourse-alert-' . esc_attr($atts['type']);

    return '<div class="wpcourse-alert ' . $type_class . '">' . do_shortcode($content) . '</div>';
}
add_shortcode('alert', 'wpcourse_alert_shortcode');

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

[alert type="warning"]Внимание! Проверьте настройки.[/alert]

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

Обработка вложенных шорткодов

Если внутри контента есть другие шорткоды, используйте функцию do_shortcode(), как показано выше, чтобы они корректно обработались.

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

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

• Безопасность: всегда экранируйте входящие данные и вывод с помощью esc_html(), esc_url() и подобных функций.
• Производительность: не используйте тяжелые запросы в шорткодах, которые вызываются часто. Если нужен сложный запрос, используйте кеширование.
• Согласованность: давайте шорткодам и функциям уникальные имена, например, с префиксом wpcourse_, чтобы избежать конфликтов с другими плагинами.

Как зарегистрировать шорткод в своем плагине или в functions.php

Лучше всего добавлять шорткоды в плагин или в дочернюю тему, чтобы не потерять изменения при обновлении основной темы. Например, в файле functions.php дочерней темы:

if (!function_exists('wpcourse_hello_shortcode')) {
    function wpcourse_hello_shortcode($atts) {
        $atts = shortcode_atts(array('name' => 'Гость'), $atts, 'hello');
        return '<p>Привет, ' . esc_html($atts['name']) . '!</p>';
    }
    add_shortcode('hello', 'wpcourse_hello_shortcode');
}

Или создайте отдельный плагин с аналогичным кодом.

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

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

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

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

Вывод

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