В этой статье мы подробно разберём, как создавать собственные шорткоды в WordPress. Шорткоды — это мощный инструмент, который позволяет добавлять динамический контент в записи, страницы и виджеты, не прибегая к редактированию шаблонов. Вы узнаете, как создать простой шорткод, добавить параметры, обработать атрибуты и даже использовать вложенные шорткоды.
Что такое шорткоды в WordPress и зачем они нужны
Шорткод — это специальный тег в квадратных скобках, например, [wpai_example], который WordPress заменяет на определённый контент при отображении страницы. Это удобно, если нужно повторно использовать один и тот же функционал в разных местах сайта или внедрять сложные элементы без прямого редактирования кода. Например, вывод контактной формы, галереи или пользовательских данных.
Основные преимущества использования шорткодов:
- Упрощение вставки динамического контента;
- Повышение удобства для редакторов сайта;
- Гибкость и расширяемость;
- Возможность передачи параметров для настройки вывода.
Как создать простой шорткод в WordPress
Для примера создадим базовый шорткод, который выводит приветственное сообщение. В файле functions.php вашей темы или в собственном плагине добавьте следующий код:
function wpai_greeting_shortcode() {
return 'Привет! Это сообщение от шорткода.';
}
add_shortcode('wpai_greeting', 'wpai_greeting_shortcode');Теперь, если вставить в контент [wpai_greeting], на странице отобразится текст "Привет! Это сообщение от шорткода.".
Обратите внимание на префикс wpai_ в имени функции — это хорошая практика, позволяющая избежать конфликтов с другими плагинами и темами.
Добавление параметров в шорткод: настройка вывода
Чаще всего шорткоды полезны, когда можно передать параметры для изменения результата. Например, сделаем шорткод, который выводит приветствие с именем пользователя:
function wpai_personal_greeting_shortcode($atts) {
$atts = shortcode_atts(
array(
'name' => 'Гость',
), $atts, 'wpai_personal_greeting'
);
return 'Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на сайт.';
}
add_shortcode('wpai_personal_greeting', 'wpai_personal_greeting_shortcode');Использовать шорткод можно так: [wpai_personal_greeting name="Иван"]. Вывод будет: "Привет, Иван! Добро пожаловать на сайт." Если параметр name не указан, подставится значение по умолчанию — "Гость".
Обработка и безопасность параметров
Очень важно всегда обрабатывать входящие данные, чтобы избежать XSS-уязвимостей. В примере мы использовали функцию esc_html(), которая экранирует HTML-сущности. Если ожидается другой тип данных (например, URL или число), используйте соответствующие функции валидации и очистки.
Использование вложенных шорткодов и сложных структур
WordPress поддерживает вложенные шорткоды, что открывает широкие возможности для создания комплексного контента. Например, шорткод, который оборачивает вложенный контент в стилизованный блок:
function wpai_box_shortcode($atts, $content = null) {
$atts = shortcode_atts(
array('color' => 'blue'), $atts, 'wpai_box'
);
$color = esc_attr($atts['color']);
$content = do_shortcode($content);
return '<div style="border:2px solid ' . $color . '; padding:10px;">' . $content . '</div>';
}
add_shortcode('wpai_box', 'wpai_box_shortcode');Использование:
[wpai_box color="red"]Это текст внутри красной рамки.[/wpai_box]
Такой подход позволяет создавать многоуровневые шорткоды и комбинировать их для формирования сложного контента.
Особенности обработки вложенного контента
В функции-обработчике обязательно вызывайте do_shortcode() для параметра $content, чтобы WordPress обработал вложенные шорткоды внутри. Без этого вложенные шорткоды будут отображаться как обычный текст.
Примеры полезных шорткодов для сайта на WordPress
Вот несколько идей, которые вы можете реализовать с помощью шорткодов:
- Вывод последних публикаций с миниатюрами и ссылками;
- Встраивание контактной формы с параметрами;
- Показывать персонализированные сообщения в зависимости от роли пользователя;
- Создавать кнопки с настраиваемым стилем и ссылкой;
- Встраивать кастомные таблицы или списки с данными из базы.
Рассмотрим пример шорткода для вывода последних 3 записей с заголовками и ссылками:
function wpai_latest_posts_shortcode($atts) {
$atts = shortcode_atts(array(
'count' => 3,
), $atts, 'wpai_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="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
wp_reset_postdata();
$output .= '</ul>';
return $output;
}
add_shortcode('wpai_latest_posts', 'wpai_latest_posts_shortcode');Используйте шорткод [wpai_latest_posts count="5"], чтобы вывести 5 последних записей.
Рекомендации по организации и оптимизации шорткодов
При создании шорткодов придерживайтесь следующих правил:
- Используйте уникальные префиксы в именах функций и шорткодов, чтобы избежать конфликтов.
- Обрабатывайте и валидируйте входящие параметры с помощью
shortcode_atts()и функций очистки данных. - Избегайте вывода напрямую через
echo, всегда возвращайте результат. - Минимизируйте запросы к базе данных, кешируйте результат, если нужно.
- Документируйте код, чтобы другие разработчики понимали назначение и параметры шорткодов.
Соблюдение этих рекомендаций сделает ваш код более надёжным и удобным в поддержке.
Полезные плагины для работы с шорткодами в WordPress
Если вы хотите расширить возможности шорткодов или упростить их использование, обратите внимание на следующие плагины:
- Shortcodes Ultimate — предоставляет большой набор готовых шорткодов с визуальным редактором.
- WP Shortcode by MyThemeShop — простой плагин с базовыми шорткодами для контента.
- Custom Content Shortcode — позволяет создавать шорткоды для условного отображения контента.
Эти плагины помогут быстро добавить функциональность без написания собственного кода, но если нужна гибкость — лучше создавать свои шорткоды.