/ Wordpress / body_class (оформление разделов и др.)

body_class (оформление разделов и др.)

HIT

23.04.2016

2607

В wordpress существует функция приписывающая body классы в зависимости от того какой в данный момент раздел, таксономия, метка, архив и т.д. — <?php body_class(); ?>.

Добавление к body_class своего класса:

body_class( ‘my-class’ );

если нужно добавить несколько классов:

body_class( array( «class-one», «class-two», «class-three» ) );

Определяем браузер

В body_class можно указать класс название браузера с которого посещают сайт. Для того, например, чтобы учесть при оформлении какие-либо особенности браузера. В файл functions.php

// Определение браузера посетителя - вывод класса в body
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;
}

Альтернативный способ определить браузер

Определить iOS

// Определение устройства с iOS

add_filter('body_class','ios_class');
function ios_class($classes) {
	if( preg_match( '/iPad|iPod|iPhone/', $_SERVER['HTTP_USER_AGENT'] ) ) { $classes[] = 'ios'; }
	return $classes;
}

Еще один пример. Определим браузер Firefox. Данный способ является более универсальным и нативным:

// Определение браузера посетителя - вывод класса в body
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	if (isset($_SERVER['HTTP_USER_AGENT'])) {
		$agent = $_SERVER['HTTP_USER_AGENT'];
	}
	
	if (strlen(strstr($agent, 'Firefox')) > 0) {
		$classes[] = 'firefox';
	}

	return $classes;
}

Добавить название категорий записи (без приставки cat-)

// добавка названий категорий в виде классов в функции body class и post class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes[] = $category->category_nicename;
		return $classes;
}
//add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

Категории товаров в body_class

Чтобы категории товаров прописывались в body_class нужно в functions.php поместить следующий код

// Добавить в body_class категорию
function product_category_id_class($classes) {
	global $wp_query;
	$product_cats = get_the_terms( $wp_query->get_queried_object()->ID, 'product_cat');
	$classes[] = 'term-'.$product_cats[0]->slug;
	return $classes;
}
add_filter('body_class', 'product_category_id_class');

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

/* Фон для разделов woocommerce */

.term-tea .bg {
    background-image: url('http://hq-wallpapers.ru/wallpapers/15/hq-wallpapers_ru_abstraction3d_70270_1920x1440.jpg');
}

.woocommerce.term-tea div.product .product_title {
	background: #BFF51A;
}

.term-laminat .bg {
    background-image: url('http://i0.wp.com/thewombsauna.com/wp-content/uploads/2013/08/white-wood-wall-texture-wallpaper.jpg');
}	

.woocommerce.term-laminat div.product .product_title {
    background: #71AB15;
    color: #FFFFFF;
}

.term-compact-disc .bg {
    background-image: url('http://wallpaperindex.com/wallpapers/357/41-399975.jpg');
}	

.woocommerce.term-compact-disc div.product .product_title {
    background: #1D2347;
    color: #fff;
}
Данное решение не подходит для подкатегорий, т.к. у них получается уже другой product_cat

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

body_class (оформление разделов и др.)
Зарабатываем на Google AdSense
Рекомендации для васЗарабатываем на Google AdSenseOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.