Великі портали новин часто використовують різні стилі оформлення для виділення розділів і рубрик сайту. Найчастіше використовується різний колір для кожного розділу.
Завантажити вихідні | Подивитись демо
Хорошим прикладом є сайт Лондонські часи, який використовує різні кольори для кожного розділу. Ці кольори виводяться на головній сторінці в банерах над кожним постом, як показано на скріншоті:
Дивіться також:
- Оформляємо сторінку авторизації WordPress на власний смак
- Різна структура теми оформлення для різних рубрик в WordPress
- Як відобразити різні іконки для окремих рубрик
- Використовуємо скрипт jQuery Masonry для оформлення постів у стилі Pinterest
- Stylify Me - дивимося, які кольори, шрифти та стилі оформлення використовуються на сайті
При подальшій навігації по сайту ви спостерігатимете свій певний колір для кожного розділу:
Використання такого оформлення на вашому сайті зробить домашню сторінку привабливішою і допоможе відвідувачам швидше знайти вміст тих рубрик, які вони зазвичай читають. У цьому уроці ми покажемо вам, як змінити стилі, представлені в WordPress, щоб оформити головну сторінку в блозі за категоріями.
Що вам знадобиться
Для виконання цього уроку вам знадобиться:
- Встановлений WordPress з доступом до консолі
- Редактор коду
У прикладі ми створимо дочірню тему з теми Twenty Fifteen і редагуватимемо її оформлення.
На вашому сайті, швидше за все, вже будуть пости, тому, щоб і на нашому вони були, ми завантажимо тестовий контент WordPress.
Створення дочірньої теми
Якщо ви працюєте над власною темою, то можете пропустити цю частину статті. А ми створимо дочірню тему та працюватимемо з нею.
У папці вашого сайту WP-зміст / теми створіть нову папку. Нашу ми назвали 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: Template: twentyfifteen Version: 1.0 */ @import url("../twentyfifteen/style.css");
Це все, що знадобиться WordPress для створення дочірньої теми та імпорту стильового оформлення із Twenty Fifteen. Швидше за все, ви захочете додати своє ім'я та інші деталі замість наших, але це лише приклад.
Після цього активуйте вашу тему.
Імпорт даних
Якщо на вашому сайті вже є пости, ви можете пропустити цей розділ, в якому розповідатиметься, як імпортувати демо-дані на ваш сайт:
- Перейдіть на сайт Тема модульного тесту та скачайте xml файл, який прикріплений.
- На вашому сайті перейдіть на Інструменти → Імпорт. Натисніть на WordPress лінк.
- Виберіть файл, який ви щойно завантажили.
- Дотримуйтесь інструкцій та чекайте, поки WordPress імпортує дані.
Шукаємо потрібні стилі для змін
WordPress має кілька тегів шаблонів, які виводять класи для ваших сторінок і розміщують їх тоді, коли вони переглядаються в браузері. Наприклад:
- body_class(), який додається до тегу тіло у файл header.php: він присвоює класи елементам тіло, відповідно до типу перегляданої сторінки.
- post_class (), Який працює аналогічним чином, але використовується циклів усередині постів.
Якщо ви працюєте зі своєю темою і ще не додали ці теги шаблонів, то повинні це зробити.
Якщо ви працюєте з дочірньою темою з Twenty Fifteen, ці теги вже були додані темою Twenty Fifteen, тому вам нічого робити не потрібно.
Якщо ви відкриєте домашню сторінку вашого сайту в браузері та використовуєте консоль для розробників, щоб переглянути вихідний HTML-код, виявите, що ці теги додали купу класів на вашу сторінку.
Ось, що ми побачили, переглядаючи домашню сторінку нашого сайту:
Body-тег виводиться як:
<body class="home blog logged-in admin-bar customize-support">
Класи будинки и блозі говорять нам про те, що це домашня сторінка сайту та головна сторінка блогу. Ми можемо використовувати ці класи для вибору CSS на нашій домашній сторінці.
Щось подібне відбувається і з постом:
Стаття, яку ми вибрали, наголошується як:
<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;
}Ми використовували відтінок cyan для статусів link и visited, та navy для статусів hover и активний. Ви можете самостійно змінити ці кольори так, щоб вони вписувалися у вашу кольорову гаму.
Тепер ви можете зберегти таблицю стилів та оновити сторінку. Ви помітите, що у постів із рубрики, яку ви обрали, буде інший колір заголовків.
Тепер додамо ще кілька кольорів для інших категорій у вашому блозі:
.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;
}Тепер заголовок нашого посту має тоненький кордон та інше колірне оформлення:
Цей нехитрий прийом виділяє різні рубрики сайту для відвідувачів, але в той же час не є занадто яскравим елементом дизайну.
Висновок
Оскільки WordPress надає теги шаблонів body_class() и post_class (), стає можливим вибрати конкретну сторінку на сайті, а потім і конкретну посаду в кожній категорії для того, щоб їх окремо оформити.
У цьому уроці ви побачили, як вибирати клас, з яким ви хочете працювати, і як змінювати стиль для кожної категорії, залишаючи відвідувачам візуальні підказки про структуру вашого сайту.
Джерело: code.tutsplus.com
Коментарі до запису: 3
Чи можна дізнатися на картинці у вас що за браузер і розшершення для розробника?
Це не наша картинка, але схожа на Firefox
Це Safari