15 февраля 2010
No Comments

Дело № 1: Улучшаем внешний вид списка связанных постов

Существует очень удобный плагин Related Posts для вывода связанных постов с использованием тегов, однако не всегда устраивает внешний вид при выводе в конце поста. Чтобы добиться нужного вида пропишем новые классы в файле стилей задействованной темы.
Обычно это файл wp-content/themes/название_темы/style.css
Считаем, что плагин Related Posts уже установлен в каталоге Plugins нашего сайта и подключен через админку блога
Сначала зайдем в настройки Related Post: меню Настроки -> Related Post

wordpress настройка

В настройках устанавливаем:

  • Related Post Title: Статьи по теме
  • Related Posts Title Tag:    <div>
  • ставим галочку Auto Insert Related Posts? –  для автоматической вставки связанных постов
  • No Related Post Text: Нет статей по теме

Save changes: для сохранения настроек

wordpress настройка

После этого идем в список готовых постов (статей):  Записи -> Редактировать
Открываем любой пост и жмем кнопку Предпросмотр. Откроется новая вкладка браузера по умолчанию. В ней жмем CTRL+F. Вводим в строку поиска: статьи по теме
Находим следующий код:

...<div  class="related_post_title">Статьи по теме</div><ul class="related_post"><li>Нет статей по теме</li></ul> ...

Значит нам нужно переопределить классы

  • related_post_title – для настройки отображения заголовка
  • related_post – для настройки отображения списка связанных постов

Открываем файл wp-content/themes/название_темы/style.css в редакторе. В самом конце добавляем следующий код:

/* выставляем параметры для заголовка */
.related_post_title {
	font-size: 24px;/*размер шрифта побольше,для выделения на фоне общего текста */
        font-weight: bold;/*жирный шрифт*/
        color: #cc5468; /* цвет заголовка */

	line-height: 150%;/*межстрочный интервал,чтобы текст не сливался */
}
/*выставляем параметры списка постов*/
.related_post  {
	font-size: 14px;/*или укажите размер как вам надо*/
}

.related_post li {
	line-height: 180%;/*интервал между строками списка постов*/
}

Не забывайте про ведущую точку в имени класса.
Для настроек под свои нужды используйте http://htmlbook.ru/ для получения справки по HTML&CSS.

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

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

Статьи по теме
Статья оказалась полезной? Подпишись на RSS рассылку или следуй за мной на твиттере @wpstarter или по этой ссылке wpstarter

Рубрика: настройка WordPress, работа с файлом style.css


Оставьте комментарий(поставьте галочку "Я не робот")

Я не робот.