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

У попередніх статтях я розповідала, як задаються різні стилі для категорій. З їх допомогою, якщо на вашому сайті існують окремі розділи для кожної категорії записів, ви можете оформити їх по-різному.

Часто можна зустріти великі ресурси, основу структури яких складають ієрархічні статичні сторінки. Чи можемо ми застосувати ті ж методи для такого сайту?

WordPress надає нам класи CSS, пов’язані зі структурою сторінок, які можна використовувати для завдання стилів розділів сторінок статичного сайту, і вони будуть виглядати зовсім по-різному.

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

Що вам знадобиться

Для виконання завдань цієї статті вам знадобиться:

  • Встановлений WordPress;
  • Редактор кодів.

Якщо у вас вже є тема, для якої ви хотіли б використовувати цей метод, ви можете працювати за її CSS і файлом функцій. Я збираюся створити дочірню тему Twenty Fifteen і редагувати таблиці стилів файл функцій створеної теми.

Швидше за все, на вашому сайті вже є записи. Для реалізації прикладу я скачаю тестові дані теми WordPress.

Створюємо тему

Якщо ви працюєте зі своєю власною темою, то можете пропустити цей розділ. У цьому розділі я розповім, як створити дочірню тему Twenty Fifteen.

У папці wp-content/themes вашого сайту створіть нову папку та виберіть для неї ім’я. Я назвала свою tutsplus-style-pages-by-section.

У цій папці створіть порожній CSS-файл під назвою style.css і додайте в нього наступний код:

/*
Theme Name: Tuts+ Style Pages by Section
Theme URI: [IMG=http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page—cms-23684
Description: Theme to support tuts+ tutorial on styling pages differently in each section of a site. Child theme for the Twenty Fifteen theme.
Author: Rachel McCollin
Author URI: [IMG=http://rachelmccollin.co.uk/
Template: twentyfifteen
Версія: 1.0
*/
@import url(«../twentyfifteen/style.css»);

У цьому файлі міститься вся інформація, необхідна WordPress, щоб створити дочірню тему і імпортувати код CSS з теми Twenty Fifteen. У файлі CSS в відповідних полях ви можете задати свої значення для імені і опису теми.

Тепер активуйте тему.

Імпорт даних

Якщо ваш сайт вже містить сторінки, ви можете пропустити цей розділ, але з неї ви можете дізнатися, як імпортуються тестові дані теми:

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

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

  • У розділі Налаштування> Читання, виберіть опції «Головна сторінка» статичну сторінку за своїм вибором. А для опції «Сторінка записів» виберіть сторінку «Блог«;
  • В розділі Зовнішній вигляд > Меню, виберіть «Всі сторінки та виберіть для нього прапорець «Меню навігації«, щоб дане меню використовувалося на сайті в якості основної навігації.

Визначення стилів для заданого елемента

WordPress використовує тег шаблону body_class () для виведення класів відповідно до типу відображуваної сторінки. Ви додаєте цей тег в файл header.php теми: тег визначає класи для елемента body в залежності від типу сторінки, яка в даний момент проглядається.

Якщо ви працюєте з власною темою, але ще не додали цей тег шаблону, то це потрібно зробити зараз. Як це зробити, ви дізнаєтеся зі статті по роботі з класами і ідентифікаторами, що генеруються WordPress.

При роботі з дочірньою темою Twenty Fifteen, ці теги автоматично.

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

Елемент body виводиться з набором класів:

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

Ми використовуємо два з цих класів, щоб вказати сторінки в різних розділах сайту: сторінки, пов’язані з ID сторінки, і батьківські сторінки.

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

Щоб вказати сторінки в розділі ієрархічного сайту, ми використовуємо два класу: ID сторінок для сторінок верхнього рівня і ID батьківської сторінки для дочірніх сторінок.

Перш за все, нам необхідно визначити ідентифікатори сторінок верхнього рівня. Для цього відкрийте кожну з них під логіном адміністратора і подивіться URL-адреси посилань. Посилання буде містити текст «post=X, де Х є унікальним ідентифікатором сторінки. Не звертайте уваги на те, що в URL-адресі значиться post («запис«), а не «page» (насправді «сторінка» — це тип записів). Використовуйте цей код для призначення стилів.

В моєму випадку сторінки верхнього рівня з дочірніми елементами мають ідентифікатори 5 і 17, а сторінки без дочірніх сторінок — 146, 701, 703, 733 і 735. Я збираюся використовувати один колір для кожного з двох ієрархічних розділів, а інший для сторінок, які не мають дочірніх елементів. Якщо ваші сторінки розбиті на розділи, ви можете використовувати різні кольори для кожного з них.

Відкрийте файл CSS своєї теми і додайте в нього наступний код:

.page-id-5 h1,
.parent-pageid-5 h1 {
color: #6cd2c8;
}
.page-id-17 h1,
.parent-pageid-17 h1 {
color: #e5572f;
}
.page-id-146 h1,
.page-id-701 h1,
.page-id-703 h1,
.page-id-733 h1,
.page-id-735 h1 {
color: #933bbe;
}

Зверніть увагу: вам потрібно буде змінити зазначені ідентифікатори записів і батьківських записів на значення ID вашого сайту.

Тепер збережіть CSS і подивіться на свій сайт. На моєму ресурсі вже використовуються різні кольори для різних розділів. Ось сторінка, яка не має дочірніх елементів:

Як задавати стилі для різних розділів сайту на основі статичних сторінок

Ось ієрархічна сторінка верхнього рівня:

Як задавати стилі для різних розділів сайту на основі статичних сторінок

А ось її дочірня сторінка:

Як задавати стилі для різних розділів сайту на основі статичних сторінок

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

По-друге, це працює тільки для дочірніх сторінок другого рівня. Жоден із стилів не буде застосований до сторінок третього і нижчого рівнів.

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

Тому нам потрібен альтернативний метод, який полягає у використанні категорій.

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

За замовчуванням WordPress не призначає категорії для сторінок, але ви можете легко змінити за допомогою функції, register_taxonomy_for_object_type(), яка детально розглянуто у статті про призначення категорій для вкладень.

Відкрийте файл functions.php своєї теми і додайте в нього наступний код:

function tutsplus_add_categories_to_pages() {
register_taxonomy_for_object_type( ‘category’, ‘page’ );
}
add_action( ‘init’ , ‘tutsplus_add_categories_to_pages’ );

Цей код додає таксономію ‘category‘ для об’єктів типу ‘page‘, тобто тепер ви можете призначати категорії для сторінок.

Але це не означає, що тег body_class() буде виводити категорії, як один з класів на сторінці з категоріями — за замовчуванням категорії для сторінок не призначаються.

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

function tutsplus_add_categories_to_body_class( $classes ) {
if ( is_page() ) {
$categories = get_the_category( $post->ID );
foreach ( $categories as $category ) {
$classes[] = ‘category-‘ . $category->slug;
}
}
return $classes;
}
add_filter( ‘body_class’,’tutsplus_add_categories_to_body_class’ );

Таким чином, ми створюємо функцію під назвою tutsplus_add_categories_to_body_class() із змінною $classes. Вона перевіряє, чи знаходимося ми на сторінці, і якщо так, то створює змінну $categories, яка містить всі категорії, до яких належить сторінка.

Після цього функція для кожної категорії додає в масив $classes slug категорії (із префіксом ‘category-‘) і повертає цю змінну. Потім, підключившись до фільтру body_class, функція додає вихідний масив міток slug до масиву класів тега шаблону body_class().

Тепер спробуйте призначити категорії для деяких сторінок, щоб розбити сайт на розділи. Я додаю категорії «Розділ 1», «Розділ 2» і «Розділ 3». Переконайтеся, що кожна сторінка належить тільки до одного розділу.

Ось як виглядають мої сторінки з призначеними категоріями в панелі адміністрування:

Як задавати стилі для різних розділів сайту на основі статичних сторінок

Далі нам потрібно призначити стилі для цільових сторінок у кожному розділі. Я не буду міняти колір заголовка, як я робила це за допомогою ієрархії сторінок. Замість цього я додам кордону.

Файл CSS своєї теми додайте наступний код, використовуючи реальні мітки slug своїх категорій і кольори на свій розсуд:

.page.category-section-1 h1 {
border-bottom: 2px solid #933bbe;
padding: 0.5 em;
}
.page.category-section-2 h1 {
border-bottom: 2px solid #6cd2c8;
padding: 0.5 em;
}
.page.category-section-3 h1 {
border-bottom: 2px solid #e5572f;
padding: 0.5 em;
}

Тепер збережіть CSS і відкрийте сторінку сайту в браузері.

Ось моя сторінка із «Розділу 1»:

Як задавати стилі для різних розділів сайту на основі статичних сторінок

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

Цей метод можна застосовувати як для сторінок, так і для записів. Наприклад, якщо ви вже встановлювали стилі для записів за допомогою категорій, ви можете легко застосувати цей метод і для статичних сторінок.

Висновок

Якщо у вас є сайт на основі ієрархічних статичних сторінок, то у вас є розділи, які ви захочете оформити в індивідуальному стилі.

З цієї статті ви дізналися два методу призначення стилів для заданих сторінок в різних розділах сайту.

Спочатку ми використовували підхід на основі ієрархії сторінок, перевага якого полягає в тому, що він змінює налаштування WordPress за замовчуванням. Але його недолік полягає в тому, що не можна призначати стилі для дочірніх елементів, розташованих на нижніх рівнях.

Потім ми дізналися, як призначати категорії сторінок, додавати категорії в тег body_class() і модифікувати CSS заданих класів, які потім виводяться WordPress.

Переклад статті «Styling Sections in a Page-Based Site Differently» був підготовлений дружною командою проекту Сайтостроение від А до Я.

ЭТО МОЖЕТ БЫТЬ ИНТЕРЕСНОЕЩЕ ОТ АВТОРА