Kategoriler
Internet

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

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.

Eski wolkanca.com’da WordPress’de tarayıcıya göre body class atamak veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, WordPress’de tarayıcıya göre body class atamak için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.