Podczas tworzenia motywów WordPress czasami możesz potrzebować przeglądarki użytkownika i informacji o systemie operacyjnym, aby zmodyfikować niektóre aspekty projektu za pomocą CSS lub jQuery. WordPress jest w stanie to zrobić za Ciebie. W tym artykule pokażemy, jak dodać klasy przeglądarki użytkownika i systemu operacyjnego w klasie WordPress body.
Domyślnie WordPress generuje klasy CSS dla różnych sekcji witryny. Zapewnia również filtry, dzięki czemu twórcy motywów i wtyczek mogą zaczepiać własne klasy. Będziesz korzystać z body_class filtruj, aby dodać informacje o przeglądarce i systemie operacyjnym jako klasę CSS.
Pierwszą rzeczą, którą musisz zrobić, to dodać następujący kod do funkcji motywu.plik php.
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 $klasy. Druga część wykrywa system operacyjny użytkownika i dodaje go do $klasy również. Ostatnia linia korzysta z WordPress body_class filtruj, aby dodać klasy.
Teraz musisz dodać klasę body do < body> Znacznik HTML w Twoim szablonie nagłówek.php plik. Zastąp linię body w pliku szablonu tym kodem:
< body >
Zauważ, że jeśli pracujesz z motywem startowym, takim jak podkreślniki lub dobrze zakodowane ramy motywu, takie jak Genesis, Twój motyw będzie już miał funkcję klasy body w znaczniku body. Po zaimplementowaniu kodu będziesz mógł zobaczyć klasy przeglądarki i systemu operacyjnego ze znacznikiem body w źródle HTML. Zauważysz również, że będą inne klasy dodane do tagu body przez WordPress.
Teraz możesz stylować 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ć przeglądarkę użytkownika i informacje o systemie operacyjnym w WordPress.
Jeśli dopiero zaczynasz z tworzeniem motywów WordPress, możesz również 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
