Как сделать перенос строки в вордпресс

Добавил пользователь Дмитрий К.
Обновлено: 04.10.2024

В большинстве текстовых процессоров вы легко можете добавить дополнительные пустые строки. Все, что нужно для этого сделать, это нажать клавишу ENTER несколько раз. Если проявить немного смекалки, то можно изменить форматирование для создания двойной межстрочного интервала после абзацев, увеличить высоту строки и т.д. И вот, часто для новичком является проблемой такое форматирование в визуальном редакторе WordPress. Почему? Потому как в нем нет кнопок форматирования, как на пример в MS Word. В этой статье мы покажем вам как добавить одинарный / двойной межстрочный интервал в WordPress.

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

Добавляем двойной межстрочный интервал

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

Поэтому просто нажимаем Enter после строки, а затем продолжаем печатать на следующей за ней.

Просто проделав это, в зависимости от стилей вашей темы, вы должны увидеть отчетливый отступ между абзацами (т.е. двойной межстрочный интервал).

Добавляем одинарный межстрочный интервал

Теперь же, если вы набираете что-то вроде адреса, то вам вероятно понадобится добавить одну пустую строку вместо двойной.

В этом случае вам необходимо нажать клавиши SHIFT + ENTER.

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

Модифицируем высоту строки и отступы

Иногда же, даже если вы добавили корректный интервал в редакторе, он может отображаться не так, как вы хотите, именно в вашей теме. В таком случае необходимо проделать некоторые изменения в CSS. CSS — это по сути функции форматирования как в Microsoft Word.

В вашем CSS файле запускаем поиск класса .post p

Этот класс контролирует отображение абзацев в вашем контенте. После того, как вы найдете этот класс, необходимо изменить в нем значение line-height. Если такого класса не обнаружите, тогда просто создайте его.

Правило CCS, предложенное выше, изменит межстрочный интервал содержимого абзацев на 1.5em. Em — это единица измерения ширины в типографике. Мы используем класс .post, который WordPress автоматически добавляет в область контента для всех записей для того, чтобы точно применить класс к параграфам записей, и исключительно к ним.

Этот код изменяет только интервал для одной строки. Если вы хотите изменить отступ между каждым абзацем (т.н. двойной межстрочный интервал), то вам необходимо добавить padding.

Не стесняйтесь изменять значения для того, чтобы полностью удовлетворить свои дизайнерские потребности 🙂

Надеемся, что эта статья помогла вам добавить одинарный / двойной отступ в WordPress.

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

Часто в процессе редактирования контента бывает необходимо поставить несколько переводов строки подряд. Конечно, вы можете в визуальном редакторе WordPress, используя режим Текст, вставить необходимое количество HTML-тегов
. Но дело в том, что если их добавить более 2-х, то все остальные система автоматически проигнорирует.

Как в WordPress добавить 3 и больше переводов строки?

Одним из практичных выходов из этой ситуации будет создание и использование простого шорткода. Это позволит сколь угодно раз подряд вставить перевод строки.

Создание шорткода

Для создания необходимого нам шорткода будем использовать основной конфигурационный файл активной WordPress-темы – functions.php.

Если Вы не знаете, как редактировать functions.php, то в этом случае Вам поможет плагин ProFunctions.

Итак, в самый конец указанного файла следует добавить следующий PHP-код:

Теперь в окне редактирования записи или страницы следует вставить созданный шорткод [br].

На сайте это будет выглядеть следующим образом:

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

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

"Одинарные" переносы строк (но не двойные), находящиеся в тегах или в игнорируются.

В WordPress эта функция используется для фильтрации the_content() и the_excerpt() .

$foo
(строка) (обязательное) — кусок текста, который необходимо обработать.

$br
(логическое|целое) (необязательное) — если установлено true или 1 , то все "одинарные" переносы строк, оставшиеся после замены двойных на

, будут преобразованы в
.

Примеры использования

Вот скриншот того, что получилось из исходного код (Ctrl + U) в Google Chrome:

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

Если никак не обработать текст, получаемый из

, то в письме он весь становится в одну строчку, то есть абсолютно сплошной текст, который неудобно читать.

Для того, чтобы HTML-теги интерпретировались в письмах, а не выводились как текст, Content-type обязательно должен быть text/html .

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Проблема: я не могу создать пробелы и перенос строки в визуальном редакторе WordPress.

Решение:

1. Откройте папку установки WordPress.

3. Найдите следующий код и удалите/закомментируйте его.

Эта запись была размещена в WordPress туториалы и помечена как breaks, editor, line, WordPress. Добавьте в закладки постоянную ссылку.

Submit a ticket

Читайте также: