Slik legger du til brukerleser og OS-klasser i WordPress Body Class

Når du utvikler WordPress-temaer, kan det hende at du kanskje trenger brukerens nettleser og operativsysteminformasjon for å endre visse aspekter av designet ved hjelp av CSS eller jQuery. WordPress er i stand til å gjøre det for deg. I denne artikkelen vil vi vise deg hvordan du legger til brukerens nettleser og OS-klasser i WordPress-klassen.

Som standard genererer WordPress CSS-klasser for ulike deler av nettstedet ditt. Det gir også filtre, slik at tema- og pluginutviklere kan knytte sine egne klasser. Du skal bruke body_class filter for å legge til nettleser og operativsystem informasjon som CSS klasse.

Første du må gjøre er å legge til følgende kode i temaets funksjoner.php-fil.

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

Den første delen av dette skriptet registrerer brukerens nettleser og legger den til $ klasser. Den andre delen registrerer brukerens operativsystem og legger den til $ klasser også. Den siste linjen bruker WordPress body_class filtrer for å legge til klasser.

Nå må du legge til kroppsklassen til HTML-kode i temaet ditt header.php fil. Erstatt kroppslinjen i malfilen din med denne koden:

Legg merke til at hvis du jobber med et forrettstema som understreker eller velkodede temakilder som Genesis, vil temaet ditt allerede ha kroppsklassefunksjonen i kroppsmerket. Når koden er implementert, vil du kunne se nettleser- og operativsystemklasser med kroppstegnet i HTML-kilden. Du vil også legge merke til at det vil bli andre klasser lagt til kroppstempelet ved WordPress.

Nå kan du stille klassene for forskjellige nettlesere og operativsystem eller bruke dem som selektorer i jQuery. Vi håper denne artikkelen hjalp deg med å oppdage brukerens nettleser og operativsysteminformasjon i WordPress.

Hvis du bare har startet med WordPress-temautvikling, kan du også se på introduksjonen til Sass og WordPress Body Class 101 for nye temadesignere. Gi oss beskjed hvis du har tilbakemelding eller spørsmål ved å legge igjen en kommentar nedenfor.

Kilde: Justin Sternberg