WordPress Body Class 101 Поради та рекомендації для розробників теми
Дуже часто дизайнери тим самим вигадують новий функціонал. Вони шукають навкручені фільтри для WordPress та хуки для виконання завдання, тоді як їм насправді потрібний найпростіший CSS. WordPress за промовчанням генерує безліч класів CCS. (шпаргалка за стандартними стилями CSS). Однією з цих класів CSS є стилі класу body. У цій статті ми пояснимо WordPress body class 101 і поділимося деякими корисними підказками і фішками для дизайнерів-початківців тем.
Що таке WordPress Body Class?
Додавши цей маленький елемент, ви даєте собі простір маневру для простої зміни зовнішнього вигляду кожної сторінки за допомогою CSS. Залежно від типу сторінки, що завантажується, WordPress автоматично додає відповідний клас. Наприклад, якщо ви на сторінці архіву, WordPress автоматично додасть клас архіву до елемента body, якщо ви збираєтеся його використовувати. І так само відбувається для будь-якої сторінки. Ось кілька прикладів загальних класів, які WordPress може додати:
Як використовувати WordPress Body Class
У більшості випадків WordPress body class - це найпростіше рішення, яке ігнорують дизайнери тем. Включно з нами. Близько року тому потрібно було стилізувати елемент меню WordPress, яке було лише на певній сторінці. Ми вирішили глибше вникнути в суть проблеми та знайти фільтр для додавання спеціального класу навігації до елемента меню, який буде додано з використанням умовних операторів. Наприклад, якщо це сторінка запису, тоді додаємо клас «Blog» до елементів меню. Після того, як ми витратили багато часу на вивчення всього того і написали статтю про це, один з наших користувачів вказав нам, що ми могли зробити це просто, з використанням існуючогокласу body:
Примітка: спосіб використовує клас body .single, який додається до всіх сторінок записів.
Ми ніколи не відчували себе так безглуздо раніше. І з того часу ми завжди перевіряємо, чи можливо вирішити поставлене завдання за допомогою класу body, перш ніж починати вивчати проблему детальніше.
Наведемо ще один приклад. Якось один із користувачів поцікавився способом змінювати логотип сайту залежно від рубрики сайту. Більшість шаблонів, у тому числі його, завантажують логотип за допомогою CSS (#header .logo). Ми запропонували йому використовувати клас body .category-slug для зміни логотипу, таким чином:
Цей новий дизайнер теми також здивувався такому простому рішенню. Сподіваємося, що ви тепер зрозуміли, як можна використовувати клас body у своїх темах. Але зачекайте, інструмент стає більш потужним, тому що є спосіб додавати довільні класи для body використовуючи фільтри. Давайте подивимося, як це зробити.
Для WooCommerce це рішення буде виглядати так:
Код для functions.php:
Як додати довільний клас Body
У WordPress є фільтр, який можна використовувати для додавання довільних класів body при необхідності. Ми покажемо вам, як додати клас body, використовуючи фільтр, перш ніж продемонструвати окремий випадок.
Зважаючи на те, що класи body залежать від теми, вам необхідно буде написати власну функцію у ваш файл functions.php:
Код вище додає клас “test-class-name” до мітки body на кожній сторінці вашого сайту. Непогано, правда? Реальна міць цієї функції у умовних тегах (conditional tags). Ви можете додати клас АБВ лише на сторінки записів тощо. Давайте візьмемо цей приклад і застосуємо його до реальної ситуації.