Тег body_class() – придаем оригинальный дизайн сайту

Очень интересная функция WordPress – позволяет легко создавать индивидуальное оформление для страничек, записей, архивов, также позволяет менять дизайн сайта для зарегистрированных пользователей и многое другое.

Скачать исходники для статьи можно ниже

Как же пользоваться body_class ()?

Если коротко, то вам нужно зайти в файл header.php вашей темы и поменять в его коде тег <body> на тег <body <?php body_class(); ?>>.

После этого в файле стилей style.css вашей темы прописать параметры оформления для классов, которые будет использовать тег <body <?php body_class(); ?>> при отображении страничек вашего сайта.

Теперь более подробно и на примере рассмотрим вышеуказанные действия.

Шаг 1. Меняем тег <body> на <body <?php body_class(); ?>>

Для этого заходим в панель управления вашим сайтом, выбираем в левом меню пункт “Внешний вид”, далее подпункт “Редактор” и справа в списке шаблонов выбираем файл header.php.

Находим в его коде тег <body> и заменяем его на

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

Возможно в вашей теме уже произведено данное действия и вместо тега <body> уже стоит тег <body <?php body_class(); ?>> .

Далее сохраняем изменения (жмем на кнопку “Обновить файл”).

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

Открываем страничку вашего сайта например в браузере Firefox и жмем комбинацию клавиш Сtrl+U или же в меню выбираем пункт “Инструменты” – “Разработка” – “Исходный код старницы”.

И вы увидите, что тег <body> будет изменяться с каждой новой открытой страничкой.

Например для главной странички он будет выглядит так:

</head>
...
<body class="home blog">
...

Для этой же главной странички, но с выполненным входом (пользователь ввел логин и пароль для входа на сайт) так:

</head>
...
<body class="home blog logged-in admin-bar">
...

Как видите тег body в первом случае использует один класс “home blog”, а во втором уже три класса для отображения странички: “home blog”, “logged-in”, “admin-bar”.
Как вы уже заметили разделение классов происходит с помощью обыкновенного пробела.

Если же мы откроем другую страничку сайта, то увидим следующее:

</head>
...
<body class="page page-id-2 page-template-default">
...

Здесь тег 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 и добавим в конце его кода следующее:

.logged-in {
font-size: 20px;
color: red;
}

Тем самым для для зарегистрированных пользователей (вошедших на сайт под своим логином и паролем) мы изменили размер шрифта на 20 px и цвет шрифта на красный.