Hur man lägger till användarwebbläsare och OS-klasser i WordPress Body Class

När du utvecklar WordPress-teman kan du ibland behöva information från webbläsaren och användarsystemet för att modifiera vissa aspekter av din design med CSS eller jQuery. WordPress kan göra det åt dig. I den här artikeln kommer vi att visa dig hur du lägger till användarklasser för webbläsare och systemoperativa i WordPress body class.

Som standard genererar WordPress CSS-klasser för olika delar av din webbplats. Det tillhandahåller också filter, så att tema- och plugin-utvecklare kan ansluta sina egna lager. Du kommer att använda body_group-filtret för att lägga till information om webbläsaren och systemoperationerna som en CSS-klass.

Det första du ska göra är att lägga till följande kod i ditt temas .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 lägger till den i $. Den andra delen upptäcker användaroperativsystemet och lägger också till det i $. Den sista raden använder WordPress body filter för att lägga till klasserna.

Nu måste du lägga till kroppsklassen

HTML-taggen i ditt temas header.php-fil. Ersätt kroppsraden i din mallfil med denna kod:

>

Observera att om du arbetar med ett starttema som understreck eller ett välkodat temaramverk som Genesis så kommer ditt tema att ha body class-funktionalitet i body-taggen. När koden har distribuerats kommer du att se webbläsar- och operativsystemklasserna med body-taggen i HTML-källan. Du kommer också att märka att WordPress kommer att lägga till andra klasser till body-taggen.

Du kan nu designa klasser 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 webbläsar- och webbläsarinformation. användaroperativsystem i WordPress.

Om du precis har börjat med WordPress-temautveckling kan du också kolla in vår introduktion till Sass och WordPress Body Class 101 för nya temadesigners. Låt oss veta om du har några kommentarer eller frågor genom att lämna en kommentar nedan.

Källa: Justin Sternberg