Как добавить пользовательские CSS-классы к тегу в WordPress

Question 1

Я работаю над кастомизацией своей темы WordPress и хочу добавить определённые классы к тегу <body> в зависимости от типа страницы или пользовательских условий. Как я могу изменить тег <body>, чтобы включить пользовательские классы с помощью функции WordPress? Мне нужно редактировать файл functions.php или существует встроенный фильтр для этого?

Question 2

Для этой цели используйте body_class, который позволяет изменять (добавлять или удалять) CSS классы для тега body.

С помощью функции is_singular() вы можете проверить текущий тип поста. Если вы хотите протестировать что-то другое, здесь вы найдёте несколько полезных функций, называемых условными тегами.

Код следует поместить в файл functions.php.
Если вы модифицируете тему, созданную кем-то другим, лучше создать дочернюю тему. Это позволит вам обновлять тему в дальнейшем, не теряя ваших модификаций.

add_filter( 'body_class', 'body_custom_css', 10, 2 );

function custom_body_class( $classes, $css_class )
{
   // Добавить класс, если post_type - "foo" ИЛИ "bar"
   if ( is_singular( array( 'foo', 'bar' ) ) ) {
      $classes[] = 'foobar-class';
   }
   return $classes;
}

Question 3

Поскольку у меня недостаточно “репутации”, чтобы комментировать приведённый выше код в этом стеке, следует отметить всем, кто последует, что код выше (is_singular от nmr) не будет работать по нескольким причинам. Мне нравится, как Уmesh представил add_filter, так как параметр $css_class не нужен для этой цели.

Вот рабочая модель кода:

add_filter( 'body_class', 'custom_body_class', 10, 2 );

function custom_body_class( $classes, $css_class ){
   // Добавить класс, если post_type - "post" ИЛИ "page"
   if ( is_singular( array( 'post', 'page' ) ) ) {
      $classes[] = 'page-post-class-name-to-add';
   }
   return $classes;
}

Вышеупомянутые исправления также меняют foo и bar на что-то более прямо относящееся к применению классов и типов постов в методе.

Вы также можете разбить проверку на несколько if операторов следующим образом (этот код также меняет расположение add_filter и удаляет лишние параметры, которые не нужны):

function custom_body_class( $classes ){
   // Добавить класс, если post_type - "post"
   if ( is_singular( array( 'post' ) ) ) {
      $classes[] = 'post-class-name-to-add';
   }
   // Добавить класс, если post_type - "page"
   if ( is_singular( array( 'page' ) ) ) {
      $classes[] = 'page-class-name-to-add';
   }
   // Добавить класс, если post_type - пользовательский тип "news"
   if ( is_singular( array( 'news' ) ) ) {
      $classes[] = 'news-class-name-to-add';
   }
   return $classes;
}

add_filter( 'body_class', 'custom_body_class' );

Стоит также отметить, что как is_singular(), так и is_page() будут возвращать true, если вы используете статическую страницу в качестве главной (настройки чтения). В этом случае вам, вероятно, следует использовать is_front_page(), чтобы определить, добавлять ли пользовательский класс только к главной странице.

Question 4

Пожалуйста, найдите ниже детали для добавления пользовательских классов к тегу <body>:

is_page('about') - Страница "О нас"
is_singular('custom_post_type') - Одиночная страница - пользовательский тип поста
is_user_logged_in() - пользователь вошел в систему
is_front_page() - На этой странице отображается главная

То же самое с использованием других страниц

function add_custom_body_classes($classes) {
    // Добавить класс на конкретной странице
    if (is_page('about')) {
        $classes[] = 'about-page';
    }

    // Добавить класс для пользовательского типа поста
    if (is_singular('custom_post_type')) {
        $classes[] = 'custom-post-type-class';
    }

    if (is_user_logged_in()) {
        $classes[] = 'logged-in-user';
    }

    if (is_front_page()) {
        $classes[] = 'home-page-class';
    }

    return $classes;
}

add_filter('body_class', 'add_custom_body_classes');

Мы отредактировали functions.php. Мне нужно добавить пользовательский код в файл functions.php вашей темы и использовать фильтр body_class:

Question 5

body_class – это то, что вам нужно. Вы можете использовать его для простого добавления классов к тегу <body>.

function my_theme_body_classes() {

    if (is_single()) {
        $classes[] = 'single-class';
    }

     if (get_post_type() === 'book') {
        $classes[] = 'book-class';
    }

    return $classes;
}

add_filter('body_class', 'my_theme_body_classes');

Просто используйте точные условия для добавления классов к тегу <body>.

Как добавить пользовательские CSS-классы к тегу в WordPress

Вопрос или проблема

Ответ или решение

Пояснение кода: