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

Så här add to användarens webbläsare och OS-klasser i WordPress Body Class

När du utvecklar WordPress themes kan du ibland behöva information om användarens webbläsare och operativsystem för att ändra vissa aspekter av din design med hjälp av CSS eller jQuery. WordPress är capability att göra det åt you. I den här artikeln visar vi hur du add to användarens webbläsare och OS-klasser i WordPress body class.

Detecting user platform and browser in WordPress

Som standard genererar WordPress CSS-klasser för olika sektioner på din website. Det ger också filter så att utvecklare av teman och plugins kan åtgärds-hooka sina egna klasser. Du kommer att använda filtret body_class för att add to information om webbläsare och operativsystem som CSS-klass.

Det första du behöver göra är att add to följande kod i ditt temas functions.php-fil.

        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');

Den första delen av detta skript upptäcker användarens webbläsare och addar den till $classes. Den andra delen upptäcker användarens operativsystem och addar det också till $classes. Den sista raden använder WordPress body_class-filter för att add to klasser.

Nu måste du add to body-klassen till HTML-taggen <body> i ditt temas header.php-fil. Ersätt body-raden i din template-fil med den här koden:

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

Obs/observera: om du arbetar med ett starttema som underscores eller välkodade temaramverk som Genesis, så kommer ditt tema redan att ha body class-funktionen i body tagged. När koden är implementerad kommer du att kunna se webbläsare och operativsystemsklasser med body tagged i HTML-källan. You will also notice that there will be other classes added to the body tag by WordPress.

Adding browser and OS information in WordPress body class

Nu kan du styla klasserna för olika webbläsare och operativsystem eller använda dem som väljare i jQuery. Vi hoppas att den här artikeln hjälpte dig att upptäcka information om användarens webbläsare och operativsystem i WordPress.

Om du precis har börjat med WordPress temautveckling, kanske du också vill ta en titt på vår introduktion till Sass och WordPress Body Class 101 för nya temadesigners. Låt oss veta om du har någon återkoppling eller frågor genom att lämna en comment under.

Källa: Justin Sternberg Justin Sternberg

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

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.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

9 kommentarerLämna ett svar

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

      Administratör

      • Adam

        Easy enough. Thanks!

  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.

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.