Очень часто дизайнеры тем придумывают новый функционал. Они ищут навороченные фильтры для WordPress и хуки для выполнения задачи, в то время как им на самом деле требуется простейший CSS. WordPress по-умолчанию генерирует множество классов CCS. (шпаргалка по стандартным стилям CSS). Одной из областей этих классов CSS являются стили класса body. В этой статье мы объясним WordPress body class 101 и поделимся некоторыми полезными подсказками и фишками для начинающих дизайнеров тем.
Что такое WordPress Body Class?
Body Class (body_class) — это функция WordPress, которая предоставляет элементу body различные классы, и поэтому авторы тему могут стилизировать свои сайты достаточно эффективно с помощью CSS. Тег HTML body присутствует в большинстве случаев в вашем файле header.php, который загружается на каждой странице. При разработке темы вы можете прикрепить функцию body_class к вашему элементу body следующим образом:
<body <?php body_class($class); ?>>
Добавив этот маленький элемент, вы даете себе пространство для маневра для простого изменения внешнего вида каждой страницы с помощью CSS. В зависимости от типа загружаемой страницы, WordPress автоматически добавляет соответствующий класс. Например, если вы находитесь на странице архива, WordPress автоматически добавит класс архива к элементу body, если вы собираетесь его использовать. И так же происходит для любой страницы. Вот несколько примеров общих классов, которые WordPress может добавить:
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}
Как вы видите, имея под рукой такой мощный инструмент, вы можете полностью персонализировать вашу страницу WordPress используя всего лишь CSS. Можно настроить страницу профиля определенного автора, архив по датам и т.д. Как же и когда нужно это применять?
Как использовать WordPress Body Class
В большинстве случаев WordPress body class — это самое простое решение, которое игнорируют дизайнеры тем. Включая и нас. Около года назад нам нужно было стилизировать элемент меню WordPress, которое было только на определенной странице. Мы решили глубже вникнуть в суть проблемы и найти фильтр для добавления специального класса навигации в элемент меню, который будет добавлен с использованием условных операторов. Например, если это страница записи, тогда добавляем класс «Blog» к элементам меню. После того, как мы потратили множество времени на изучение всего того и написали статью об этом, один из наших пользователей указал нам на то, что мы могли сделать это просто, с использованием существующего класса body:
.single #navigation .leftmenublog div{display: inline-block !important;}
Примечание: способ использует класс body .single, который добавляется ко всем страницам записей.
Мы никогда не чувствовали себя так глупо прежде. И с тех пор, мы всегда проверяем, возможно ли решить поставленную задачу с помощью класса body, прежде чем начинать изучать проблему более детально.
Приведем еще один пример. Однажды один из пользователей поинтересовался способом изменять логотип сайта в зависимости от рубрики сайта. Большинство шаблонов, в том числе и его, загружают логотип с помощью CSS (#header .logo). Мы предложили ему использовать класс body .category-slug для изменения логотипа, таким вот образом:
.category-advice #header .logo{background: url(images/logo-advice.png) no-repeat !important;}
.category-health #header .logo{background: url(images/logo-health.png) no-repeat !important;}
Этот новоиспеченный дизайнер темы также удивился такому простому решению. Надеемся, что вы теперь поняли как можно использовать класс body в своих темах. Но подождите, инструмент становится многим более мощным потому как есть способ добавлять произвольные классы для body используя фильтры. Давайте посмотрим как это сделать.
Для WooCommerce это решение будет выглядеть следующим образом:
.term-toys #header .logo{background: url(logo-toys.png) no-repeat !important;}
Код для functions.php:
add_filter( 'body_class', 'output_product_cat_on_body' );
function output_product_cat_on_body( $classes ) {
if ( is_singular( 'product' ) ) {
global $post;
$terms = get_the_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term )
$classes[] = 'term-' . $term->slug;
}
return $classes;
}
Как добавить произвольный класс Body
В WordPress есть фильтр, который вы можете использовать для добавления произвольных классов body при необходимости. Мы покажем вам как добавить класс body, используя фильтр, прежде чем продемонстрировать частный случай.
В виду того, что классы body зависят от темы, вам необходимо будет написать собственную функцию в ваш файл functions.php:
function my_class_names($classes) {
// добавляем 'class-name' к массиву $classes
$classes[] = 'test-class-name';
// возвращаем массив $classes
return $classes;
}
//Теперь добавляем тестовый класс к фильтру
add_filter('body_class','my_class_names');
Код выше добавляет класс “test-class-name” к тегу body на каждой странице вашего сайта. Неплохо, да? Реальная мощь этой функции в условных тегах (conditional tags). Вы можете добавить класс АБВ только на страницы записей и т.д. Давайте возьмем этот пример и применим его к реальной ситуации.
Продолжение статьи читайте по ссылке WordPress Body Class 101: Советы и рекомендации для разработчиков темы. Часть 2
