Шорткоды в WordPress — это мощный инструмент, который позволяет легко добавлять динамический контент в посты, страницы и виджеты. Если вы хотите расширить функциональность своего сайта и сделать его более удобным для редактирования, создание собственных шорткодов — отличное решение. В этой статье мы подробно разберём, как создать шорткод, который будет выполнять любую задачу, от вывода простого текста до сложной логики с параметрами и безопасностью.
Что такое шорткод в WordPress и зачем он нужен
Шорткод — это специальный тег в квадратных скобках, который WordPress распознаёт и заменяет на определённый контент или функциональность. Например, стандартный шорткод [gallery] выводит галерею изображений. С помощью собственных шорткодов можно добавить любые элементы: кнопки, формы, таблицы, результаты запросов к базе данных и многое другое.
Преимущества собственных шорткодов:
- Упрощают редактирование контента без необходимости писать HTML или PHP;
- Позволяют повторно использовать код на разных страницах;
- Обеспечивают безопасность, если реализованы корректно;
- Расширяют возможности стандартного редактора WordPress.
Как создать базовый шорткод: пример и объяснение
Для создания шорткода используется функция add_shortcode(). Она принимает два параметра: имя шорткода и callback-функцию, которая возвращает содержимое.
Пример простого шорткода для сайта wp-kurs.ru:
function wp_kurs_hello_shortcode() {
return '<p>Привет от wp-kurs.ru!</p>';
}
add_shortcode('wp_kurs_hello', 'wp_kurs_hello_shortcode');Теперь, если вы вставите в редактор [wp_kurs_hello], на странице отобразится "Привет от wp-kurs.ru!".
Важно: функция должна возвращать строку, а не выводить её напрямую через echo.
Регистрация шорткода в плагине или functions.php
Рекомендуется создавать шорткоды в отдельном плагине, чтобы не потерять их при обновлении темы. Если хотите быстро добавить шорткод, можно вставить код в файл functions.php вашей активной темы или дочерней темы.
Для создания плагина:
- Создайте папку
wp-kurs-shortcodesв каталогеwp-content/plugins. - Создайте файл
wp-kurs-shortcodes.phpс заголовком плагина и вставьте функцию шорткода.
Использование параметров в шорткодах
Шорткоды могут принимать параметры для гибкой настройки вывода. Рассмотрим пример шорткода, который выводит приветствие с именем пользователя:
function wp_kurs_greet_shortcode($atts) {
$atts = shortcode_atts(
array('name' => 'Гость'),
$atts,
'wp_kurs_greet'
);
return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на wp-kurs.ru.</p>';
}
add_shortcode('wp_kurs_greet', 'wp_kurs_greet_shortcode');Использование: [wp_kurs_greet name="Алексей"] выведет "Привет, Алексей!".
Функция shortcode_atts задаёт значения по умолчанию и объединяет их с переданными параметрами. Важно обязательно экранировать вывод с помощью esc_html, чтобы избежать XSS-уязвимостей.
Шорткод с вложенным содержимым (enclosed shortcode)
Иногда нужно, чтобы шорткод обрабатывал не только параметры, но и содержимое между открывающим и закрывающим тегом. Для этого callback-функция принимает второй параметр $content.
function wp_kurs_box_shortcode($atts, $content = null) {
$atts = shortcode_atts(array('color' => 'yellow'), $atts, 'wp_kurs_box');
$color = esc_attr($atts['color']);
$content = do_shortcode($content); // обработка вложенных шорткодов
return '<div style="padding:10px; background-color:' . $color . '; border:1px solid #ccc;">' . $content . '</div>';
}
add_shortcode('wp_kurs_box', 'wp_kurs_box_shortcode');Использование:
[wp_kurs_box color="lightblue"]Это важное сообщение в цветном блоке.[/wp_kurs_box]Так вы можете создавать стилизованные блоки с произвольным содержимым, что полезно для выделения информации.
Безопасность и производительность шорткодов
При создании шорткодов важно учитывать несколько аспектов:
- Экранирование данных: Всегда используйте функции
esc_html,esc_attr,wp_kses_postи подобные для обработки вывода. - Ограничение выполняемого кода: Не выполняйте опасные операции, такие как включение файлов на основе параметров пользователя или произвольный PHP-код.
- Кэширование: Если шорткод делает запросы к базе данных или API, подумайте о добавлении кэширования, чтобы не замедлять загрузку страниц.
Для кэширования можно использовать транзиенты WordPress:
function wp_kurs_cached_shortcode() {
$cache_key = 'wp_kurs_cached_data';
$data = get_transient($cache_key);
if (false === $data) {
// Тяжёлая операция, например, запрос к внешнему API
$data = 'Результат сложного запроса';
set_transient($cache_key, $data, 3600); // кэш на 1 час
}
return '<p>' . esc_html($data) . '</p>';
}
add_shortcode('wp_kurs_cached', 'wp_kurs_cached_shortcode');Популярные плагины для расширения функционала шорткодов
Если вы не хотите писать собственные шорткоды, есть готовые плагины, которые предоставляют множество полезных шорткодов:
- Shortcodes Ultimate — большой набор визуальных и функциональных шорткодов (кнопки, вкладки, слайдеры и пр.).
- WP Shortcode by MyThemeShop — простой и лёгкий плагин с часто используемыми шорткодами.
- Custom Content Shortcode — позволяет создавать и управлять собственными шорткодами из админки.
Однако, для уникальной функциональности лучше писать свои шорткоды, так вы получите полный контроль и оптимальную производительность.
Выводы и рекомендации для разработчиков
Создание собственных шорткодов — обязательный навык для разработчика WordPress, который позволяет расширять возможности сайта и улучшать UX. Начинайте с простых примеров, постепенно добавляя параметры, обработку вложенного контента и безопасность.
Не забывайте о стандартах кодирования, экранировании данных и тестировании на разных версиях WordPress. Если вы планируете распространять свои шорткоды, оформляйте их в отдельный плагин для удобства поддержки и обновлений.