ЗАВАНТАЖИТИ ВИХІДНІ ФАЙЛИ | ПОДИВИТИСЯ ДЕМО

Що ми будемо створювати

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

Також це можна реалізувати шляхом додавання окремого дизайну для кожного розділу сайту. Таким чином, стилі головної сторінки залежать від стилів категорій. Це можуть бути лише різні колірні схеми, або зовсім різний дизайн для кожного розділу. Можливо, з іншим логотипом або корпоративним стилем для різних підрозділів компанії.

В якості прикладу можна привести сайт 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
Версія: 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 П’ятнадцять, то ці теги вже були додані самою темою, і вам не потрібно нічого робити.

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

У цьому прикладі тег body містить класи, які повідомляють нам, до якого типу належить дана сторінка:

Ці класи кажуть, що ми знаходимося на сторінці архіву категорії, з розміткою для категорії. Клас, який нам потрібно вказати, це 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 заголовки записів мають інший колір:

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

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

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

Цей код додає додатковий відступ вище заголовка запису, а також межі того ж кольору, що і текст заголовка. Ось як з цими стилями виглядає моя сторінка архіву Template:

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

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

Заголовок архіву виводиться таким чином:

Category: Template

Posts with template-related tests

Ми повинні вказати класи 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;
}

Це змінило колір заголовка архівів:

Тепер давайте змінимо колір кордону. Додайте у файл 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» був підготовлений дружною командою проекту Сайтостроение від А до Я.