Функция body_class() в WordPress с примерами

Доступна с версии: 2.8

Раздел: Тема

Функция body_class() используется для вывода CSS-классов, относящихся к текущей странице или посту. Предназначена для использования в теге <body> и помогает разработчикам тем эффективно применять CSS-селекторы для стилизации разных типов страниц и состояний сайта.

body_class() выводит список классов, которые можно использовать для стилизации страниц в зависимости от их типа, статуса пользователя и других параметров. Эта функция автоматически добавляет соответствующие классы, такие как home, single, page, logged-in и многие другие.

body_class( string|string[] $css_class = '' );

Параметры

$css_class(string|array, необязательный): Дополнительные классы, которые вы хотите добавить к списку классов <body>. Можно передать строку с классами, разделенными пробелом, или массив классов.
- По умолчанию: ''

Возвращаемое значение

null: Функция не возвращает значение, а выводит список классов непосредственно в HTML-код.

Использование

Функцию body_class() следует использовать внутри тега <body> в вашем файле header.php или в другом соответствующем месте темы:

<body <?php body_class(); ?>>

Список возможных классов

Функция body_class() может выводить различные классы в зависимости от того, на какой странице находится пользователь, авторизован ли он, используется ли определенный шаблон страницы и других условий.

Основные классы:

home — Главная страница сайта (условный тег is_front_page()).
blog — Страница блога (условный тег is_home()).
archive — Страница архива (условный тег is_archive()).
search — Страница результатов поиска (условный тег is_search()).
single — Одиночная запись (условный тег is_single()).
page — Страница (условный тег is_page()).
category — Страница категории (условный тег is_category()).
tag — Страница метки (условный тег is_tag()).
author — Страница автора (условный тег is_author()).
logged-in — Пользователь авторизован (функция is_user_logged_in()).
admin-bar — Отображается админ-бар (функция is_admin_bar_showing()).
error404 — Страница 404 ошибки (условный тег is_404()).
rtl — Направление текста справа налево (функция is_rtl()).

Дополнительные классы:

page-id-{ID} — Идентификатор страницы.
postid-{ID} — Идентификатор записи.
category-{slug} — Слаг категории.
tag-{slug} — Слаг метки.
author-{nicename} — Имя автора.
paged — Наличие пагинации.
custom-background — Используется настраиваемый фон.
wp-custom-logo — Установлен пользовательский логотип.

Пример 1: Базовое применение

Вставьте следующий код в ваш файл header.php внутри тега <body>:

<body <?php body_class(); ?>>

Это добавит соответствующие классы к тегу <body>, например:

<body class="home page page-id-2 logged-in admin-bar">

Пример 2: Добавление дополнительных классов

Вы можете добавить свои собственные классы, передав их в качестве параметра функции:

<body <?php body_class( 'my-custom-class another-class' ); ?>>

Результат:

<body class="home page page-id-2 logged-in admin-bar my-custom-class another-class">

Пример 3: Добавление классов через фильтр `body_class`

Если вы хотите добавить классы динамически или при определенных условиях, вы можете использовать фильтр body_class. Добавьте следующий код в файл functions.php вашей темы:

add_filter( 'body_class', 'my_custom_body_classes' );
function my_custom_body_classes( $classes ) {
    if ( is_page_template( 'template-custom.php' ) ) {
        $classes[] = 'custom-template';
    }
    if ( is_singular( 'product' ) ) {
        $classes[] = 'product-page';
    }
    return $classes;
}

В этом примере мы добавляем класс custom-template, если используется определенный шаблон страницы, и класс product-page, если мы находимся на странице товара.

Пример 4: Добавление ярлыка категории записи в классы

Вы можете добавить слаг (ярлык) категории записи в классы <body> на страницах записей:

add_filter( 'body_class', 'add_category_slug_body_class' );
function add_category_slug_body_class( $classes ) {
    if ( is_single() ) {
        global $post;
        $categories = get_the_category( $post->ID );
        if ( ! empty( $categories ) ) {
            foreach ( $categories as $category ) {
                $classes[] = 'category-' . $category->slug;
            }
        }
    }
    return $classes;
}

Пример 5: Добавление имени родительской страницы в классы

Если вы хотите добавить слаг родительской страницы в классы <body> на дочерних страницах:

add_filter( 'body_class', 'add_parent_slug_body_class' );
function add_parent_slug_body_class( $classes ) {
    global $post;
    if ( is_page() && $post->post_parent ) {
        $parent = get_post( $post->post_parent );
        $classes[] = 'parent-page-' . $parent->post_name;
    }
    return $classes;
}

Пример 6: Добавление класса при отображении сайдбара

Если вы хотите добавить класс, когда на странице отображается сайдбар:

add_action( 'get_sidebar', 'set_sidebar_body_class' );
add_filter( 'body_class', 'add_sidebar_body_class' );

function set_sidebar_body_class( $name = '' ) {
    static $classes = array();
    $classes[] = 'with-sidebar';
    if ( $name ) {
        $classes[] = 'sidebar-' . $name;
    }
    // Сохраняем классы в глобальной переменной
    $GLOBALS['sidebar_classes'] = $classes;
}

function add_sidebar_body_class( $classes ) {
    if ( isset( $GLOBALS['sidebar_classes'] ) ) {
        $classes = array_merge( $classes, $GLOBALS['sidebar_classes'] );
    }
    return $classes;
}

Примечания

Удаление классов: Если вы хотите удалить определенные классы из списка, вы можете сделать это через фильтр body_class:

add_filter( 'body_class', 'remove_body_classes' );
function remove_body_classes( $classes ) {
    // Удаляем класс 'class-to-remove'
    $classes = array_diff( $classes, array( 'class-to-remove' ) );
    return $classes;
}

Использование с условными тегами: Вы можете комбинировать условные теги WordPress для более точного определения, когда добавлять или удалять классы.

Заключение

Функция body_class() является важным инструментом для разработчиков тем WordPress. Она позволяет добавлять различные классы к тегу <body>, что облегчает стилизацию страниц в зависимости от их типа, состояния пользователя и других параметров. Используя дополнительные параметры и фильтры, вы можете расширять функциональность и настраивать классы под свои нужды.

Стартовая премиум тема для WordPress

Демо импорт тестового контента в 1 клик.

SEO оптимизированный и валидный код.

Множество готовых стартовых сайтов.

Лучшая документация и поддержка.

Опции персонализации контента.

Креативный и современный дизайн.

Тема для WordPress

Функция body_class() в WordPress с примерами

Список возможных классов

Основные классы:

Дополнительные классы:

Пример 1: Базовое применение

Пример 2: Добавление дополнительных классов

Пример 3: Добавление классов через фильтр body_class

Пример 4: Добавление ярлыка категории записи в классы

Пример 5: Добавление имени родительской страницы в классы

Пример 6: Добавление класса при отображении сайдбара

Примечания

Заключение

Стартовая премиум тема для WordPress

Дополнительно по: Тема

header_image()

is_header_video_active()

register_nav_menu()

register_nav_menus()

register_theme_directory()

remove_theme_mods()

remove_theme_support()

search_theme_directories()

set_theme_mod()

single_month_title()

the_custom_header_markup()

the_custom_logo()

the_header_video_url()

unregister_nav_menu()

wp_body_open()

wp_custom_css_cb()

wp_get_archives()

wp_get_document_title()

wp_get_themes()

wp_nav_menu()

wp_robots()

wp_site_icon()

wp_title()

get_theme_root()

get_theme_mod()

get_template()

get_stylesheet()

get_query_template()

get_page_templates()

get_page_template()

get_header_video_url()

get_header_textcolor()

get_header_image_tag()

get_header_image()

get_custom_logo()

get_custom_header_markup()

current_theme_supports()

body_class()

bloginfo()

add_theme_support()

get_theme_file_path()

get_theme_file_uri()

get_theme_root_uri()

load_template()

locate_template()

wp_get_theme()

get_template_part()

get_template_directory_uri()

get_template_directory()

get_stylesheet_uri()

get_stylesheet_directory_uri()

get_parent_theme_file_uri()

get_parent_theme_file_path()

get_stylesheet_directory()

get_search_form()

comments_template()

get_sidebar()

get_header()

get_footer()

Пример 3: Добавление классов через фильтр `body_class`