Использование стилей в зависимости от контекста в WordPress

В WordPress 2.8 есть одно небольшое, но очень полезное нововведение, как для разработчиков сайтов на WordPress, так и для блоггеров. Это возможность изменять внешний вид любой отдельной страницы или группы страниц сайта, без необходимости писать какие то функции и условия на php или устанавливать плагины. Просто добавив нужный вам стиль в ваш css файл.

 

Как это работает

 

В WordPress 2.8 была добавлена функция body_class(). Действует она следующим образом, добавляем ее к нашему тегу <body>, вот так <body <?php body_class(); ?>>

Если ваша тема адаптирована под WordPress 2.8, наверняка эта функция уже присутствует в коде.

Если ее нет, достаточно найти <body> в header.php вашей темы и заменить его на <body <?php body_class(); ?>>

 

Как пользоваться

Что мы получаем от использования этой функции? Очень просто, получаем тег <body> с дополнительными классами, например:

<body class="home blog">

или

<body class="page page-id-3 parent-page-id-0 page-template-default">

 

Что это нам даёт? А вот что:

Добавив в css файл вашего блога:

.postid-3 #respond{

display: none;

}

Уберем форму комментирования у поста с ID 3, оставив комментарии.

 

.home{

background: #f00;

}

Сделаем фон только главной страницы сайта красным.

 

.page h2{

font-size: 30px;

}

Увеличим размер заголовка только на страницах (не записях блога) сайта.

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

Документация

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

  • rtl
  • home
  • blog
  • archive
  • date
  • search
  • paged
  • attachment
  • error404
  • single postid-(id)
  • attachmentid-(id)
  • attachment-(mime-type)
  • author
  • author-(имя)
  • category
  • category-(имя)
  • tag
  • tag-(имя)
  • page
  • page-parent
  • page-child parent-pageid-(id)
  • page-template page-template-(имя файла шаблона)
  • search-results
  • search-no-results
  • logged-in
  • paged-(номер страницы)
  • single-paged-(номер страницы)
  • page-paged-(номер страницы)
  • category-paged-(номер страницы)
  • tag-paged-(номер страницы)
  • date-paged-(номер страницы)
  • author-paged-(номер страницы)
  • search-paged-(номер страницы)
    Для монстров WordPress и тех, кому и этого списка мало, существует возможность добавлять свои классы к body_class, стандартным для WordPress способом:
<?php
add_filter('body_class','my_body_classes');
function my_body_classes($classes, $class) {
	// add 'my-class' to the $classes array
	$classes[] = 'my-class';
	// return the $classes array
	return $classes;
}
?>

 

Официальная документация по body_class() на данный момент отсутствует, но как это обычно бывает в WordPress, функция сделана очень просто и грамотно, разобраться в ней не составляет труда. Немного больше подробностей можно найти в коде функции body_class().

Спасибо за внимание и удачи! 🙂

11 комментариев к статье Использование стилей в зависимости от контекста в WordPress

Avatar

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

27th Август 2009 в 12:03

Ты описал просто отличную по функциональности штуку и одно из моих любимых нововведений! Обязательно сошлюсь на этот пост в соответствующем уроке.

Avatar

SharePoint Developer

27th Август 2009 в 14:55

Спасибо за такую инфу. Сча пойду пробывать на свое блоге ))))

Avatar

Spoofi

27th Август 2009 в 17:15

Полезная вещица, надо тоже будет где-то прикрутить и использовать WP 2.8+ по полной 🙂

Спасибо за информацию.

Avatar

bur

6th Сентябрь 2009 в 12:03

А как сделать так, чтобы на определенной странице (в моем случае simpleforum) элементы шаблона не обрабатывались, а на остальных обрабатывались? Т.е. я хочу, чтобы у меня был форум как бы отдельно от всего остального (хотя можно хидер и футер взять из шаблона)

Avatar

Wordpresser

6th Сентябрь 2009 в 12:09

@bur
Вижу два варианта, можно написать стили для форума которые будут отменять стили блога.
Второй вариант, отключить загрузку style.css вашей темы, для определенной страницы (в данном случае для форума), тут нужны небольшие знания php и функция wordpress is_page()

Avatar

bur

6th Сентябрь 2009 в 12:31

@Wordpresser
Знаний php нет — уж так вышло.
А возможно сделать такую конструкцию:
Вначале файла page.php сдедать условие
если ИДфорум, то отменяем стили шаблона и грузим стили форума
иначе выполняем все со стилями шаблона.

При этом мне не нужен ни хидер, ни футер — гольный форум.

Avatar

Wordpresser

6th Сентябрь 2009 в 12:37

@bur
Можно сделать так, в page.php вначале у вас < ?php get_header()?>

Можно заменить его на
< ? if(!is_page('id страницы форума')){ get_header() }?>
И шапка форума со стилями будет загружаться на всех страницах кроме форума.

Есть еще простой способ сделать это через шаблоны страниц, сделать шаблон в котором не будет загружаться header и footer, но это тема для отдельного поста.

Avatar

bur

6th Сентябрь 2009 в 12:41

@Wordpresser
В данном примере, мне кажется, что хидер будет загружаться именно на форуме, не?

А где можно почитать про то, как сделать отдельный шаблон для отдельной страницы?

Avatar

bur

6th Сентябрь 2009 в 13:58

Создал файл page_forum.php

Прикрутил именно к странице форума этот файл.
Теперь есть хидер, есть контент, но такое чувство, что стили берутся из темы, а сам форум как-то криво выглядит. Как сделать, чтобы стили из основного хидера не подгружались. Если строчку с гет_хидером удалить, то ваще ничего не выводится.

Avatar

bur

6th Сентябрь 2009 в 14:00

@bur
как код опубликовать?

Avatar

Электрик

1st Июль 2010 в 01:52

А есть ли возможность задать вообще отдельный шаблон для постов отдельной рубрики? как, например, для отдельных страниц.

Оставить комментарий к "Использование стилей в зависимости от контекста в WordPress"

Наверх