WordPress’de tarayıcıya göre body class atamak

WordPress 2.8 versiyonu ile birlikte WordPress'de body_class() fonksiyonu kullanılmaya başlandı, WordPress body tagine örneğin ana sayfada <body class="home blog">, tekil herhangi bir yazıda <body class="single postid-64"> blog giriş yapmışsa o kullanıcı <body class="home blog logged-in"> şeklinde class eklemekte.

Kullanımı ise temada <body> tagine <?php body_class(); ?> eklemek yani şu şekilde; <body <?php body_class(); ?>>.

rtl
home
blog
archive
date
search
paged
attachment
error404
single postid-(id)
attachmentid-(id)
attachment-(mime-type)
author
author-(user_nicename)
category
category-(slug)
tag
tag-(slug)
page
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)

Bizim fonksiyonumuz WordPress'in body_class(); fonksiyonuna ekleme yaparak ziyaret eden kullanıcının tarayıcısını da görüp onu da body_class(); a ekleyecek yani sonuç olarak bloga Safari tarayıcı ie girmiş bir kullanıcıda örneğin body_class(); şöyle olacak; <body class="home blog logged-in safari">.

Bu yöntem ile tasarımlarınızı daha uyumlu yapmanız mümkün örneğin bir div elementini Safari tarayıcı için css de şöyle biçimlendirebilirsiniz;

.safari #content { width: 960px; }

Temanızın fonksiyon.php dosyasına ekleyeceğiniz kod ise şu;

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;
}

Buna alternatif jQuery kullanarak da yapılabiliyor, bunun için de adres: tvidesign.co.uk

Kolay gelsin.

Volkan Yılmaz