Янв

Функция body_class() в WordPress — выводим классы в body: алгоритм использования, примеры кода

Давайте рассмотрим одну интересную функцию body_class(), которая добавляет в тег <body> вашего шаблона целый ряд специальных классов. Ее результат зависит от того какая страница в данный момент генерируется, например, для единичной записи увидите значения «single single-post postid-хххх«, для категорий — «category category-хх» и т.п.

Применяя этот механизм и CSS стили, вы сможете задавать оригинальное оформление разным элементам сайта без загромождения кода условными операторами. Сегодня разберем все нюансы темы и посмотрим парочку полезных примеров. Оглавление:

Синтаксис и общая инфа о body_class.
Алгоритм использования функции.
Добавление стилей: в шаблоне и через фильтр.
Дополнительные сниппеты.

Классы и синтаксис body_class():

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

Здесь есть только один не обязательный параметр $class, который может содержать перечень пользовательских классов для добавления к стандартным выводимым.

Если в вашем шаблоне имеется данная функция, то в результирующем HTML коде страницы увидите что-то вроде:

По логике, в принципе, понятно, что в теге body отображаются классы используемого шаблона (post-template-default), единичного поста (single single-post), формата записи (single-format-standard) и показатель залогиненного юзера (logged-in).

На самом деле таких значений body_class в WordPress очень много. Приведу парочку основных примеров, где они выводятся:

На специфических типах страниц: главной, поиске, прикрепленных файлах, 404 ошибке — home, blog, search, error404, attachment, search-results, attachmentid-{id} и др.
В постах блога (с указанием типов и ID конкретных записей) — single-post, single-format-{$post_format}, single-{$post_type}, postid-{ID}.
В обычных страницах, где кроме ID и шаблона можно заменить информацию о родительстких/дочерних элементах: page, page-id-{ID}, page-child, parent-pageid-{ID}, page-template-{name}.
В архивах категорий, тегов, дат, авторов: category, category-{id/slug}, tag, tag-{id/slug}, author, author-{nicename}, date, term-{id/slug} и т.п.
При постраничном разбиении: есть главные классы paged paged-{number}; отдельные варианты для каждой сущности category-paged-{number}, tag-paged-{number}, search-paged-{number}, author-paged-{number}, а также значения single-paged-{number}, page-paged-{number} при разбиении записей на страницы.

Принцип использования body_class в WordPress

Рассмотрим самый простой способ внедрения функции: идем в файл шаблона header.php, находите тег body и заменяете его на следующую конструкцию:

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

Сохраняете. Теперь, если посмотреть HTML код сайта, то увидите вывод соответствующих классов. Откроем какую-то страницу (page) и с помощью CSS изменим базовый шрифт на зеленый курсив.

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

body.page-id-878 #content p {
    font-style: italic;
    color: green;
}

Он сработает для текстового наполнения в блоке контента только(!) на странице с ID = 878. Помимо этого допускается также обработка следующих вариантов:

.page {
	/* стили для всех элементов типа page на сайте */
}
 
.page-template-default {
	/* стили шаблона страниц по умолчанию */
}

Добавление своих классов

Допустим, вы хотите дописать к базовым значениям body свои собственные. Это может быть полезно, когда подключаете сверстанный шаблон, и там в body есть оригинальные названия. В таком случае просто указываете в функции соответствующий параметр:

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

Либо вставляете сразу несколько:

<body <?php body_class( array( "first", "second ", "third " ) ); ?>>

Полезно также рассмотреть использование условного оператора в данной конструкции. Например, есть какая-то оригинальная ситуация, которую WP система автоматически не анализирует, но вы хотите ее «обыграть». Допустим, нужно выводить свои классы только в Woocommerce магазине, тогда пригодится следующий код:

<?php if ( is_shop() ) { body_class( 'wooshop-active' ); } else { body_class('noshop'); } ?>

Здесь условный оператор is_shop выполняет проверку соответствует ли текущая страница магазину, и если это так, дополнительно отображает значение wooshop-active, в противном случае — добавляет class=»noshop» к основным. Внимание! Этот код лишь для наглядности работы, в данном модуле уже встроена обработка события, и он по умолчанию выводит в body специальное значение is-woocommerce-shop.

Вставка body_class через фильтр

У функции имеется возможность влиять на ее работу через специальный фильтр. Это позволяет вносить изменения из сторонних плагинов или через файл functions.php. Давайте рассмотрим те же 3 задачи по добавлению своего класса через фильтр. Для одного элемента код:

add_filter( 'body_class','new_body' );
function new_body( $classes ) {
    $classes[] = ' my-original-class ';
    return $classes;
}

Для нескольких:

add_filter( 'body_class','new_body' );
function new_body( $classes ) { 
    $classes[] = 'first';
    $classes[] = 'second';
    $classes[] = 'third';
    return $classes;
}

С условным оператором:

add_filter( 'body_class','new_body' );
function new_body( $classes ) {  
    if ( is_shop() ) {
        $classes[] = 'wooshop-active';
    } else {
        $classes[] = 'noshop';
    }
    return $classes;
}

Дополнительные сниппеты по body_class

Перед финалом покажу еще парочку ситуаций, когда данная функция нам пригодится.

Удаление лишнего класса

В кодексе есть несколько примеров реализации, но часть из них однозначно не работает. Подтверждение по следующему коду я находил в других заметках + тестировал на практике.

add_filter( 'body_class', function( $classes ) {
    foreach($classes as $key => $class) {
        if( $class == "home" ){
            unset($classes[$key]);
        }
    }
    return $classes;
}, 1000);

Внимание! Здесь текст «home» нужно поменять на то значение, которое хотите удалить. Самый простой вариант когда это может быть нужно — если в сверстанном шаблоне такое же название используется в других элементах страницы, и вы не хотите чтобы из-за базовых функций WP «слетело» все оформление.

Добавить категорию товара Woocommerce в body

Пример взят отсюда, и пригодится в версии модуля 2.6.x (возможно в старших эту фишку встроили в ядро):

add_filter( 'body_class', 'new_prodcats' );
 
function new_prodcats( $classes ){
  if( is_singular( 'product' ) )
  {
    $custom_terms = get_the_terms(0, 'product_cat');
    if ($custom_terms) {
      foreach ($custom_terms as $custom_term) {
        $classes[] = 'product_cat_' . $custom_term->slug;
      }
    }
  }
  return $classes;
}

По коду, в принципе, все понятно. Я еще пополню коллекцию хаков позже, когда что-то найду. В сети есть парочка других примеров, но они местами «бессмысленные», например, какой резон указывать класс для шаблона страницы, если вы можете сходу вписать в body что угодно.

В любом случае, думаю, основной принцип внедрения body_class в WordPress вы уловили и дальше будете сами модифицировать код, добавляя другие условные операторы. Напоследок хочется заметить, что есть еще похожая функция post_class, которая вставляет классы для постов/записей — используется как в единичном отображении, так и в цикле.

Все вопросы по применению body_class в WordPress сайтах или дополнения по теме, пишем ниже.

Оцените статью:

(голосов - 2, средний балл: 7,00 из 7)

Загрузка...

Категории: Возможности;

Теги: css, wordpress кодекс, возможности шаблона, оформление блога, правка шаблона, сниппеты, функции wordpress.

комментариев 7 к статье “Функция body_class() в WordPress — выводим классы в body: алгоритм использования, примеры кода”

Макс 22.01.2018
Привет! Понимаю вопрос не в тему к посту, но я не нашел ничего в поиске на эту тему.

Может быть сталкивался или есть идеи как реализовать, подскажи пожалуйста.

Я хочу улучшить свой сайт, дано: большие текстовые материалы по 10 тысяч символов, например отзывы об авто.

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

Эти 3 слова оформить ввиде тегов, по нажатию на которые в тексте слова выделяются ярким цветом (аналог Ctrl+F на странице с браузере, но далеко не все умеют этим пользоваться).

Все это дело хочется получить в итоге на WordPress.

Сталкивался ли с примерами живой реализации или может быть есть плагины готовые даже? Поискал плагины на сайте WP по запросам Highlight но там все о подсветке кода и ничего о контенте.
Tod 22.01.2018
Макс, помнится когда-то был пост про улучшение страницы с результатами поиска где можно подсвечивать слова в контенте. Может можно как-то повесить на эти слова соответствующие ссылки поиска ?s=расход но тогда нужно делать поиск по конкретной странице. Хотя вообще идея странная, я бы поиска что-то типа Highlight tags, Highlight text in post и другие запросы.
Владимир 24.01.2018
Полезное чтиво, спасибо! Оказывается есть куда более простой способ выделить некоторые элементы чем внедрять всякие IF/ELSE проверки.
Михаил 02.02.2018
Увидел в шаблоне эту функцию недавно, не совсем было понятно зачем она нужна вообще, а тут вот оно че)
Роман 24.03.2018
Спасибо, как всегда толковый пост!
Максим 19.04.2020
Привет. Спасибо за пост. Но с столкнулся с такой проблемой. К единичному посту WordPress создает десяток дублей такого формата
body class=»post-template-default single single-post postid-4245 single-format-standard logged-in admin-bar no-customize-support paged-67890 single-paged-67890. Цифры 67890. Как предотвратить их создание? Может есть рецепт?
Tod 19.04.2020
Максим, по названию класса похоже на разбиение поста на несколько страниц. Там случайно в тексте/коде нет такого? какой-то тег paged не используется?

Оставить комментарий