Hur man lÀgger till webblÀsare och OS-klasser i WordPress Body Class

Hur man lÀgger till webblÀsare och OS-klasser i WordPress Body Class

NÀr du utvecklar WordPress-teman kan du ibland behöva anvÀndarens webblÀsare och operativsysteminformation för att Àndra vissa aspekter av din design med CSS eller jQuery. WordPress kan göra det Ät dig. I den hÀr artikeln visar vi dig hur du lÀgger till anvÀndarens webblÀsare och OS-klasser i WordPress-kroppsklass.

Som standard genererar WordPress CSS-klasser för olika delar av din webbplats. Det ger ocksÄ filter sÄ att tema- och plugin-utvecklare kan ansluta sina egna klasser. Du kommer att anvÀnda filteret body_class för att lÀgga till webblÀsar- och operativsysteminformation som CSS-klass.

Det första du behöver göra Àr att lÀgga till följande kod i temas funktioner.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 $ klasser. Den andra delen upptÀcker anvÀndarens operativsystem och lÀgger till det i $ klasser ocksÄ. Den sista raden anvÀnder WordPress body_class-filtret för att lÀgga till klasser.

Nu mÄste du lÀgga till kroppsklassen i HTML-taggen i tematets header.php-fil. Byt ut kroppslinjen i din mallfil med den hÀr koden:


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

Observera att om du arbetar med ett starttema som understrykningar eller vÀlkodade temaramar som Genesis, kommer ditt tema redan att ha kroppsklassfunktionen i body-taggen. NÀr koden Àr implementerad kommer du att kunna se webblÀsar- och operativsystemklasser med body-taggen i HTML-kÀllan. Du kommer ocksÄ att mÀrka att det kommer att finnas andra klasser som lÀggs till i body taggen av WordPress.

LÀgga till webblÀsare och OS-information i WordPress-kroppsklass

Nu kan du utforma 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 anvÀndarens webblÀsar- och operativsysteminformation i WordPress.

Om du precis 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 feedback eller frÄgor genom att lÀmna en kommentar nedan.

KĂ€lla: Justin Sternberg