WordPress: Отступы в абзацах

Попросили меня на одном сайте сделать отступы в абзацах, для "читабельности текста". Проблема в том, что по умолчанию на wordpress-сайтах первая строка абзаца без отступов и в стандартном текстовом редакторе нет возможности сделать отступ именно первой строки абзаца.

Как сделать в WordPress отступы в абзацах? Мне пришли в голову три варианта выхода из ситуации:

  • При редактировании текста переходить с режима "Визуально" в режим html-редактирования "Текст" и прописывать в начале абзаца несколько символов неразрывного пробела - " ". Мне этот вариант не понравился, не удобно, плюс придется на всех страницах с готовым текстом редактировать абзацы.
  • Найти плагин не стандартного редактора для wordpress, в котором есть возможность делать такие отступы в абзацах. Этот вариант я также откинул, так как не хотелось заниматься редактированием уже написанного текста, помимо того что такой плагин нужно было еще найти.
  • И третий вариант - редактирование css. Для этого нужно посмотреть в каком div-блоке размещается контент записей/страниц и прописать отступ для html-тега абзаца "<p>" в этих блоках. Этот вариант мне понравился больше всего - он наименее трудоемкий, плюс даже не нужно будет заниматься редактированием уже опубликованного текста.

Опишу по подробней последний вариант.

Как узнать в каком div-блоке находиться текст? В браузере chrome нажимаем правой кнопкой мыши на любом нужном абзаце и в контекстном меню выбираем пункт "Просмотр кода элемента", и возюкаем мышкой снизу вверх по раскрывшимся div-блокам. Когда на странице подсветится  именно та область в которой находиться только содержимое ваших записей - то это и есть тот div-блок. На текущем блоге это был <div class="entry">, на сайте клиента это был <div id="right">.

Где и как редактировать css-файл? В админке WordPress переходим в "Темы -> редактор", в правом верхнем углу выбираем нужную тему и в правом меню-списке-файлов выбираем файл "style.css".  В этом файле прописываем следующий код, покажу на примерах:

Для <div class="entry"> добавляем строку:  .entry p {text-indent: 2em;}

Для <div id="right"> добавляем строку:  #right p {text-indent: 2em;}

Обратите внимание, если у вас div class, то строка начинается с точки, если у вас div id, то строка начинается с решетки.

Вот и все - жмем "обновить файл". Если сделано все правильно, то все абзацы на сайте в указанных блоках будут с отступом.

Понравилось? =) Поделись с друзьями:

Обсуждение записи “WordPress: Отступы в абзацах”

  1. Антон says:

    Здравствуйте!Помогите,пожалуйста,сделать красную строку в теме вордпресса UU2014.Если не затруднит,максимально подробно,т.к. первый раз сталкиваюсь с ведением блога :)Спасибо.

  2. Darth Meheelos says:

    Большое спасибо!
    Полдня искал, что дописать в код Заголовка, что бы положение осталось right, но при этом немного left ))))
    Тупо добавил твой

     

    Сразу после текста  — и О ЧУДО!!! Алилуйя!!!

    — Твой первый вариант хорош тех, кому не надо править МНОГО БЛОКОВ, а надо чуть-чуть сместить одно — два слова!

  3. Darth Meheelos says:

    я вот это чудо имел в виду! — «&_n_b_s_p;»
    отредактировано elimS: без нижних прочерков. Автозамена съедает =)

  4. Владимир Демянович (elims.org.ua) says:

    Пожалуйста =)

Обсудить