Skip to content

Всё для WordPress, веб-разработки — и не только

🛠 Как создать шорткод `[br]` для переноса строки в WordPress

🛠 Как создать шорткод `[br]` для переноса строки в WordPress

Вы верстаете пост в WordPress. Между двумя строчками нужен небольшой отступ, не новый абзац, а именно лёгкий разрыв. Добавляете два <br> подряд, переключаетесь на визуальный редактор и обратно, один исчез. Ставите пустую строку, WordPress превращает её в новый параграф с полноценным отступом. Не то.

Дело не в теме и не в настройках. За кулисами работает wpautop, встроенный фильтр WordPress, который автоматически форматирует текст и удаляет «лишние» HTML-теги. Логика полезная: избавляет от ручного wrapping-а абзацев в <p>. Но когда вы верстаете стихи, подписи к серии картинок или пошаговую инструкцию с микропаузами, wpautop мешает.

Ниже, три способа управлять разрывами строк в любом редакторе WordPress. От быстрого встроенного до полностью ручного через CSS. Каждый проверен на WordPress 6.4+, без плагинов.

💡 Быстрый обзор:

  • Зарегистрируйте шорткод [br] в functions.php, универсальный инструмент для любого количества переносов, который не трогает редактор
  • Используйте Shift+Enter при наборе текста, встроенный метод для одиночного разрыва, без единой строки кода
  • Задайте точный отступ через inline CSS, когда нужно конкретное расстояние в пикселях для акцентного разделения блоков

Видео: как создавать шорткоды WordPress с нуля

Посмотрите полный процесс, от регистрации в functions.php до вывода на фронтенде. Тот же принцип применим к любым самодельным шорткодам, не только [br].

Способ 1: шорткод [br], полный контроль над переносами

Шорткод решает проблему раз и навсегда. Один раз добавили код, и вставляете [br] где угодно: в тексте поста, в виджете, даже в заголовке через do_shortcode. Редактор не трогает содержимое квадратных скобок, фильтр wpautop его игнорирует, переносы выживают после любого количества переключений между вкладками.

Добавьте следующий код в functions.php дочерней темы. Если дочерней темы ещё нет, сначала создайте её по нашему руководству. Не хотите трогать файлы темы, поставьте плагин Code Snippets и вставьте код туда, результат тот же.

1/**
2 * Shortcode for manual line breaks in the visual editor.
3 * Usage: [br] for single break, [br][br] for double.
4 */
5function sdstudio_line_break_shortcode() {
6 return '<br />';
7}
8add_shortcode( 'br', 'sdstudio_line_break_shortcode' );

Функция sdstudio_line_break_shortcode возвращает HTML-тег <br />, а add_shortcode регистрирует шорткод [br], WordPress заменяет его этим тегом при выводе страницы. Префикс sdstudio_ в имени функции защищает от конфликтов: если другой плагин зарегистрирует функцию с тем же именем, сайт не упадёт.

После добавления кода в редакторе пишите так:

1Это первый абзац.
2[br]
3Это вторая строка сразу под первой.
4[br][br]
5А это — с двойным отступом.

Результат: первый и второй тексты разделены одним переносом, третий отделён двойным. WordPress обрабатывает шорткоды после фильтра wpautop, поэтому автоформатирование их не затрагивает.

Название br выбрано для краткости, но технически это риск: другой плагин или тема могут зарегистрировать свой [br]. На практике конфликты почти не встречаются. Если заметили странное поведение, переименуйте, например, на [sd_br].

Перед правкой functions.php сделайте резервную копию файла через FTP или файловый менеджер хостинга. Если после изменений сайт перестал открываться, загрузите сохранённый оригинал обратно, всё заработает.

Способ 2: Shift+Enter, встроенный метод без кода

Если нужен одиночный перенос и возиться с кодом не хочется, зажмите Shift и нажмите Enter в визуальном редакторе.

Курсор перейдёт на следующую строку внутри того же абзаца. В HTML это тот же <br>, только WordPress вставляет его автоматически. Обычный Enter создаёт новый абзац (<p>), а Shift+Enter, именно разрыв строки без отступа.

Минус метода: работает только для одного переноса. Два Shift+Enter подряд WordPress склеит в один <br>, а три, превратит в новый абзац. Если между строками нужен заметный вертикальный отступ, переходите к способу 3.

Способ 3: inline CSS для точного отступа в пикселях

Когда ни шорткод, ни Shift+Enter не дают нужного расстояния, задайте отступ напрямую через атрибут style.

Переключитесь на вкладку «Текст» в правом верхнем углу классического редактора:

Вкладка «Текст» в классическом редакторе WordPress

Найдите абзац, после которого нужен отступ. Оберните его в теги <p> и добавьте margin-bottom:

1<p style="margin-bottom: 100px;">
2Это абзац, после которого будет отступ в 100 пикселей.
3</p>
4<p>А это следующий абзац — с заметным промежутком.</p>

Значение 100px замените на своё. Чем больше число, тем шире промежуток. Для отступа сверху используйте margin-top. Можно комбинировать: <p style="margin-top: 50px; margin-bottom: 80px;">.

Способ удобен для единичных случаев, акцентного разделения смысловых блоков внутри конкретного поста. Но вставлять такой код в каждый абзац неудобно. Для системного применения вернитесь к шорткоду из способа 1.

⁉️🤔 Частые вопросы

Почему WordPress удаляет мои <br> при переключении между вкладками редактора?

Визуальный редактор TinyMCE при переключении на вкладку «Визуально» заново обрабатывает HTML и удаляет теги, которые считает лишними. Шорткод [br] эта чистка не затрагивает: он расшифровывается в <br> только при выводе на фронтенде, а в редакторе остаётся обычным текстом в квадратных скобках. Поэтому шорткод надёжнее прямого HTML, ваши переносы переживут любое количество переключений между вкладками.

Можно ли использовать для вертикальных отступов?

Технически да, но это плохая практика. Несколько подряд выглядят неопрятно, путают скринридеры и разъезжаются на мобильных экранах. Для пустого пространства используйте CSS-отступы (способ 3), а оставьте для связки слов, которые нельзя разрывать переносом, например, «WordPress 6.4». Для вертикальных промежутков неразрывный пробел не предназначен.

Работает ли [br] в редакторе Gutenberg?

Да, шорткод [br] работает в любом редакторе WordPress: и в классическом, и в блочном Gutenberg. В Gutenberg вставьте блок «Shortcode» и напишите [br]. Блок находится в категории «Widgets», если не видите его, нажмите «Browse all» и найдите через поиск. Учтите: в Gutenberg Shift+Enter тоже работает, так что для простых одиночных переносов шорткод может и не понадобиться.

Что делать, если шорткод отображается как текст, а не как перенос?

Две типичные причины. Первая: код вставлен не в тот файл. Проверьте, что функция добавлена в functions.php активной темы или дочерней темы, а не в wp-config.php или файл плагина. Вторая: шорткод находится внутри кодового блока или HTML-комментария, WordPress не обрабатывает шорткоды внутри <pre>, <code> и <!-- -->. Быстрая проверка: добавьте [br] в самое начало поста на фронтенде и посмотрите результат.

Нужно ли отключать wpautop для работы шорткода?

Нет, отключать wpautop не нужно и даже вредно: вы потеряете автоматическое форматирование абзацев на всём сайте. Шорткод [br] работает независимо от wpautop благодаря порядку обработки: WordPress применяет шорткоды после фильтра автоформатирования. Обычные абзацы продолжат форматироваться автоматически, а переносы строк вы контролируете вручную, ровно там, где нужно. Команда remove_filter('the_content', 'wpautop'), радикальная мера, после которой придётся вручную расставлять <p> по всему сайту. Мы советуем этого избегать.

Какой способ переноса строк подходит именно вам

Выбор зависит от задачи. Одного универсального решения нет, но есть чёткая логика:

Если нужно быстро и без кода, Shift+Enter. Одиночного переноса хватает в большинстве случаев: отделить подпись к картинке, разбить длинный заголовок, сделать микропаузу внутри абзаца.

Если переносов много и они повторяются, **шорткод **[br]. Настроили один раз и забыли: пишете [br] когда нужно, хоть десять раз подряд. Код в functions.php не занимает и десяти строк.

Если нужен точный отступ в пикселях для акцентного разделения, inline CSS. Пара margin-bottom: 80px даст ровно столько воздуха, сколько требует дизайн конкретной страницы. Злоупотреблять не стоит: для регулярного применения вернитесь к шорткоду.

Эти три способа закрывают все сценарии с переносами строк в WordPress. Выбирайте под задачу, и не позволяйте редактору решать за вас, где быть промежутку, а где нет.