Шорткоды — мощный инструмент 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.