body_class() WP 2.8
Эта функция может пригодиться разработчикам тем, чтобы эффективнее использовать CSS селекторы. Она дописывает к тегу body различные классы, в зависимости от того на какой странице находится посетитель, залогинен он или нет и т.д. (например, class=»home logged-in» ).
Возвращает
Использование
Функция может выводить следующий список классов
Аргумент class может содержать сразу несколько значений из этого списка.
Где, какие классы выводятся
Для вывода классов используются условные теги. Ниже зависимость добавляемого в список класса, от срабатывания условного тега:
is_single() — single postid-(ID поста)
Если есть настраиваемый фон
Примеры
#1 Применение
Пример, показывающий как применяется функция:
В результате, в HTML коде мы получим следующее:
А в сss описываться это будет так:
#2. Добавим свой, произвольный класс:
#3. Добавка классов через фильтр body_class
Классы можно добавить с применением условий.
Это только демонстрация: для постоянных страниц уже есть уникальный класс.
#3.1. Добавим ярлык категории записи в классы
Добавим слаг категории как класс для страниц постов. Слаг категории будет тот, к которому относится пост:
#3.2. Добавим имя родительской страницы в классы body
Этот пример добавляет ярлык родительской страницы в классы body, когда мы находимся на дочерней странице:
Это только демонстрация: для родительских страниц уже есть уникальный класс.
#4. Добавим класс только, когда показывается сайдбар
В примере 3 было показано, как добавлять дополнительные CSS классы через фильтр body_class. Ниже пример демонстрирует как добавить новый класс только когда показывается сайдбар:
MnogoBlog
как создать сайт на wordpress, настроить и оптимизировать wordpress
Тег body_class() – придаем оригинальный дизайн сайту
Очень интересная функция WordPress – позволяет легко создавать индивидуальное оформление для страничек, записей, архивов, также позволяет менять дизайн сайта для зарегистрированных пользователей и многое другое.
Скачать исходники для статьи можно ниже
Как же пользоваться body_class ()?
Если коротко, то вам нужно зайти в файл header.php вашей темы и поменять в его коде тег на тег >.
После этого в файле стилей style.css вашей темы прописать параметры оформления для классов, которые будет использовать тег > при отображении страничек вашего сайта.
Теперь более подробно и на примере рассмотрим вышеуказанные действия.
Шаг 1. Меняем тег на >
Для этого заходим в панель управления вашим сайтом, выбираем в левом меню пункт “Внешний вид”, далее подпункт “Редактор” и справа в списке шаблонов выбираем файл header.php.
Находим в его коде тег и заменяем его на
Далее сохраняем изменения (жмем на кнопку “Обновить файл”).
Чтобы увидеть и понять, что же изменилось с вашим сайтом после вышеуказанной подмены тегов body, достаточно открыть исходный код странички вашего сайта.
Открываем страничку вашего сайта например в браузере Firefox и жмем комбинацию клавиш Сtrl+U или же в меню выбираем пункт “Инструменты” – “Разработка” – “Исходный код старницы”.
И вы увидите, что тег будет изменяться с каждой новой открытой страничкой.
Например для главной странички он будет выглядит так:
Для этой же главной странички, но с выполненным входом (пользователь ввел логин и пароль для входа на сайт) так:
Как видите тег body в первом случае использует один класс “home blog”, а во втором уже три класса для отображения странички: “home blog”, “logged-in”, “admin-bar”.
Как вы уже заметили разделение классов происходит с помощью обыкновенного пробела.
Если же мы откроем другую страничку сайта, то увидим следующее:
Здесь тег body присвоил для данной странички 3 класса: “page”, “page-id-2”, “page-template-default”.
Класс “page-id-2” – привязан только к этой страничке (данная страничка имеет идентификатор 2).
Вообще количество классов, которые использует тег> следующее (но можно создать и свой класс):
rtl
home
blog
archive
date
search
paged
attachment
error404
single postid-(id)
single-(post_type)
page-id-(page_id)
attachmentid-(id)
attachment-(mime-type)
author
author-(user_nicename)
category
category-(slug)
tag
tag-(slug)
page-parent
page-child parent-pageid-(id)
page-template page-template-(template file name)
search-results
search-no-results
logged-in
paged-(page number)
single-paged-(page number)
page-paged-(page number)
category-paged-(page number)
tag-paged-(page number)
date-paged-(page number)
author-paged-(page number)
search-paged-(page number)
tax-(taxonomy name) (since 3.1)
term-(term name) (since 3.1)
admin-bar (since 3.1)
custom-background (since 3.3)
Что за что отвечает и как создать свой класс можно прочитать тут:
на английском:
http://codex.wordpress.org/Function_Reference/body_class
на русском:
http://wp-kama.ru/function/body_class
Шаг 2.Придадим классам тега> свое оригинальное оформление.
Для этого заходим в панель управления вашего сайта, в левом меню выбираем пункт “Внешний вид”, подпункт “Редактор”, слева в списке шаблонов находим файл style.css и добавим в конце его кода следующее:
Тем самым для для зарегистрированных пользователей (вошедших на сайт под своим логином и паролем) мы изменили размер шрифта на 20 px и цвет шрифта на красный.
Похожие записи:
Тег body_class() – придаем оригинальный дизайн сайту : 2 комментария
На странице некорректный тег BODY, возможно это связано с JavaScript что это значит?
Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.
Функция body_class() в WordPress — выводим классы в body: алгоритм использования, примеры кода
Давайте рассмотрим одну интересную функцию body_class(), которая добавляет в тег вашего шаблона целый ряд специальных классов. Ее результат зависит от того какая страница в данный момент генерируется, например, для единичной записи увидите значения «single single-post postid-хххх«, для категорий — «category category-хх» и т.п.
Применяя этот механизм и CSS стили, вы сможете задавать оригинальное оформление разным элементам сайта без загромождения кода условными операторами. Сегодня разберем все нюансы темы и посмотрим парочку полезных примеров. Оглавление:
Классы и синтаксис body_class():
Если в вашем шаблоне имеется данная функция, то в результирующем HTML коде страницы увидите что-то вроде:
По логике, в принципе, понятно, что в теге body отображаются классы используемого шаблона (post-template-default), единичного поста (single single-post), формата записи (single-format-standard) и показатель залогиненного юзера (logged-in).
На самом деле таких значений body_class в WordPress очень много. Приведу парочку основных примеров, где они выводятся:
Принцип использования body_class в WordPress
Рассмотрим самый простой способ внедрения функции: идем в файл шаблона header.php, находите тег body и заменяете его на следующую конструкцию:
Сохраняете. Теперь, если посмотреть HTML код сайта, то увидите вывод соответствующих классов. Откроем какую-то страницу (page) и с помощью CSS изменим базовый шрифт на зеленый курсив.
То есть, добавляя к стилям элементов уникальные классы, вы сможете задавать оригинальное оформление. В данном примере код:
body.page-id-878 #content p
Он сработает для текстового наполнения в блоке контента только(!) на странице с Помимо этого допускается также обработка следующих вариантов:
Добавление своих классов
Допустим, вы хотите дописать к базовым значениям body свои собственные. Это может быть полезно, когда подключаете сверстанный шаблон, и там в body есть оригинальные названия. В таком случае просто указываете в функции соответствующий параметр:
Либо вставляете сразу несколько:
Полезно также рассмотреть использование условного оператора в данной конструкции. Например, есть какая-то оригинальная ситуация, которую WP система автоматически не анализирует, но вы хотите ее «обыграть». Допустим, нужно выводить свои классы только в Woocommerce магазине, тогда пригодится следующий код:
Здесь условный оператор is_shop выполняет проверку соответствует ли текущая страница магазину, и если это так, дополнительно отображает значение wooshop-active, в противном случае — добавляет к основным. Внимание! Этот код лишь для наглядности работы, в данном модуле уже встроена обработка события, и он по умолчанию выводит в body специальное значение is-woocommerce-shop.
Вставка body_class через фильтр
У функции имеется возможность влиять на ее работу через специальный фильтр. Это позволяет вносить изменения из сторонних плагинов или через файл functions.php. Давайте рассмотрим те же 3 задачи по добавлению своего класса через фильтр. Для одного элемента код:
С условным оператором:
Дополнительные сниппеты по body_class
Перед финалом покажу еще парочку ситуаций, когда данная функция нам пригодится.
Удаление лишнего класса
В кодексе есть несколько примеров реализации, но часть из них однозначно не работает. Подтверждение по следующему коду я находил в других заметках + тестировал на практике.
Внимание! Здесь текст «home» нужно поменять на то значение, которое хотите удалить. Самый простой вариант когда это может быть нужно — если в сверстанном шаблоне такое же название используется в других элементах страницы, и вы не хотите чтобы из-за базовых функций WP «слетело» все оформление.
Добавить категорию товара Woocommerce в body
Пример взят отсюда, и пригодится в версии модуля 2.6.x (возможно в старших эту фишку встроили в ядро):
По коду, в принципе, все понятно. Я еще пополню коллекцию хаков позже, когда что-то найду. В сети есть парочка других примеров, но они местами «бессмысленные», например, какой резон указывать класс для шаблона страницы, если вы можете сходу вписать в body что угодно.
В любом случае, думаю, основной принцип внедрения body_class в WordPress вы уловили и дальше будете сами модифицировать код, добавляя другие условные операторы. Напоследок хочется заметить, что есть еще похожая функция post_class, которая вставляет классы для постов/записей — используется как в единичном отображении, так и в цикле.
Все вопросы по применению body_class в WordPress сайтах или дополнения по теме, пишем ниже.
WP Magazine
Про WordPress на русском языке
Функция body_class() в WordPress
Функция body_class() — одна из самых полезных в WordPress. Благодаря ей на сайте легко изменять стили элементов в зависимости от текущей страницы или записи, категории, метки, автора, типа записи и многих других факторов.
Функция body_class() добавляет список классов к тегу в теме WordPress. По этим классам с помощью CSS или JavaScript легко определить тип текущей страницы, например класс logged-in означает, что текущий посетитель выполнил вход, а класс search — что посетитель находится на странице с результатами поиска.
Использование body_class()
Учтите, что использование данной функции — обязательно для всех тем в официальной директории WordPress.org. Также стоит отметить, что функция body_class() может принимать один аргумент, куда вы можете передать список дополнительных классов, например:
Классы
На данный момент функция body_class() поддерживает больше 50 типов классов. В этом разделе мы рассмотрим самые интересные и популярные. Полный перечень и логику выбора классов вы можете посмотреть в файле ядра wp-includes/post-template.php.
Эти классы можно применять в вашем CSS редакторе в WordPress или в дочерней теме, например следующим образом:
Классы single и page
Классы single и page — одни из самых полезных. Они присутствуют тогда, когда текущая страница содержит одиночную запись. Класс single используется для одиночных записей любых типов, кроме вложений и страниц, а класс page используется для страниц.
Например, следующий CSS код увеличивает заголовок на страницах с одиночной записью или страницей:
Класс single-
Классы postid-* и page-id-*
С помощью данных классов можно определить конкретную запись или страницу, на которой находится пользователь. Страница определяется по ее идентификатору, который можно подсмотреть в панели администрирования.
Например на каких-нибудь важных разделах сайта (регистрация, форма заказа и т.д.) мы можем скрыть боковую колонку, чтобы не отвлекать посетителя:
Классы archive, home и blog
Данные классы позволяют определить является ли текущая страница архивом, главной статической страницей сайта или главной страницей со списком записей.
В случае с архивами есть также следующие классы:
Например изменить фоновый цвет навигационного меню в зависимости от текущей категории:
Классы logged-in и admin-bar
Класс logged-in используется тогда, когда текущий посетитель выполнил вход. Класс admin-bar появляется при отображении верхней панели WordPress. Изменить цвет фона виджета подписки для вошедших пользователей можно следующим образом:
Кстати, если вы ищите способ скрыть верхнюю панель, не делайте этого с помощью CSS. Для верхней панели есть специальный фильтр, с помощью которого можно ее полностью отключить для всех через плагин:
Фильтр body_class
Как мы уже упомянули, в функции body_class() есть специальный фильтр, который позволяет плагинам WordPress изменять список используемых классов.
Например, чтобы не использовать класс logged-in не зависимо от того, выполнил ли пользователь вход, мы можем использовать следующий код в нашем плагине:
Мы можем также добавить новый класс к списку, например произвольное поле текущей одиночной записи:
Проверка body_class в Chrome
» data-medium-file=»https://wpmag.ru/wp-content/uploads/2014/05/body_class-wordpress-chrome-300×77.png» data-large-file=»https://wpmag.ru/wp-content/uploads/2014/05/body_class-wordpress-chrome-1024×263.png» loading=»lazy» src=»https://wpmag.ru/wp-content/uploads/2014/05/body_class-wordpress-chrome.png» alt=»Проверка body_class в Chrome» width=»766″ height=»196″ srcset=»https://wpmag.ru/wp-content/uploads/2014/05/body_class-wordpress-chrome.png 1032w, https://wpmag.ru/wp-content/uploads/2014/05/body_class-wordpress-chrome-300×77.png 300w, https://wpmag.ru/wp-content/uploads/2014/05/body_class-wordpress-chrome-1024×263.png 1024w, https://wpmag.ru/wp-content/uploads/2014/05/body_class-wordpress-chrome-768×197.png 768w» sizes=»(max-width: 1032px) 100vw, 1032px»/>
Проверка body_class в Chrome
WordPress.org
Displays the class names for the body element.
Contents
Parameters # Parameters
( string | string[] ) (Optional) Space-separated string or array of class names to add to the class list.
More Information # More Information
This function gives the body element different classes and can be added, typically, in the header.php’s HTML body tag.
Basic Usage
The following example shows how to implement the body_class template tag into a theme.
The actual HTML output might resemble something like this (the About the Tests page from the Theme Unit Test):
In the WordPress Theme stylesheet, add the appropriate styles, such as:
Source # Source
Related # Related
Uses # Uses
Escaping for HTML attributes.
Retrieves an array of the class names for the body element.
Changelog # Changelog
User Contributed Notes # User Contributed Notes
Adding More Classes
By default, the only classes will be those described above.
To add more classes, the template tag’s parameter can be added. For example, to add a unique class to the same template used above:
The results would be:
Add New Classes via Filter
You can add additional body classes by filtering the <@see ‘body_class’>hook.
To add the following to the WordPress Theme functions.php file, changing my_class_names and class-name to meet your needs:
Here’s a solution for adding a body class to a specific page template:
The result on the front-end:
Feedback
The above example about how to remove inline classes via filters is incorrect.
Here is the correct way to do it:
To remove a class of the body_class function you have to do that:
# Function body_class() add some STATIC classes depends on the page, post, archive, blog, search, 404 etc.
# List of all default static classes which are added to
# Function body_class() also add some DYNAMIC classes as below:
You can check all these in function get_body_class()
This is from get_page_template_slug as used by this function and is important to remember:
If the template is stored in a Theme’s subdirectory (or a Parent Theme’s subdirectory of a Child Theme), the value of the wp_postmeta is both the folder and file names, e.g.:
Add one custom body class to the entire site, as well as additional classes only where needed by conditionally targeting the page slugs.
In this example the site makes use of front end registration, login and password reset forms, so the goal is to modify the form styling only on these pages:
Adding maijabrazen. Example if want remove author id from body class. If wish to remove Author name, use user_nicename
Remove Classes via Filters
You must log in before being able to contribute a note or feedback.