Как создать свой шорткод в WordPress: пошаговое руководство

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

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

Шорткод — это специальная конструкция в квадратных скобках, например [my_shortcode], которая при выводе страницы преобразуется в нужный HTML, скрипт или другой контент. Они позволяют:

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

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

Создание простого шорткода на PHP

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

function yarpp_rus_hello_shortcode($atts) {
    $atts = shortcode_atts(array(
        'name' => 'Гость',
    ), $atts, 'hello');

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

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

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

Расширяем функциональность: шорткод с выводом списка последних записей

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

function yarpp_rus_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
    ), $atts, 'recent_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="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    wp_reset_postdata();

    $output .= '</ul>';
    return $output;
}
add_shortcode('recent_posts', 'yarpp_rus_recent_posts_shortcode');

Вызовите этот шорткод как [recent_posts count="10"] для вывода 10 последних публикаций. Такой шорткод полезен для создания динамических боковых панелей, разделов новостей и т.п.

Добавление JavaScript в шорткод для динамического контента

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

Шаг 1. PHP-часть шорткода

function yarpp_rus_click_counter_shortcode() {
    $html = '<button id="yarpp-rus-click-btn">Нажми меня</button>'
          . '<div id="yarpp-rus-click-count">Количество кликов: 0</div>';

    // Подключаем наш скрипт
    wp_enqueue_script('yarpp-rus-click-counter-script');

    return $html;
}
add_shortcode('click_counter', 'yarpp_rus_click_counter_shortcode');

Обратите внимание, что мы вызываем wp_enqueue_script, но сам скрипт пока не зарегистрирован.

Шаг 2. Регистрация и подключение JavaScript

Добавьте в functions.php следующий код для регистрации скрипта:

function yarpp_rus_register_scripts() {
    wp_register_script(
        'yarpp-rus-click-counter-script',
        get_template_directory_uri() . '/js/click-counter.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'yarpp_rus_register_scripts');

Создайте файл js/click-counter.js в директории темы и вставьте туда:

document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('yarpp-rus-click-btn');
    var countDiv = document.getElementById('yarpp-rus-click-count');

    if (!btn || !countDiv) return;

    var count = localStorage.getItem('yarppRusClickCount') || 0;
    count = parseInt(count);
    countDiv.textContent = 'Количество кликов: ' + count;

    btn.addEventListener('click', function () {
        count++;
        countDiv.textContent = 'Количество кликов: ' + count;
        localStorage.setItem('yarppRusClickCount', count);
    });
});

Теперь при вставке шорткода [click_counter] на страницу будет кнопка с интерактивным счётчиком кликов, который сохраняется в локальном хранилище браузера.

Практические советы при разработке шорткодов

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

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

Избегайте конфликтов имён

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

Оптимизируйте запросы к базе

Если шорткод выполняет запросы к базе (например, через WP_Query), добавляйте кэширование или ограничения по количеству записей, чтобы не нагружать сервер.

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

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

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

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

Итог

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