Kategoriler
Internet

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

  • Volkan Yılmaz
  • Yazı tarihi

wordpress-cssWordPress 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(); ?>>.

    Tüm classlar aşağıdaki gibi;

  • 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.