Så här lägger du till användarbläddrare 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 hjälp av CSS eller jQuery. WordPress kan göra det för dig. I den här artikeln visar vi hur du lägger till användarens webbläsare och OS-klasser i WordPress-klassen.

Som standard genererar WordPress CSS-klasser för olika delar av din webbplats. Det ger också filter, så att temat och plugin-utvecklare kan ansluta sina egna klasser. Du kommer att använda body_class filtrera för att lägga till webbläsare och operativsystem information som CSS klass.

Det första du behöver göra är att lägga till följande kod i ditt temas funktioner.php-fil.

 funktionen mv_browser_body_class ($ klasser) global $ is_lynx, $ is_gecko, $ is_IE, $ is_opera, $ is_NS4, $ is_safari, $ is_chrome, $ is_iphone; om ($ is_lynx) $ klasser [] = 'lynx'; elseif ($ is_gecko) $ classes [] = 'gecko'; elseif ($ is_opera) $ klasser [] = 'opera'; elseif ($ is_NS4) $ klasser [] = 'ns4'; elseif ($ is_safari) $ classes [] = 'safari'; elseif ($ is_chrome) $ classes [] = 'chrome'; elseif ($ is_IE) $ classes [] = 'ie'; om (preg_match ('/ MSIE ([0-9] +) ([a-zA-Z0-9.] +) /', $ _SERVER ['HTTP_USER_AGENT'], $ browser_version)) $ klasser [] = 'dvs. ' $ browser_version [1].;  else $ classes [] = 'unknown'; om ($ is_iphone) $ klasser [] = 'iphone'; om (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';  returnera $ klasser;  add_filter ('body_class', 'mv_browser_body_class'); 

Den första delen av det här skriptet upptäcker användarens webbläsare och lägger till den $ klasser. Den andra delen upptäcker användarens operativsystem och lägger till den till $ klasser också. Den sista raden använder WordPress body_class filtrera för att lägga till klasser.

Nu behöver du lägga till kroppsklassen till HTML-tagg i ditt tema header.php fil. Byt ut kroppslinjen i din mallfil med den här koden:

Observera att om du arbetar med ett starttema som underskrifter eller välkodade tematiska ramar som Genesis, kommer ditt tema redan att ha kroppsklassfunktionen i kroppsgenmärket. När koden har implementerats kan du se webbläsar- och operativsystemklasser med koden i HTML-källan. Du kommer också att märka att det kommer att finnas andra klasser som läggs till koden tagg av WordPress.

Nu kan du ställa in 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älper dig att upptäcka användarens webbläsare och operativsystem information i WordPress.

Om du bara börjar med WordPress-temat utveckling, kan du också titta på vår introduktion till Sass och WordPress Body Class 101 för nya temat designers. Låt oss veta om du har några synpunkter eller frågor genom att lämna en kommentar nedan.

Källa: Justin Sternberg