Как изменить отображение анонсов WordPress Часть 1

Привет! Хочешь изменить отображение записей в Wordpress? Специально для этого я написал серию статей по видоизменению анонсов статей.

Часть первая

  • Отображение анонсов.
  • Разделение между записями, с помощью элементов (рамка и полоса)

Перейти ко второй части 

  • Разделение записей при помощи фона (создание эффекта отдельных блоков для каждой записи) Часть №2

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

Как отображаются анонсы?

Анонсы могут идти друг за другом разделяясь различными элементами, либо не разделяться вообще.

Вот примеры с таким отображением записей.

zapisi_wordpresszapisi_wordpress1

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

Другой вариант отображения, когда задний фон разделяет записи между собой.

zapisi_wordpress2zapisi_wordpress3

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

Как создать разделение между записями с помощью (рамки или линии) ?

Для этого нам понадобятся файлы index.php, archive.php,  search.php, style.css просто откройте их в своем текстовом редакторе.

За отображение записей на главной странице, странице архивов и поиска отвечает специальный цикл.

Ищем следующий код во всех файлах!

Заключаем содержимое цикла в отдельный блок с классом posts, как на примере ниже

Теперь в фале style.css нужно добавить следующий код

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

zapisi_wordpress4

С ее помощью мы создаем разделение между записями.

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

Для примера я использую линию в виде маленьких точек.

http://mmechta.ru/wp-content/uploads/2014/12/dot.gif Путь до изображения точки.

Скачайте, загрузите к себе на сервер и пропишите свой путь.

Должно получиться примерно так

zapisi_wordpress5

Мы рассмотрели как можно разделить анонсы при помощи заключении их в блок с определенными стилями.  Или другими словами (Научились создавать рамки и разделяющие линии для анонсов).

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