


Блог IT-шника
Блог IT-шника
Привіт:) У цьому пості покажу, як у WordPress можна маніпулювати тегом <body>
: змінювати базовий список CSS-класів за замовчуванням, які ВП присвоює цьому елементу, додавати свої при розробці або зміні теми ВордПресс.
У ядрі WordPress є перелік CSS-класів, які присвоюються елементу <body>
. Це дозволяє застосовувати унікальні стилі до різних розділів сайту (пост, категорія, домашня сторінка, сторінки пошуку або помилки 404).
HTML-тег <body>
зазвичай знаходиться у файлі header.php
ВордПресс-теми та завантажується на кожній сторінці. Це дозволяє динамічно визначати, яку сторінку переглядає користувач, а потім додавати відповідні CSS-класи. Виглядає так:
<body <?php body_class(); ?>>
За додавання класу відповідає WordPress-функція body_class()
.
В результаті буде приблизно такий код
<body class="post-template-default single single-post postid-1 single-format-standard logged-in admin-bar no-customize-support">
Якщо до цього списку потрібно додати свій клас, використовуйте конструкцію
<body <?php body_class( 'petrov-class' ); ?>>
У коді рядок petrov-class
замініть назву власного класу. В результаті роботи цієї функції в кінці зазначеного вище рядка буде додано CSS-клас:
<body class="post-template-default single single-post postid-1 single-format-standard logged-in admin-bar no-customize-support petrov-class">
Щоб додати декілька своїх класів:
<body <?php body_class( 'petrov-class ivanov-class sidorov-class' ); ?>>
або
<body <?php body_class( array ( "petrov-class", "ivanov-class", "sidorov-class" ) ); ?>>
до змісту ↑
Класи зазвичай додаються до будь-якого елемента, щоб застосовувати до нього стилі CSS, або маніпулювати його вмістом за допомогою JavaScript.
Функція body_class()
полегшує це завдання і автоматично додає відповідні класи в тег <body>
ВордПрес-сайту.
Один із прикладів - клас logged-in
, який додається у тег <body>
, якщо сторінку переглядає авторизований у системі користувач. Клас logged-in
не буде доданий, якщо сторінку переглядає користувач, який вийшов із системи.
Аналогічно й інші класи. Наприклад, category
, archive
, search
, tag
. Автоматично додаються, якщо користувач переглядає сторінку певного типу. Це дозволяє стилізувати вміст сторінки залежно від її типу.
Наприклад, якщо потрібно змінити вигляд статей певного автора, розміщених у певній категорії.
У прикладі вище свої класи ми прописували у файлі header.php
, у виклику функції body_class()
. Цей спосіб неуніверсальний, тому що вказані класи будуть завантажуватися завжди і скрізь. Але часто потрібно для окремих сторінок чи цілих розділів застосовувати різні класи.
У цьому випадку є 2 варіанти:
header.php
та підставляти потрібні класи;body_class
.Розгляну обидва.
до змісту ↑У першому випадку це буде виглядати так:
<?php if ( is_shop() ) { body_class( 'shop-class' ); } else { body_class(); } ?>
У коді перевіряється, чи відкрито сторінку магазину. Якщо це так, то до тегу <body>
додається ще один клас - shop-class
. Якщо ні, то вставляються лише WordPress-класи за замовчуванням. Якщо сайт багатосторінковий і має багато розділів з різним функціоналом та дизайном, то в цьому способі буде багато коду з різноманітними перевірками. У такому разі рекомендую використати другий варіант.
Спосіб дозволяє уникнути редагування header.php
. Власні класи можна додавати зі свого плагіну або файлу functions.php
.
Щоб додати свій у <body>
, використовуйте код
add_filter( 'body_class', function( $classes ) {
$classes[] = 'petrov-class';
return $classes;
});
Значення petrov-class
замініть на назву свого класу.
Якщо потрібно додати декілька класів:
add_filter( 'body_class', function( $classes ) {
$classes[] = 'petrov-class-1';
$classes[] = 'petrov-class-3';
$classes[] = 'petrov-class-3';
return $classes;
});
Додам, наприклад, клас shop-class
, якщо відкрито сторінку магазину:
add_filter( 'body_class', function( $classes ) {
if ( is_shop() ) {
$classes[] = 'shop-class';
}
return $classes;
});
Якщо потрібно вставити клас для конкретного шаблону:
add_filter( 'body_class', function( $classes ) {
if ( is_page_template( 'page-petrov.php' ) ) {
$classes[] = 'petrov-page';
}
return $classes;
});
Тут додається клас petrov-page
для файлу-шаблону page-petrov.php
.
Якщо потрібно видалити один або декілька класів:
add_filter( 'body_class', function( $classes ) {
$remove_classes = ['petrov-class-1', 'petrov-class-2'];
$classes = array_diff( $classes, $remove_classes );
return $classes;
});
Ще приклади.
Для сторінки одиничного запису до класу <body>
додати слаги рубрик (категорій), до яких він відноситься
add_filter( 'body_class', function( $classes ) {
global $post;
foreach( ( get_the_category( $post->ID ) ) as $category )
$classes[] = $category->category_nicename;
return $classes;
});
Для сторінки або посту додати їх слаг
add_filter( 'body_class', function( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
});
Додати клас із назвою браузера, який використовується відвідувачем для перегляду
WordPress автоматично визначає браузер під час завантаження, а потім тимчасово зберігає цю інформацію як глобальну змінну. Тому потрібно лише перевірити, чи був виявлений браузер, а потім його назву додати в якості класу <body>
.
add_filter( 'body_class', function( $classes ) {
global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;
if ( $is_iphone ) $classes[] = 'iphone-safari';
elseif ( $is_chrome ) $classes[] = 'google-chrome';
elseif ( $is_safari ) $classes[] = 'safari';
elseif ( $is_NS4 ) $classes[] = 'netscape';
elseif ( $is_opera ) $classes[] = 'opera';
elseif ( $is_macIE ) $classes[] = 'mac-ie';
elseif ( $is_winIE ) $classes[] = 'windows-ie';
elseif ( $is_gecko ) $classes[] = 'firefox';
elseif ( $is_lynx ) $classes[] = 'lynx';
elseif ( $is_IE ) $classes[] = 'internet-explorer';
elseif ( $is_edge ) $classes[] = 'ms-edge';
else $classes[] = 'unknown';
return $classes;
});