WordPress temaları geliştirirken, bazen tasarımınızın belirli yönlerini CSS veya jQuery kullanarak değiştirmek için kullanıcının tarayıcı ve işletim sistemi bilgilerine ihtiyaç duyabilirsiniz. WordPress bunu sizin için yapabilir. Bu makalede, kullanıcının tarayıcı ve işletim sistemi sınıflarını WordPress body sınıfına nasıl ekleyeceğinizi göstereceğiz.
Varsayılan olarak WordPress, web sitenizin farklı bölümleri için CSS sınıfları oluşturur. Ayrıca, tema ve eklenti geliştiricilerinin kendi sınıflarını ekleyebilmeleri için filtreler de sağlar. Tarayıcı ve işletim sistemi bilgilerini CSS sınıfı olarak eklemek için body_class filtresini kullanacaksınız.
Yapmanız gereken ilk şey, aşağıdaki kodu temanızın functions.php dosyasına eklemektir.
function mv_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';
if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))
$classes[] = 'ie'.$browser_version[1];
} else $classes[] = 'unknown';
if($is_iphone) $classes[] = 'iphone';
if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {
$classes[] = 'osx';
} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) {
$classes[] = 'linux';
} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {
$classes[] = 'windows';
}
return $classes;
}
add_filter('body_class','mv_browser_body_class');
Bu betiğin ilk bölümü kullanıcının tarayıcısını algılar ve $classes'a ekler. İkinci bölüm kullanıcının işletim sistemini algılar ve onu da $classes'a ekler. Son satır sınıfları eklemek için WordPress body_class filtresini kullanır.
Şimdi, temanızın header.php dosyasındaki <body> HTML etiketine body sınıfını eklemeniz gerekiyor. Şablon dosyanızdaki body satırını bu kodla değiştirin:
<body <?php body_class(); ?>>
Underscores gibi bir başlangıç temasıyla veya Genesis gibi iyi kodlanmış tema çerçeveleriyle çalışıyorsanız, temanızın body etiketinde zaten body sınıf fonksiyonu bulunacaktır. Kod uygulandıktan sonra, HTML kaynağındaki body etiketiyle birlikte tarayıcı ve işletim sistemi sınıflarını görebileceksiniz. Ayrıca WordPress tarafından body etiketine eklenen başka sınıflar da olacağını fark edeceksiniz.
Artık farklı tarayıcılar ve işletim sistemleri için sınıfları stilize edebilir veya bunları jQuery'de seçici olarak kullanabilirsiniz. Bu makalenin, WordPress'te kullanıcının tarayıcı ve işletim sistemi bilgilerini tespit etmenize yardımcı olduğunu umuyoruz.
WordPress tema geliştirmeye yeni başlıyorsanız, Sass'a giriş ve yeni tema tasarımcıları için WordPress Body Class 101 hakkındaki yazılarımıza da göz atmak isteyebilirsiniz. Aşağıya yorum bırakarak geri bildirimlerinizi veya sorularınızı bize bildirin.
Kaynak: Justin Sternberg
mrcio
Nedense Mac'teki Safari'de gecko linux görünüyor
WPBeginner Desteği
Bir güvenlik eklentiniz veya CDN'niz varsa, bu bilgiyi doğru bilgi yerine tarayıcıya gönderiyor olabilir.
Yönetici
Adam
Kullanıcı Edge kullanıyorsa ne olur? IE'nin yerini alan tarayıcı.
WPBeginner Desteği
This is an older article but for Edge, it is: is_edge following the above formatting
Yönetici
Adam
Yeterince kolay. Teşekkürler!
Mel
Hi.. I’ve been a fan of this website for almost 3 years.. by the way any update on this function for edge browser? thanks
Daha fazla güç!!!
WPBeginner Desteği
Merhaba Mel,
Microsoft Edge'i algılamak için koda
$is_edgeekleyebilirsiniz.Yönetici
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
Tam olarak istediğim bu… çok teşekkürler…
best ever
Bill Robbins
Bu, bireysel tarayıcılar için stil ayarlaması yapmanın harika bir yolu. Tek büyük dezavantajı, bazı önbellekleme eklentileri/sistemleriyle kullanıldığında ters tepebilmesidir. Sayfanın geri kalanı gibi gövde etiketinin de önbelleğe alınması nedeniyle, bir tarayıcı için tasarlanan stilleri tüm tarayıcılara uygulamış olursunuz.
WPBeginner Desteği
Bill, İyi bir nokta. Alternatif bir çözüm arıyoruz ve makaleyi yakında güncelleyeceğiz. Bunu belirttiğiniz için teşekkürler.
Yönetici