Коротко: шорткод в WordPress добавляют функцией add_shortcode() в мини-плагине или functions.php дочерней темы, а затем используют в редакторе как [имя]. Атрибуты передают внутри скобок: [имя title="Привет"]. Выводить данные нужно с экранированием.
Как это работает
| Шаг | Что делаем |
|---|---|
| Регистрация | add_shortcode() |
| Использование | [my_shortcode] в редакторе |
| Атрибуты | [my_shortcode title="..."] |
| Закрывающий | [my_shortcode]текст[/my_shortcode] |
Вкладки: примеры
add_shortcode('hello', function () {
return '<p>Привет!</p>';
});В записи пишете [hello] — на сайте появится абзац. Функция должна вернуть строку, а не выводить её через echo.
add_shortcode('box', function ($atts) {
$atts = shortcode_atts([
'title' => 'Заголовок',
'color' => 'brand',
], $atts);
return sprintf(
'<div class="box box--%s"><h3>%s</h3></div>',
esc_attr($atts['color']),
esc_html($atts['title'])
);
});shortcode_atts() задаёт значения по умолчанию. Экранируйте значения: esc_attr() для атрибутов, esc_html() для текста.
add_shortcode('note', function ($atts, $content = null) {
return '<div class="note">' . do_shortcode($content) . '</div>';
});Такой шорткод «оборачивает» содержимое: [note]Текст с оформлением[/note]. do_shortcode() позволяет вкладывать другие шорткоды.
- в записи или странице (блок «Короткий код»);
- в блоке «HTML» вместе с текстом;
- в шаблоне через
do_shortcode('[box]'); - в виджете (если он поддерживает шорткоды);
- в описании рубрики.
Где код хранить: мини-плагин (лучше) или functions.php дочерней темы.
echo внутри шорткода. Тогда вывод появляется «не там» (в начале страницы). Функция должна возвращать строку.Практика: создать шорткод
- Создайте мини-плагин или откройте
functions.phpдочерней темы. - Зарегистрируйте шорткод через
add_shortcode(). - Обработайте атрибуты через
shortcode_atts(). - Экранируйте все данные при выводе.
- Проверьте вывод в записи.
- Добавьте стили класса в свою таблицу стилей.
- Проверьте на мобильном и с клавиатуры.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Код виден как текст | шорткод не зарегистрирован | проверить add_shortcode |
| Вывод «вверху страницы» | использован echo |
вернуть строку |
| Атрибуты не работают | не обработан $atts |
shortcode_atts() |
| Уязвимость XSS | нет экранирования | esc_* функции |
Проверьте себя
Вопросы и ответы
Да, если внутри использовать do_shortcode($content). Без этого вложенный код останется текстом.
В мини-плагине (сохранится при смене темы) или в functions.php дочерней темы. Не в родительской теме.
Да, есть блок «Шорткод», куда вставляют код. Также можно вставлять шорткод прямо в блок «HTML».
Дайте разметке классы и опишите их в CSS темы или в «Дополнительных стилях». Так вывод оформляется системно.
Итоги
- Шорткод регистрируют через
add_shortcode(). - Функция возвращает строку, а не выводит её.
- Атрибуты обрабатывают
shortcode_atts(), данные экранируют. - Код храните в мини-плагине или дочерней теме.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.