Шорткоды в WordPress — это мощный инструмент, который позволяет добавлять функциональность и динамический контент в записи и страницы без необходимости писать сложный код каждый раз. Если вы хотите оптимизировать работу с контентом и добавить уникальные элементы на сайт, знание того, как создавать собственные шорткоды, будет очень полезным.
Что такое шорткоды и зачем они нужны в WordPress
Шорткоды — это специальные теги в квадратных скобках, например [gallery], которые WordPress автоматически заменяет на определенный функционал или вывод. Они позволяют внедрять сложные элементы (галереи, формы, кнопки, кастомный HTML) с минимальными усилиями.
Создавая свои собственные шорткоды, вы сможете адаптировать сайт под свои задачи, расширить возможности без необходимости установки множества плагинов и упростить редактирование контента для редакторов.
В этой статье мы подробно разберём, как создать свои шорткоды, использовать параметры и обеспечить безопасность.
Создание простого шорткода: первый пример
Для создания шорткода в WordPress нужно использовать функцию add_shortcode(). Она принимает два параметра: имя шорткода и функцию, которая возвращает HTML или другой контент для вывода.
Вот пример простого шорткода, который выводит приветствие:
function wparticles_hello_shortcode() {
return '<p>Привет, это мой первый шорткод!</p>';
}
add_shortcode('wparticles_hello', 'wparticles_hello_shortcode');Теперь, если в редакторе записей вставить [wparticles_hello], на сайте отобразится сообщение «Привет, это мой первый шорткод!».
Этот пример демонстрирует базовый принцип: шорткод заменяется на результат функции.
Использование параметров в шорткодах: динамический контент
Очень часто шорткодам нужны параметры для гибкости. Например, вывести приветствие с именем пользователя. Для этого функция шорткода принимает два параметра: массив атрибутов и контент внутри шорткода.
Рассмотрим пример с параметром name:
function wparticles_greet_shortcode($atts) {
$atts = shortcode_atts(
array('name' => 'Гость'),
$atts,
'wparticles_greet'
);
return '<p>Привет, ' . esc_html($atts['name']) . '!</p>';
}
add_shortcode('wparticles_greet', 'wparticles_greet_shortcode');Теперь в записи можно использовать [wparticles_greet name="Алексей"], и на странице появится «Привет, Алексей!». Если параметр не указан, будет «Привет, Гость!».
Шорткоды с содержимым: обработка вложенного текста
Иногда нужно, чтобы шорткод обрабатывал не только параметры, но и текст, расположенный между тегами. Для этого функция должна принимать второй параметр — $content.
Пример шорткода, который выделяет содержимое жирным:
function wparticles_bold_shortcode($atts, $content = null) {
return '<strong>' . esc_html($content) . '</strong>';
}
add_shortcode('wparticles_bold', 'wparticles_bold_shortcode');Использование в записи: [wparticles_bold]Этот текст будет жирным[/wparticles_bold].
Примеры полезных шорткодов для сайта на WordPress
1. Кнопка с кастомным текстом и ссылкой
Очень часто необходимо вставлять кнопки с разным текстом и ссылкой без копирования HTML-кода. Создадим шорткод [wparticles_button] с параметрами text и url:
function wparticles_button_shortcode($atts) {
$atts = shortcode_atts(
array(
'text' => 'Нажми меня',
'url' => '#',
),
$atts,
'wparticles_button'
);
$text = esc_html($atts['text']);
$url = esc_url($atts['url']);
return '<a href="' . $url . '" class="wparticles-button">' . $text . '</a>';
}
add_shortcode('wparticles_button', 'wparticles_button_shortcode');Для стилизации кнопки можно добавить CSS в тему или отдельный файл:
.wparticles-button {
display: inline-block;
padding: 10px 20px;
background-color: #0073aa;
color: #fff;
text-decoration: none;
border-radius: 4px;
}
.wparticles-button:hover {
background-color: #005177;
}Использование: [wparticles_button text="Перейти" url="https://wparticles.ru"].
2. Вставка текущей даты в удобном формате
Шорткод, который выводит сегодняшнюю дату в формате дд.мм.гггг:
function wparticles_current_date_shortcode() {
return date('d.m.Y');
}
add_shortcode('wparticles_date', 'wparticles_current_date_shortcode');Используется просто: [wparticles_date].
Безопасность при создании шорткодов
При работе с шорткодами важно правильно обрабатывать входящие данные, чтобы избежать XSS-уязвимостей. Никогда не выводите пользовательский ввод напрямую. В примерах выше мы использовали функции esc_html() для вывода текста и esc_url() для ссылок.
Если шорткод должен выводить HTML, убедитесь, что он безопасен. Можно использовать wp_kses() с набором разрешенных тегов.
Также рекомендуется избегать выполнения сложной логики или запросов в функциях шорткодов, чтобы не замедлять загрузку страниц. Для сложных задач лучше использовать REST API или виджеты.
Как зарегистрировать шорткоды в отдельном плагине
Для удобства и безопасности лучше создавать шорткоды через отдельный плагин, а не в файлах темы. Создайте папку wparticles-shortcodes в wp-content/plugins/ и файл wparticles-shortcodes.php с таким содержимым:
<?php
/**
* Plugin Name: WParticles Shortcodes
* Description: Набор пользовательских шорткодов для сайта WParticles.ru
* Version: 1.0
* Author: WParticles
*/
// Код шорткодов из предыдущих примеров сюда
function wparticles_hello_shortcode() {
return '<p>Привет, это мой первый шорткод!</p>';
}
add_shortcode('wparticles_hello', 'wparticles_hello_shortcode');
// Добавьте остальные шорткоды по аналогии
Активируйте плагин в админке WordPress, и шорткоды будут работать.
Полезные плагины для работы с шорткодами в WordPress
Если не хочется писать код с нуля, можно использовать плагины с расширенными возможностями:
- Shortcodes Ultimate — большой набор готовых шорткодов с гибкими настройками;
- WP Shortcode by MyThemeShop — удобный плагин с популярными элементами;
- Custom Shortcodes — позволяет создавать свои шорткоды через интерфейс без кода.
Однако для уникального и легковесного решения лучше создавать собственные шорткоды, адаптированные под задачи проекта.
