Cum se adaugă browser-ul utilizator și clasele de OS în WordPress Body Class

Atunci când dezvoltați teme WordPress, uneori este posibil să aveți nevoie de informații despre browser și sistem de operare pentru a modifica anumite aspecte ale designului dvs. utilizând CSS sau jQuery. WordPress este capabil să facă asta pentru tine. În acest articol, vă vom arăta cum să adăugați clase de browser pentru utilizatori și clase de OS în clasa corpului WordPress.

WordPress implicit generează clase CSS pentru diferite secțiuni ale site-ului dvs. Web. De asemenea, oferă filtre, astfel încât dezvoltatorii temelor și plugin-urilor să își găsească propriile clase. Veți folosi body_class filtrați pentru a adăuga informații despre browser și sistem de operare sub formă de clasă CSS.

Primul lucru pe care trebuie să-l faceți este să adăugați următorul cod în fișierul functions.php al temei.

 funcția mv_browser_body_class ($ classes) globul $ is_lynx, $ is_gecko, $ is_IE, $ is_opera, $ is_NS4, $ is_safari, $ is_chrome, $ is_iphone; dacă ($ is_lynx) $ classes [] = 'lynx'; altfel ($ is_gecko) $ classes [] = 'gecko'; altfel ($ is_opera) $ classes [] = 'opera'; altfel ($ is_NS4) $ classes [] = 'ns4'; elseif ($ is_safari) $ clase [] = 'safari'; altfel ($ is_chrome) $ classes [] = 'crom'; elseif ($ is_IE) $ clase [] = 'ie'; dacă [preg_match ('/ MSIE ([0-9] +) ([a-zA-Z0-9.] +) /', $ _SERVER ['HTTP_USER_AGENT'], $ browser_version) “$ browser_version [1].;  altfel $ classes [] = 'necunoscut'; dacă ($ is_iphone) $ classes [] = 'iphone'; dacă (stristr ($ _SERVER ['HTTP_USER_AGENT'], 'mac')) $ classes [] = 'osx';  elseif (stristr ($ _SERVER ['HTTP_USER_AGENT'], "linux")) $ clase [] = 'linux';  elseif (stristr ($ _SERVER ['HTTP_USER_AGENT'], "ferestre")) $ classes [] = 'ferestre';  returnează clase $;  add_filter ('body_class', 'mv_browser_body_class'); 

Prima parte a acestui script detectează browserul utilizatorului și îl adaugă clase de $. A doua parte detectează sistemul de operare al utilizatorului și îl adaugă clase de $ de asemenea. Ultima linie utilizează WordPress body_class filtrați pentru a adăuga clase.

Acum trebuie să adăugați clasa corpului la Etichetă HTML în tema proprie header.php fişier. Înlocuiți linia corpului din fișierul șablon cu acest cod:

Rețineți că dacă lucrați cu o temă de pornire cum ar fi subliniere sau cadre tematice bine codificate precum Genesis, atunci tema dvs. va avea deja funcția de clasă corporală în eticheta corporală. Odată ce codul este implementat, veți putea vedea clasele de browser și de sistem de operare cu eticheta corporală din sursa HTML. Veți observa, de asemenea, că vor exista alte clase adăugate la eticheta corporală de WordPress.

Acum puteți modela cursurile pentru diferite browsere și sistemul de operare sau le puteți folosi ca selectori în jQuery. Sperăm că acest articol v-a ajutat să detectați informațiile browserului și ale sistemului de operare în WordPress.

Dacă sunteți doar începând cu WordPress temă de dezvoltare, atunci s-ar putea dori, de asemenea, să aruncăm o privire la introducerea noastră la Sass și WordPress Body Class 101 pentru noii designeri temă. Spuneți-ne dacă aveți feedback sau întrebări lăsând un comentariu mai jos.

Sursa: Justin Sternberg