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

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

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

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

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

Главные преимущества собственных шорткодов:

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

Основы создания собственного шорткода в WordPress: пример из wpapp.ru

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

function wpapp_current_datetime_shortcode($atts) {
    $atts = shortcode_atts(array(
        'format' => 'd.m.Y H:i:s', // формат даты по умолчанию
    ), $atts, 'wpapp_datetime');

    return date($atts['format']);
}
add_shortcode('wpapp_datetime', 'wpapp_current_datetime_shortcode');

Вставьте этот код в файл functions.php вашей темы или в плагин. Теперь в любом месте записи или страницы вы можете использовать шорткод [wpapp_datetime], и он выведет текущую дату и время в формате день.месяц.год часы:минуты:секунды.

Также можно указать формат вручную, например: [wpapp_datetime format="Y-m-d"].

Разбор кода и рекомендации

Функция wpapp_current_datetime_shortcode принимает параметр $atts — массив атрибутов шорткода. Мы задаём дефолтный формат даты через shortcode_atts(), чтобы пользователь мог изменить его при вызове. Функция возвращает строку с отформатированной датой, которая и заменяет шорткод в контенте.

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

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

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

function wpapp_colored_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '#ff0000',
    ), $atts, 'wpapp_box');

    $color = esc_attr($atts['color']);
    $content = do_shortcode($content);

    return '<div style="border: 2px solid ' . $color . '; padding: 10px;">' . $content . '</div>';
}
add_shortcode('wpapp_box', 'wpapp_colored_box_shortcode');

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

[wpapp_box color="#00ff00"]Текст внутри цветной рамки[/wpapp_box]

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

Безопасность и фильтрация данных

При работе с параметрами важно фильтровать и экранировать входящие данные. В примере выше мы применили esc_attr() для цвета, чтобы исключить XSS-уязвимости. Всегда обрабатывайте пользовательский ввод перед выводом.

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

Вот несколько идей шорткодов, которые можно реализовать для расширения функционала:

  • Кнопка с ссылкой и стилем — шорткод, который выводит стилизованную кнопку, например [wpapp_button url="https://wpapp.ru" text="Перейти на сайт"].
  • Вывод списка последних записей — шорткод, который динамически выводит ссылки на последние записи блога с опциями количества и категории.
  • Интерактивные табы — шорткод, позволяющий создавать вкладки с контентом для удобной организации информации.

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

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

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

Пример простого кеширования с использованием трансзиентов WordPress:

function wpapp_expensive_shortcode() {
    $cache_key = 'wpapp_expensive_shortcode_cache';
    $cached = get_transient($cache_key);
    if ($cached !== false) {
        return $cached;
    }

    // Здесь выполняем тяжелые операции
    $output = '<div>Данные, полученные после сложных вычислений</div>';

    set_transient($cache_key, $output, 3600); // кешируем на 1 час
    return $output;
}
add_shortcode('wpapp_expensive', 'wpapp_expensive_shortcode');

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

Где хранить код шорткодов: в теме или в плагине

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

Для создания собственного плагина:

  • Создайте папку wp-content/plugins/wpapp-shortcodes
  • Создайте файл wpapp-shortcodes.php с заголовком плагина и вставьте туда код шорткодов
  • Активируйте плагин через админку WordPress

Такой подход более профессионален и гибок для развития сайта.

Заключение

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

Наш каталог плагинов WordPress