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

Ось що повинно вийти:

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

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

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

І якщо трохи глибше дослідити сайт, то можна виявити, що у кожного розділу на сайті свій фірмовий колір:

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

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

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

Для сьогоднішнього уроку вам знадобиться:

  • робочий майданчик на WordPress;
  • редактор коду.

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

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

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

Ось що я бачу, коли переглядаю головну сторінку свого сайту:

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

Тег body позначено наступним чином:

Класи home і blog говорять про те, що це головна сторінка сайту і основна сторінка блогу. Я можу використовувати ці класи для css головної сторінки мого сайту.

Приблизно така ж ситуація і в записах:

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

Обрана мною стаття позначена таким чином:

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

Стилізуємо запису

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

.

Відкрийте таблицю стилів вашої теми оформлення, і додайте туди наступний код:

.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;
}

Для тексту посилання я використовував блакитний відтінок і встановив значення відвідали, а для станів 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.5 em;
border-top: 2px #6cd2c8 solid;
}
.blog .category-template-2 .entry-title {
padding-top: 0.5 em;
border-top: 2px #e5572f solid;
}
.blog .category-media-2 .entry-title {
padding-top: 0.5 em;
border-top: 2px #933bbe solid;
}

Тепер у моїх записів є ледь помітні кордону, і змінився колір тексту в заголовках:

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

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

На завершення

Шаблони WordPress передбачені теги the body_class() і post_class(), у нас є можливість застосовувати класи стилів до певних сторінок сайту.

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

Переклад статті «Style Posts by Category on Your Main Blog Page» був підготовлений дружною командою проекту Сайтостроение від А до Я.