WordPress temaları geliştirirken, tasarımınızın belirli yönlerini CSS veya jQuery kullanarak değiştirmek için bazen kullanıcının tarayıcı ve işletim sistemi bilgilerine ihtiyaç duyabilirsiniz. WordPress bunu sizin için yapabilir. Bu makalede, kullanıcıların tarayıcı ve işletim sistemi sınıflarını WordPress gövde 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ı veya Genesis gibi iyi kodlanmış tema çerçeveleri ile çalışıyorsanız, temanızın zaten body etiketinde body class fonksiyonuna sahip olacağını unutmayın. Kod uygulandıktan sonra, HTML kaynağındaki body etiketinde tarayıcı ve işletim sistemi sınıflarını görebileceksiniz. Ayrıca WordPress tarafından body etiketine başka sınıfların da eklendiğini 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ştirme konusunda yeni başlıyorsanız, Sass'a giriş ve yeni tema tasarımcıları için WordPress Body Class 101 makalelerimize de göz atmak isteyebilirsiniz. Geri bildiriminiz veya sorularınız varsa lütfen aşağıya yorum bırakarak 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