Как в WordPress с помощью CSS задать разные стили для разных категорий

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

Что мы будем создавать

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

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

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

Каждый раздел имеет свой цвет:

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

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

Для выполнения заданий этой статьи вам понадобится:

  • Установленная система WordPress;
  • Редактор кодов.

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

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

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

Создаем тему

Если вы работаете с собственной темой или темой, созданной во время выполнения заданий предыдущей статьи, то можете пропустить этот раздел. Иначе вам нужно создать дочернюю тему от 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 существуют несколько тегов шаблонов, которые выводят классы для страниц и записей во время их просмотра в браузере. Это:

body_class()-задается в теге body в файле header.php.

Он добавляет в элемент body классы в зависимости от типа страницы, которая просматривается.

post_class()- делает то же самое, но используется в цикле записей.

Если вы работаете с собственной темой и еще не добавили эти теги шаблона, то нужно сделать это сейчас. Как это сделать, вы узнаете из статьи по работе с классами и идентификаторами, генерируемыми WordPress.

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

Если просмотреть код одной из страниц своего сайта с помощью инструментов для разработчиков, вы увидите, что тег шаблона body_class () добавил на страницу целую кучу классов:

Определение стилей для указанных элементов

В этом примере тег body содержит классы, которые сообщают нам, к какому типу принадлежит данная страница:

<body class="archive category category-markup category-29 logged-in admin-bar no-customize-support">

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

Назначение стиля заголовков в списке архива

Мы начнем с добавления цвета заголовков записей в зависимости от категории, к которой они принадлежат. Добавьте в файл CSS своей темы следующий код:

/* заголовки записей на странице архива */
.archive.category-markup .entry-title a:link,
.blog .category-markup .entry-title a:visited {
    color: #6cd2c8;
}
.archive.category-markup .entry-title a:hover,
.blog .category-markup .entry-title a:active {
    color: #120e5b;
}

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

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

Вы можете изменить цвета в соответствии с дизайном своего сайта. Теперь сохраните файл и откройте страницу категорий в браузере. Моя страница категории Markup теперь содержит цветные заголовки записей:

Назначение стиля заголовков в списке архива

А на странице архива категории Media заголовки записей имеют другой цвет:

Назначение стиля заголовков в списке архива - 2

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

Теперь давайте установим границы. Добавьте в таблицу стилей следующий код:

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

Этот код добавляет дополнительный отступ выше заголовка записи, а также границы того же цвета, что и текст заголовка. Вот как с этими стилями выглядит моя страница архива Template:

Назначение стилей для заголовков архивов

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

Назначение стилей для заголовков архивов

Заголовок архива выводится следующим образом:

<header class="page-header">
    <h1 class="page-title">Category: Template</h1>
        <div class="taxonomy-description">
            <p>Posts with template-related tests</p>
        </div>            
</header><!-- .page-header -->

Мы должны указать классы page-header и page-title, а также классы в теге body для архива.

Добавьте в файл CSS следующий код:

.

archive.category-markup .page-header .page-title {
    color: #6cd2c8;
}
.archive.category-template-2 .page-header .page-title {
    color: #e5572f;
}
.archive.category-media-2 .page-header .page-title {
    color: #933bbe;
}

Это изменило цвет заголовка архивов:

Назначение стилей для заголовков архивов - 2

Теперь давайте изменим цвет границы. Добавьте в файл CSS следующий код:

.archive.category-markup .page-header {
    border-left: 7px solid #6cd2c8;
}
.archive.category-template-2 .page-header {
    border-left: 7px solid #e5572f;
}
.archive.category-media-2 .page-header {
    border-left: 7px solid #933bbe;
}

Теперь цвет границы изменился:

Заключение

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

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

Вы можете пойти еще дальше, например:

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

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

РедакцияПеревод статьи «Style Different Categories in Your WordPress Site Differently Using CSS»