Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać przeglądarkę użytkownika i klasy systemu operacyjnego w WordPress Body Class

Podczas tworzenia motywów WordPress czasami możesz potrzebować informacji o przeglądarce i systemie operacyjnym użytkownika, aby zmodyfikować niektóre aspekty twojego projektu za pomocą CSS lub jQuery. WordPress jest w stanie zrobić to za Ciebie. W tym artykule pokażemy, jak dodać przeglądarkę użytkownika i klasy systemu operacyjnego w klasie ciała WordPress.

Detecting user platform and browser in WordPress

Domyślnie WordPress generuje klasy CSS dla różnych sekcji twojej witryny internetowej. Zapewnia również filtry, dzięki którym twórcy motywów i wtyczek mogą podpinać własne klasy. Będziesz używał filtra body_class, 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 pliku functions. php twojego 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 dodaje go również do $classes. Ostatnia linia wykorzystuje filtr WordPress body_class do dodawania klas.

Teraz musisz dodać klasę body do tagu <body> HTML w pliku header. php twojego motywu. Zastąp linię body w twoim pliku szablonu tym kodem:

<body <?php body_class(); ?>>

.

Zauważ, że jeśli pracujesz z motywem startowym, takim jak underscores lub dobrze zakodowanym frameworkiem motywu, takim jak Genesis, to twój motyw będzie już posiadał funkcję klasy body w tagu body. Po zaimplementowaniu kodu będziesz mógł zobaczyć klasy przeglądarki i systemu operacyjnego z tagiem body w źródle HTML. Zauważysz również, że będą inne klasy dodane do tagu body przez WordPress.

Adding browser and OS information in WordPress body class

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 WordPress.

Jeśli dopiero zaczynasz przygodę 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

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

9 komentarzyZostaw odpowiedź

  1. Adam

    What if the user is using Edge? The IE replacement browser.

    • WPBeginner Support

      This is an older article but for Edge, it is: is_edge following the above formatting :)

      Administrator

  2. 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 :)

    More power!!!

  3. Daniel Geiser

    Is there a possibility to detect Edge? ;)

  4. Rehan

    This is what i want exacly… thank you so much…

    best ever :)

  5. Bill Robbins

    This is a wonderful way to tweak styling for individual browsers. The only major drawback is it can backfire when used with some caching plugins/systems. You’ll end up applying styles intended for one browser to all browsers because the body tag will be cached just like the rest of the content on the page.

    • WPBeginner Support

      Bill, Good point. We are looking for an alternative solution and will update the article soon. Thanks for pointing this out.

      Administrator

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.