Ви верстаєте пост у 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
 */
5
function sdstudio_line_break_shortcode() {
6
    return '<br />';
7
}
8
add_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.

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

Знайдіть абзац, після якого потрібен відступ. Обгорніть його в теги <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. Вибирайте під задачу й не дозволяйте редактору вирішувати за вас, де бути проміжку, а де ні.