Очень интересная функция 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 и цвет шрифта на красный.
На странице некорректный тег BODY, возможно это связано с JavaScript что это значит?