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

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

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

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

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

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

Для создания шорткода нужно зарегистрировать функцию-обработчик и привязать её к тегу через функцию add_shortcode. Рассмотрим простой пример — шорткод, который выводит приветствие.

function wpmonitor_shortcode_hello_world() {
    return '<p>Привет от WPMonitor!</p>';
}
add_shortcode('wpmonitor_hello', 'wpmonitor_shortcode_hello_world');

Теперь, если в любом месте контента вставить [wpmonitor_hello], WordPress выведет <p>Привет от WPMonitor!</p>.

Где добавить код шорткода

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

Шорткоды с атрибутами: динамический вывод данных

Чаще всего шорткод должен принимать параметры. Для этого функция-обработчик получает массив атрибутов. Рассмотрим пример шорткода, который выводит приветствие с именем пользователя.

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

Вызов [wpmonitor_greeting name="Иван"] выведет: Привет, Иван! Добро пожаловать на WPMonitor.

Обработка атрибутов и безопасность

Всегда используйте функцию shortcode_atts для установки значений по умолчанию. Для вывода данных используйте функции экранирования, такие как esc_html, чтобы предотвратить XSS-уязвимости.

Сложные шорткоды: вывод HTML и логики

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

function wpmonitor_shortcode_latest_posts($atts) {
    $atts = shortcode_atts(array(
        'count' => 5
    ), $atts, 'wpmonitor_latest_posts');

    $query = new WP_Query(array(
        'posts_per_page' => intval($atts['count']),
        'post_status' => 'publish'
    ));

    if (!$query->have_posts()) {
        return '<p>Нет записей для отображения.</p>';
    }

    $output = '<ul>';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('wpmonitor_latest_posts', 'wpmonitor_shortcode_latest_posts');

Вызов [wpmonitor_latest_posts count="3"] выведет список из 3 последних записей блога с ссылками.

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

Шорткоды могут принимать содержимое между открывающим и закрывающим тегом. Для этого функция-обработчик принимает дополнительный параметр $content. Также в WordPress есть функция do_shortcode для обработки вложенных шорткодов.

function wpmonitor_shortcode_box($atts, $content = null) {
    return '<div class="wpmonitor-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpmonitor_box', 'wpmonitor_shortcode_box');

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

[wpmonitor_box]Текст внутри коробки с ссылками.[/wpmonitor_box]

Этот шорткод оборачивает содержимое в блок с классом wpmonitor-box, куда можно добавить стили через CSS.

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

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

function wpmonitor_shortcode_cached_data() {
    $cache_key = 'wpmonitor_cached_data';
    $data = get_transient($cache_key);
    if (false === $data) {
        // Имитация тяжелой операции
        $data = 'Данные сгенерированы в ' . current_time('mysql');
        set_transient($cache_key, $data, HOUR_IN_SECONDS);
    }
    return '<p>' . esc_html($data) . '</p>';
}
add_shortcode('wpmonitor_cached', 'wpmonitor_shortcode_cached_data');

Такой шорткод [wpmonitor_cached] будет обновлять данные не чаще раза в час, снижая нагрузку.

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

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

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

Однако создание собственных шорткодов даёт полный контроль и гибкость для решения конкретных задач.

Резюме: лучшие практики создания шорткодов в WordPress

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

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