WordPress Body Class 101: Советы и рекомендации для разработчиков темы. Часть 2

Начало статьи можно найти по ссылке WordPress Body Class 101: Советы и рекомендации для разработчиков темы. Часть 1

Добавляем класс рубрики к страницам записей блога

Представим, что вы хотите кастомизировать страницы записей блога в каждой рубрике. В зависимости от типа кастомизации, вы можете использовать класс body для этих целей. Например, вы хотите изменить цвет фона страницы в зависимости от рубрики на записях блога. Это можно сделать, добавив классы рубрик к вашим страницам записей. Вставьте следующий код функции в ваш файл functions.php темы:

// добавляем названия рубрик в класс body
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes[] = $category->category_nicename;
	return $classes;
}

add_filter('body_class', 'category_id_class');

Код выше добавит класс рубрики в ваш класс body для отдельных страниц записей. Можно использовать классы CSS для стилизации по вашему вкусу.

Добавляем Slug страницы в класс body вашей темы WordPress

Вставьте следующий код в ваш файл functions.php темы:

//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

Определяем браузер и специальные классы для Body в зависимости от браузера

Иногда вам может понадобиться добавить специальные стили CSS, чтобы все работало «как надо» в определенных браузерах (конечно же речь об Internet Explorer 😉 )
Все, что нужно сделать, это вставить следующий код в ваш файл functions.php темы:

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
?>

Можно использовать эти классы следующим образом:

.ie .navigation {здесь добавляем что нужно}

Если нужно добавить небольшой padding или margin, это на самом деле самый простой способ решения проблемы.

Другие варианты использования:

Мы бы могли привести еще множество примеров, но в этом случае статья расширилась бы до неприличных размеров. Суть сего повествования в том, чтобы помочь новичкам в разработке темы понять основы класса body в WordPress и преимущества его использования. Способы применения ограничены только вашей фантазией. Например, можно реализовать шаблоны страницы, как например Full Page Layout, Sidebar Content, Content Sidebar и т.д. Реализовав это, пользователь сможет переключать внешний вид страницы без описания того, что пострадает внешний вид страницы, потому как все уже прописано в CSS.

Мы встречали темы, где разработчики добавляли HTTP запросы для загрузки файлов CSS для различных цветовых схем, ими предоставляемых. В большинстве случаев эти изменения крайне незначительны и нет необходимости загружать 3 таблицы стилей, когда справится может только одна. Нужно просто использовать класс body для этого.

Надеемся, эта статья поможет вам в разработке собственной темы.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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