Шорткоды в WordPress — это мощный инструмент, который позволяет вставлять сложные элементы и функциональность в записи, страницы и виджеты без необходимости писать каждый раз длинный код. В этой статье мы подробно разберём, как создать собственные шорткоды для вашего сайта, чтобы расширить возможности контента и упростить его редактирование.
Что такое шорткоды в WordPress и зачем они нужны
Шорткод — это специальный тег в квадратных скобках, например [my_shortcode], который WordPress автоматически заменяет на определённый HTML-контент или выполняет нужный PHP-код. Они позволяют:
- Вставлять динамический контент в записи и страницы;
- Избегать дублирования кода и облегчить управление элементами;
- Создавать пользовательские блоки с уникальной функциональностью;
- Интегрировать внешние сервисы и плагины без сложных настроек.
По умолчанию WordPress предоставляет несколько встроенных шорткодов, например для вставки галерей, аудио и видео. Но настоящая сила — в возможности создавать собственные шорткоды под задачи вашего сайта.
Как создать собственный шорткод в WordPress: базовый пример
Для создания шорткода нужно добавить функцию в файл functions.php вашей темы или в отдельный плагин. Например, создадим простой шорткод, который выводит приветствие с именем пользователя:
function wpeducation_hello_shortcode($atts) {
$atts = shortcode_atts(array(
'name' => 'Гость',
), $atts, 'hello');
return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на наш сайт.</p>';
}
add_shortcode('hello', 'wpeducation_hello_shortcode');Теперь, если в записи написать [hello name="Иван"], на сайте появится текст: «Привет, Иван! Добро пожаловать на наш сайт.»
Обратите внимание на функцию shortcode_atts, которая задаёт значения по умолчанию для атрибутов шорткода, и на функцию esc_html, которая защищает от XSS-атак.
Использование параметров и вложенных шорткодов
Шорткоды могут принимать несколько параметров, что позволяет гибко настраивать вывод. Например, шорткод для вывода кнопки с разными цветами и ссылками:
function wpeducation_button_shortcode($atts, $content = null) {
$atts = shortcode_atts(array(
'color' => 'blue',
'url' => '#',
), $atts, 'button');
$color = in_array($atts['color'], array('blue', 'red', 'green')) ? $atts['color'] : 'blue';
$url = esc_url($atts['url']);
$content = $content ? $content : 'Кнопка';
return '<a href="' . $url . '" class="wpeducation-btn wpeducation-btn-' . $color . '">' . esc_html($content) . '</a>';
}
add_shortcode('button', 'wpeducation_button_shortcode');В редакторе можно использовать так: [button color="red" url="https://wpeducation.ru"]Жми сюда[/button]. Результат — красная кнопка с ссылкой.
Чтобы стилизовать кнопку, добавим CSS в файл темы или через кастомайзер:
.wpeducation-btn {
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
color: #fff;
font-weight: bold;
}
.wpeducation-btn-blue { background-color: #0073aa; }
.wpeducation-btn-red { background-color: #d54e21; }
.wpeducation-btn-green { background-color: #46b450; }Вложенные шорткоды
WordPress позволяет использовать вложенные шорткоды, например, если кнопка должна содержать другой шорткод. Для этого нужно в функции использовать do_shortcode. Например:
function wpeducation_highlight_shortcode($atts, $content = null) {
return '<span style="background-color: yellow;">' . do_shortcode($content) . '</span>';
}
add_shortcode('highlight', 'wpeducation_highlight_shortcode');Теперь можно написать: [highlight]Текст с [hello name="Иван"] внутри[/highlight]. Это выделит жёлтым весь текст, включая результат шорткода hello.
Практические примеры использования шорткодов для сайта на WordPress
Шорткоды хорошо подходят для внедрения различных функций без правки темы:
- Формы обратной связи: можно создать шорткод для вывода кастомной формы, используя плагин Contact Form 7 или собственный код.
- Вывод последних записей или популярных постов: динамический вывод контента с фильтрацией и пагинацией.
- Встроенные виджеты и галереи: шорткод для показа слайдеров, видео и аудиоплееров.
Например, шорткод для вывода последних 3 записей блога:
function wpeducation_recent_posts_shortcode($atts) {
$atts = shortcode_atts(array(
'count' => 3,
), $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', 'wpeducation_recent_posts_shortcode');Используйте в записи [recent_posts count="5"] для отображения последних 5 публикаций.
Лучшие плагины для работы с шорткодами в WordPress
Хотя создание собственных шорткодов — это мощный способ кастомизации, иногда проще воспользоваться готовыми решениями:
- Shortcodes Ultimate — универсальный набор шорткодов с кнопками, вкладками, аккордеонами и многим другим. Позволяет создавать контент без кодинга.
- WP Shortcode by MyThemeShop — лёгкий и удобный плагин с базовыми элементами, который расширяет стандартный функционал.
- Insert PHP Code Snippet — позволяет создавать шорткоды, которые выполняют PHP-код, что полезно для продвинутых пользователей.
Эти плагины помогут быстро добавить функциональность, если нет времени или желания писать код вручную.
Советы по безопасности и производительности при использовании шорткодов
Работая с шорткодами, важно учитывать несколько моментов:
- Валидация и экранирование входных данных. Никогда не выводите параметры шорткодов напрямую без обработки — используйте
esc_html,esc_urlи другие функции безопасности. - Минимизация нагрузки на сайт. Избегайте тяжелых запросов в шорткодах, кешируйте результаты, если это возможно.
- Тестирование на разных устройствах и редакторах. Убедитесь, что шорткоды корректно работают как в классическом редакторе, так и в Gutenberg, а также в виджетах.
Правильно реализованные шорткоды сделают ваш сайт удобным и функциональным без потери скорости и безопасности.