Шорткоды — один из самых удобных инструментов в WordPress, позволяющий вставлять сложные функциональные элементы в посты, страницы и виджеты без необходимости писать большой объем кода при каждом использовании. В этой статье мы подробно рассмотрим, как создать собственный шорткод, оптимизировать его и интегрировать в тему или плагин.
Что такое шорткод в WordPress и зачем он нужен
Шорткод — это простой тег, который вы вставляете в контент WordPress, и который автоматически заменяется на более сложный HTML, PHP или другой вывод при отображении страницы. Это значительно упрощает работу с функционалом, позволяя использовать его повторно без дублирования кода.
Например, стандартный шорткод [gallery] выводит фотогалерею из вложенных изображений. Аналогично, любой разработчик может создать собственный шорткод для отображения, например, таблиц с данными, форм обратной связи или интерактивных блоков.
Создание собственного шорткода позволяет:
- Упростить добавление сложных элементов в содержимое через визуальный редактор;
- Обеспечить единообразие оформления;
- Легко обновлять функциональность в одном месте;
- Уменьшить количество повторяющегося кода.
Как создать простой шорткод: базовый пример
Для начала создадим самый простой шорткод, который будет выводить приветственное сообщение. Добавим следующий код в файл functions.php вашей темы или в файл основного плагина:
function wpdesk_hello_shortcode() {
return '<div style="padding:10px; background:#f0f0f0; border:1px solid #ccc;">Привет, это мой первый шорткод!</div>';
}
add_shortcode('wpdesk_hello', 'wpdesk_hello_shortcode');Теперь в любом месте записи или страницы вы можете вставить [wpdesk_hello], и там отобразится стилизованное приветствие.
Обратите внимание, что функция начинается с префикса wpdesk_, чтобы избежать конфликтов с другими плагинами и темами. Это хорошая практика для всех разработчиков.
Шорткод с параметрами: динамический вывод
Для большей гибкости шорткоды могут принимать параметры (атрибуты). Рассмотрим пример шорткода, который выводит пользовательское сообщение с возможностью указать цвет текста и сам текст.
function wpdesk_custom_message_shortcode($atts) {
$atts = shortcode_atts(
array(
'text' => 'Сообщение по умолчанию',
'color' => '#333333',
), $atts, 'wpdesk_message'
);
$text = esc_html($atts['text']);
$color = sanitize_hex_color($atts['color']);
return "<div style='color: {$color}; font-weight: bold;'>{$text}</div>";
}
add_shortcode('wpdesk_message', 'wpdesk_custom_message_shortcode');Использование в редакторе:
[wpdesk_message text="Важное уведомление" color="#ff0000"]
Этот шорткод выведет красное жирное сообщение «Важное уведомление».
Функция shortcode_atts задаёт значения по умолчанию для параметров, а функции esc_html и sanitize_hex_color обеспечивают безопасность и корректность данных.
Пример: шорткод для вывода последних записей с настройками
Рассмотрим более сложный пример — шорткод, который выводит список последних записей блога с возможностью задать количество и категорию.
function wpdesk_recent_posts_shortcode($atts) {
$atts = shortcode_atts(
array(
'count' => 5,
'category' => '',
), $atts, 'wpdesk_recent_posts'
);
$args = array(
'posts_per_page' => intval($atts['count']),
'post_status' => 'publish',
);
if (!empty($atts['category'])) {
$args['category_name'] = sanitize_text_field($atts['category']);
}
$query = new WP_Query($args);
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('wpdesk_recent_posts', 'wpdesk_recent_posts_shortcode');Пример использования:
[wpdesk_recent_posts count=3 category="novosti"]
Такой шорткод выведет 3 последние записи из категории «novosti».
Советы по улучшению и безопасности шорткодов
Обработка входных данных
Всегда проверяйте и фильтруйте входящие параметры шорткодов. Используйте такие функции, как esc_html, sanitize_text_field, intval, sanitize_hex_color и другие в зависимости от типа данных. Это предотвратит XSS-атаки и нарушение работы.
Использование буферизации вывода
Если ваш шорткод выводит сложный HTML с большим количеством echo или требует подключения шаблонов, используйте буферизацию вывода:
function wpdesk_buffered_shortcode() {
ob_start();
?>
<div class="custom-box">Это контент из буферизации</div>
<?php
return ob_get_clean();
}
add_shortcode('wpdesk_buffered', 'wpdesk_buffered_shortcode');Это позволяет писать HTML как в шаблоне, а возвращать готовый результат без риска вывода в неподходящий момент.
Использование шорткодов в виджетах и настройках
По умолчанию WordPress не обрабатывает шорткоды в некоторых местах, например в виджетах текста. Чтобы исправить это, добавьте в functions.php следующий код:
add_filter('widget_text', 'do_shortcode');Это позволит использовать ваши шорткоды и там, где раньше это было невозможно.
Популярные плагины для работы с шорткодами
Если вы хотите расширить функциональность шорткодов без программирования, обратите внимание на следующие плагины:
- Shortcodes Ultimate — огромный набор готовых шорткодов с визуальным редактором;
- WP Shortcode by MyThemeShop — простой и легковесный набор шорткодов;
- Custom Content Shortcode — позволяет создавать свои шорткоды без кода через интерфейс.
Однако, для уникальных задач создание собственного шорткода всегда предпочтительнее, так как вы полностью контролируете функционал и оптимизацию.
Вывод
Создание собственных шорткодов в WordPress — это мощный способ расширить возможности вашего сайта без излишнего дублирования кода. В этой статье мы рассмотрели, как сделать базовый шорткод, добавить параметры, работать с WP_Query и обеспечить безопасность и правильный вывод.
Экспериментируйте с шорткодами, интегрируйте их в темы и плагины, и ваш сайт станет гибче и удобнее для пользователей и редакторов.