Смещаем основной текст статьи под рисунок

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

Мне хотелось автоматизировать этот процесс, чтобы не добавлять постоянно дополнительный код во время написания статьи. И я обратил внимание на то, что тег <!—more—> всегда добавляет в статью свой код (некий блок с идентификатором ID, к которому мы переходим после нажатия на ссылку «Читать далее»). Именно над этим кодом нам и придется поработать, не пугайтесь это не труднее чем прокладка оптоволокна который вам закладывают в квартиру при подключении Интернета, я все объясню Вам быстро и подробно.


Для начала более подробно опишу проблему:
В начале каждой статьи я добавляю рисунок с выравниванием float:left. Поэтому весь последующий текст обтекает рисунок с правой стороны, но, если анонс статьи небольшой (а у меня на блоге раньше было всегда так), то при выводе всей статьи целиком основной текст следует сразу после анонса и продолжает заполнять пространство справа от рисунка, что выглядит не совсем красиво.
Чтобы расположить текст под рисунком, независимо от размера анонса, необходимо убрать влияние стиля float:left на этот текст. Для этого добавим дополнительный блок со стилем clear:both. Напомню тем, кто забыл:

Блок со стилем clear:both располагает следующие за ним объекты ниже всех плавающих блоков.

Сначала я пытался добавить новый код в шаблон темы, но так и не нашел подходящего места. Пришлось смотреть файл wp-includes\post-template.php, где и нашел код:

<span id=»more-’ . $id . ‘»></span>

Сразу же после него дописываем следующее:

<p style=»clear:both;»></p>

Вот и всё, теперь основной текст статьи будет всегда находиться под картинкой! Единственный минус всей этой операции — после каждого обновления WordPress код придется прописывать заново.

{lang: 'ru'}
Комментарии и пинги к записи запрещены.

Комментарии закрыты.

|
ЧИТАТЬ БЛОГ / ПОСЛЕДНИЕ НОВОСТИ - 1.. 2.. 3.. 4..
© 2011-2014 Reall-Rabota.ru / Seo-блог Алексея Анисимова. Все права защищены.
Полное или частичное использование материалов без согласия автора и прямой индексируемой гиперссылки на сайт Reall-Rabota.ru запрещено.

Яндекс.Метрика