Podczas tworzenia motywów WordPress, czasami możesz potrzebować informacji o przeglądarce i systemie operacyjnym użytkownika, aby zmodyfikować pewne aspekty swojego projektu za pomocą CSS lub jQuery. WordPress jest w stanie to zrobić za Ciebie. W tym artykule pokażemy Ci, jak dodać klasy przeglądarki i systemu operacyjnego użytkownika do klasy body WordPress.
Domyślnie WordPress generuje klasy CSS dla różnych sekcji Twojej strony internetowej. Zapewnia również filtry, dzięki czemu deweloperzy motywów i wtyczek mogą dodawać własne klasy. Będziesz używać filtru body_class do dodawania informacji o przeglądarce i systemie operacyjnym jako klasy CSS.
Najpierw musisz dodać następujący kod do pliku functions.php swojego motywu.
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');
Pierwsza część tego skryptu wykrywa przeglądarkę użytkownika i dodaje ją do $classes. Druga część wykrywa system operacyjny użytkownika i również dodaje go do $classes. Ostatnia linia używa filtra WordPress body_class do dodawania klas.
Teraz musisz dodać klasę body do tagu HTML <body> w pliku header.php swojego motywu. Zastąp linię body w swoim pliku szablonu tym kodem:
<body <?php body_class(); ?>>
Należy pamiętać, że jeśli pracujesz z motywem startowym, takim jak underscores, lub dobrze napisanymi frameworkami motywów, takimi jak Genesis, Twój motyw będzie już zawierał funkcję klasy body w tagu body. Po zaimplementowaniu kodu będziesz mógł zobaczyć klasy przeglądarki i systemu operacyjnego wraz z tagiem body w źródle HTML. Zauważysz również, że WordPress doda inne klasy do tagu body.
Teraz możesz stylizować klasy dla różnych przeglądarek i systemów operacyjnych lub używać ich jako selektorów w jQuery. Mamy nadzieję, że ten artykuł pomógł Ci wykryć informacje o przeglądarce i systemie operacyjnym użytkownika w WordPressie.
Jeśli dopiero zaczynasz przygodę z tworzeniem motywów WordPress, być może będziesz chciał zapoznać się z naszym wprowadzeniem do Sass i WordPress Body Class 101 dla nowych projektantów motywów. Daj nam znać, jeśli masz jakieś uwagi lub pytania, zostawiając komentarz poniżej.
Źródło: Justin Sternberg
mrcio
Z jakiegoś powodu na Safari na Macu wyświetla się gecko linux
Wsparcie WPBeginner
Jeśli masz dodatek zabezpieczający lub CDN, może on wysyłać te informacje do przeglądarki zamiast właściwych informacji.
Admin
Adam
Co jeśli użytkownik korzysta z Edge? Przeglądarka zastępująca IE.
Wsparcie WPBeginner
This is an older article but for Edge, it is: is_edge following the above formatting
Admin
Adam
Wystarczająco łatwe. Dzięki!
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
Więcej mocy!!!
Wsparcie WPBeginner
Cześć Mel,
Możesz dodać
$is_edgedo kodu, aby wykryć Microsoft Edge.Admin
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
Tego właśnie potrzebowałem… dziękuję bardzo…
best ever
Bill Robbins
To wspaniały sposób na dostosowanie stylizacji dla poszczególnych przeglądarek. Jedyną poważną wadą jest to, że może to przynieść odwrotny skutek przy użyciu niektórych wtyczek/systemów buforowania. Skończysz stosując style przeznaczone dla jednej przeglądarki do wszystkich przeglądarek, ponieważ tag body będzie buforowany tak samo jak reszta zawartości strony.
Wsparcie WPBeginner
Bill, Dobry punkt. Szukamy alternatywnego rozwiązania i wkrótce zaktualizujemy artykuł. Dziękujemy za zwrócenie na to uwagi.
Admin