WordPress Body Class 101 Съвети и трикове за разработчици на теми
Много често дизайнерите на теми измислят нова функционалност. Те търсят фантастични WordPress филтри и кукички, за да свършат работата, когато всичко, от което наистина се нуждаят, е най-простият CSS. WordPress генерира много CCS класове по подразбиране. (Cheat sheet за стандартни CSS стилове). Една област на тези CSS класове е стилът на класа body. В тази статия ще обясним WordPress body class 101 и ще споделим някои полезни съвети и трикове за начинаещи дизайнери на теми.
Какво е WordPress Body Class?
Добавяйки този малък елемент, вие си давате пространство за въртене, за да промените лесно облика и усещането на всяка страница с CSS. В зависимост от вида на страницата, която се зарежда, WordPress автоматично добавя подходящия клас. Например, ако сте на страница с архив, WordPress автоматично ще добави архивния клас към елемента body, ако възнамерявате да го използвате. И същото важи за всяка страница. Ето няколко примера за общи класове, които WordPress може да добави:
Как да използвате WordPress Body Class
В повечето случаи тялото на WordPress е най-простото решение, което дизайнерите на теми игнорират. Включително и нас. Преди около година трябваше да стилизираме елемент от менюто на WordPress, който беше само на определена страница. Решихме да се впуснем по-дълбоко в същността на проблема и да намерим филтър, за да добавим специален навигационен клас към елемента от менюто, който ще бъде добавен с помощта на условни инструкции. Например, ако това е страница за публикации, добавете класа "Блог" към елементите на менюто. След като прекарахме много време в изучаване на всичко за него и написахме статия за него, един от нашите потребители ни посочи, че можем да го направим просто, като използваме съществуващклас на тялото:
Забележка: Методът използва класа body .single, който се добавя към всички страници с публикации.
Никога досега не сме се чувствали толкова глупаво. И оттогава винаги проверяваме дали е възможно да решим проблема с помощта на класа на тялото, преди да започнем да изучаваме проблема по-подробно.
Да вземем друг пример. Веднъж един от потребителите попита как да промени логото на сайта в зависимост от заглавието на сайта. Повечето шаблони, включително този, зареждат логото с CSS (#header .logo). Предложихме му да използва класа body .category-slug, за да промени логото, както следва:
Този новоизсечен дизайнер на теми също беше изненадан от това просто решение. Надяваме се, че сега разбирате как можете да използвате класа body във вашите теми. Но изчакайте, инструментът става много по-мощен, защото има начин да добавяте произволни класове към тялото с помощта на филтри. Нека да видим как да го направим.
За WooCommerce това решение ще изглежда така:
Код за functions.php:
Как да добавите персонализиран клас на тялото
WordPress има филтър, който можете да използвате, за да добавите персонализирани класове тяло, ако е необходимо. Ще ви покажем как да добавите класа на тялото с помощта на филтър, преди да ви покажем специален случай.
Тъй като класовете на тялото са специфични за темата, ще трябва да напишете своя собствена функция във вашия файл functions.php:
Кодът по-горе добавя класа „test-class-name“ към етикета body на всяка страница от вашия сайт. Не е лошо, нали? Истинската сила на тази функция е в условните тагове. Можете да добавяте клас ABC само към страници с публикации и т.н. Нека вземем този пример и го приложим към реална ситуация.