Тег 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 и цвет шрифта на красный.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Тег body_class() — придаем оригинальный дизайн сайту: 2 комментария

  1. Уведомление: Индивидуальный шаблон записей, постов в WordPress | MnogoBlog

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>