Як у WordPress додати додаткові класи в тег body

Привіт:) У цьому пості покажу, як у 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" ) ); ?>>
до змісту ↑

Класи тегу <body> в WordPress за замовчуванням

Класи зазвичай додаються до будь-якого елемента, щоб застосовувати до нього стилі CSS, або маніпулювати його вмістом за допомогою JavaScript.

Функція body_class() полегшує це завдання і автоматично додає відповідні класи в тег <body> ВордПрес-сайту.

Один із прикладів - клас logged-in, який додається у тег <body>, якщо сторінку переглядає авторизований у системі користувач. Клас logged-in не буде доданий, якщо сторінку переглядає користувач, який вийшов із системи.

Аналогічно й інші класи. Наприклад, category, archive, search, tag. Автоматично додаються, якщо користувач переглядає сторінку певного типу. Це дозволяє стилізувати вміст сторінки залежно від її типу.

Список усіх CSS-класів, які WordPress додає за замовчуванням, ви можете переглянути у коді самої функції body_class().
до змісту ↑

Наприклад, якщо потрібно змінити вигляд статей певного автора, розміщених у певній категорії.

Як додати власні CSS-класи у тег <body>

У прикладі вище свої класи ми прописували у файлі header.php, у виклику функції body_class(). Цей спосіб неуніверсальний, тому що вказані класи будуть завантажуватися завжди і скрізь. Але часто потрібно для окремих сторінок чи цілих розділів застосовувати різні класи.

У цьому випадку є 2 варіанти:

  • робити перевірку безпосередньо у файлі header.php та підставляти потрібні класи;
  • застосовувати WordPress-фільтр body_class.

Розгляну обидва.

до змісту ↑

Файл header.php

У першому випадку це буде виглядати так:

<?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;
});

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *