Хук body_class в WordPress позволяет изменять список CSS-классов, которые добавляются к тегу <body> в HTML. Это мощный инструмент для кастомизации стилей и добавления условий, основанных на типах страниц, роли пользователя и других параметрах. В этой статье мы разберем, как использовать body_class, и приведем примеры различных вариантов добавления и удаления классов, чтобы сделать ваш сайт более гибким и адаптивным.
apply_filters( ‘body_class’, string[] $classes, string[] $css_class )Хук body_class фильтрует массив CSS-классов, которые применяются к тегу <body>. Это дает возможность добавлять уникальные классы на основании условий, таких как текущая страница, шаблон, роль пользователя, устройство и т.д.
Параметры
$classes(массив строк): Массив CSS-классов, применяемых к<body>.$css_class(массив строк): Дополнительные классы, переданные в функцииget_body_class()илиbody_class().
Пример базового использования
add_filter( 'body_class', 'custom_body_classes', 10, 2 );
function custom_body_classes( $classes, $css_class ) {
// Добавьте кастомные классы
$classes[] = 'my-custom-class';
return $classes;
}
В данном примере my-custom-class добавляется к тегу <body> на всех страницах сайта.
Добавление классов в зависимости от типа страницы
Этот пример добавляет классы на основе различных условий страницы, таких как главная страница, отдельные записи и определенные шаблоны.
add_filter( 'body_class', 'conditional_body_classes', 10, 2 );
function conditional_body_classes( $classes, $css_class ) {
if ( is_home() ) {
$classes[] = 'home-page';
}
if ( is_single() && has_category( 'special' ) ) {
$classes[] = 'single-special';
}
if ( is_page_template( 'custom-template.php' ) ) {
$classes[] = 'custom-template-page';
}
return $classes;
}
Теперь home-page будет добавлен на главной странице, single-special на страницах записей с категорией «special», и custom-template-page для страниц с определенным шаблоном.
Добавление классов для устройств
Если необходимо учитывать тип устройства (мобильное или настольное), можно использовать встроенную функцию wp_is_mobile().
add_filter( 'body_class', 'device_specific_body_class' );
function device_specific_body_class( $classes ) {
if ( wp_is_mobile() ) {
$classes[] = 'mobile-device';
} else {
$classes[] = 'desktop-device';
}
return $classes;
}
Теперь для пользователей мобильных устройств будет добавлен класс mobile-device, а для настольных компьютеров — desktop-device, что позволит применять уникальные стили для разных устройств.
Добавление классов для роли пользователя
Добавление классов на основе роли пользователя позволяет изменять отображение страниц в зависимости от прав доступа.
add_filter( 'body_class', 'user_role_body_class' );
function user_role_body_class( $classes ) {
if ( current_user_can( 'administrator' ) ) {
$classes[] = 'admin-user';
} elseif ( current_user_can( 'subscriber' ) ) {
$classes[] = 'subscriber-user';
}
return $classes;
}
В результате у администратора появится класс admin-user, а у подписчика — subscriber-user. Это удобно для применения CSS-стилей, ориентированных на роль пользователя.
Замена одного класса на другой
Иногда может понадобиться заменить один класс другим. Например, если плагин добавляет нежелательный класс, можно его заменить.
add_filter( 'body_class', 'replace_unwanted_class' );
function replace_unwanted_class( $classes ) {
foreach ( $classes as $index => $class ) {
if ( 'unwanted-class' === $class ) {
$classes[ $index ] = 'replaced-class';
}
}
return $classes;
}
Здесь unwanted-class будет заменен на replaced-class, что может быть полезно для решения проблем с отображением или блокировщиками рекламы.
Удаление определенного класса
В некоторых случаях важно удалить конкретный класс, чтобы избежать конфликтов стилей или нежелательных эффектов.
add_filter( 'body_class', 'remove_specific_body_class' );
function remove_specific_body_class( $classes ) {
if ( ( $key = array_search( 'remove-this-class', $classes ) ) !== false ) {
unset( $classes[ $key ] );
}
return $classes;
}
Здесь класс remove-this-class будет удален из массива классов, что позволит исключить его применение.
Заключение
Хук body_class предоставляет множество возможностей для настройки стилей WordPress. Используя его, вы можете добавлять или удалять CSS-классы для <body>, адаптируя страницы в зависимости от условий, устройства, роли пользователя или других параметров. Такой подход позволяет более гибко управлять отображением сайта и улучшать пользовательский опыт.