Стилизуем записи по категориям на главной странице блога

СКАЧАТЬ ИСХОДНЫЕ ФАЙЛЫ | ПОСМОТРЕТЬ ДЕМО

Вот что должно получиться:

Крупные новостные ресурсы тщательно подходят к стилизации своих сайтов, и это помогает читателям легко различать категории новостей, потому что для каждой темы используется свой цвет.

Отличным примером служит сайт London Times, где для каждого раздела используется определенный цвет. Заголовки статей обозначены своим цветом в зависимости от темы, к которой относится публикация:

И если немного глубже исследовать сайт, то можно обнаружить, что у каждого раздела на сайте свой фирменный цвет:

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

Что вам понадобится

Для сегодняшнего урока вам понадобится:

  • рабочая площадка на WordPress;
  • редактор кода.

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

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

Создаем тему оформления

Если вы работаете с уже установленным шаблоном, то этот этап можно пропустить, в ином случае вам нужно будет создать дочернюю тему для Twenty Fifteen.

В папке сайта wp-content/themes создайте новую папку и дайте ей любое название. Я назвал ее tutsplus-style-posts-by-category.

Внутри этой папки создайте пустой CSS-файл под названием style.css, и добавьте в него следующий код:

/*
Theme Name:     Tuts+ Style Posts by Category
Theme URI:      http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684
Description:    Theme to support tuts+ tutorial on styling posts by category. Child theme for the Twenty Fifteen theme.
Author:         Rachel McCollin
Author URI:     http://rachelmccollin.co.uk/
Template:       twentyfifteen
Version:        1.0
*/

@import url("../twentyfifteen/style.css");

Здесь есть все, что нужно wordpress для создания дочерней темы оформления и импорта таблиц стилей из Twenty Fifteen. Возможно, вам следует подкорректировать информацию о шаблоне, внеся туда свое имя и описание шаблона. Теперь просто активируйте эту тему.

Импортируем данные

Если на вашем сайте уже есть записи, то пропускайте этот этап, так как здесь рассказывается о том, как импортировать тестовые записи на сайт:

  • Пройдите на страницу Theme Unit Test и скачайте предложенный xml-файл;
  • Затем, в консоли вашего сайта перейдите в раздел Инструменты > Импорт. Кликните по ссылке WordPress. Перед вами откроется окно, с помощью которого нужно будет установить предложенный плагин WordPress Importer. После завершения установки перейдите по ссылке «активировать плагин и запустить импорт», она перенесет вас на страницу работы с плагином;
  • Нажмите «Выбрать файл», и в открывшемся окне выберите только что скачанную базу тестовых записей, после чего нажмите кнопку «Загрузить и импортировать файл»;
  • Дальше следуйте инструкциям и подождите, пока WordPress завершит импорт данных.

Определяем необходимые стили

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

  • body_class() добавляется в тег body в файле шаблона header.php. Он добавляет классы в элемент body в зависимости от типа записи, которая на данный момент просматривается;
  • post_class() работает схожим образом, только применяется к записям в цикле.

Если вы работаете с собственным шаблоном и пока еще не добавляли эти теги, то необходимо сделать это. Если же вы работаете с дочерней версией темы Twenty Fifteen, то эти теги уже есть в шаблоне, поэтому дополнительно ничего делать не нужно.

Если сейчас открыть главную страницу вашего сайта в браузере, и включить просмотр HTML-кода, то вы увидите, что эти теги уже «позаботились» о нескольких классах для страницы.

Вот что я вижу, когда просматриваю главную страницу своего сайта:

Определяем необходимые стили

Тег body обозначен следующим образом:

<body class="home blog logged-in admin-bar  customize-support">

Классы home и blog говорят о том, что это главная страница сайта и основная страница блога. Я могу использовать эти классы для css главной страницы моего сайта.

Примерно такая же ситуация и в записях:

Определяем необходимые стили - 2

Выбранная мной статья обозначена следующим образом:

<article id="post-1176" class="post-1176 post type-post status-publish format-standard hentry category-markup tag-alignment-2 tag-content-2 tag-css tag-markup-2">

Все классы в этой записи отвечают за: ID записи, ее тип, статус, формат, категория и использованные теги. Все это можно использовать для определения стилизации. Для этого мы используем класс category-markup.

Стилизуем записи

Теперь, когда мы определились, какие классы нам нужны, пришло время поработать над их оформлением. Я буду краток, и лишь изменю цвет текста в заголовке каждой записи. Текст, который обозначен ссылкой в теге <h2 class="entry-title">.

Откройте таблицу стилей вашей темы оформления, и добавьте туда следующий код:

.blog .category-markup .entry-title a:link,
.blog .category-markup .entry-title a:visited {
   color: #6cd2c8;
}
.blog .category-markup .entry-title a:hover,
.blog .category-markup .entry-title a:active {
   color: #120e5b;
}

Для текста ссылки я использовал голубой оттенок и установил значение visited, а для состояний hover и active используется темно-синий цвет. Вы всегда можете изменить эти цвета так, чтобы они сочетались с вашим дизайном.

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

Стилизуем записи

Нужно добавить еще несколько цветов для других категорий блога:

.blog .category-template-2 .entry-title a:link,
.blog .category-template-2 .entry-title a:visited {
   color: #e5572f;
}
.blog .category-template-2 .entry-title a:hover,
.blog .category-template-2 .entry-title a:active {
   color: #120e5b;
}
.blog .category-media-2 .entry-title a:link,
.blog .category-media-2 .entry-title a:visited {
   color: #933bbe;
}
.blog .category-media-2 .entry-title a:hover,
.blog .category-media-2 .entry-title a:active {
   color: #120e5b;
}

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

Если хотите, можно добавить рамки к заголовкам, и изменить цвет фона:

.blog .category-markup .entry-title {
    padding-top: 0.5em;
    border-top: 2px #6cd2c8 solid;
}
.blog .category-template-2 .entry-title {
    padding-top: 0.5em;
    border-top: 2px #e5572f solid;
}
.blog .category-media-2 .entry-title {
    padding-top: 0.5em;
    border-top: 2px #933bbe solid;
}

Теперь у моих записей есть едва заметные границы, и изменился цвет текста в заголовках:

Стилизуем записи - 2

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

В завершение

Так как в шаблонах WordPress предусмотрены теги the body_class() и post_class(), у нас есть возможность применять классы стилей к определенным страницам сайта.

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

РедакцияПеревод статьи «Style Posts by Category on Your Main Blog Page»