Când dezvoltați teme WordPress, uneori este posibil să aveți nevoie de informații despre browserul și sistemul de operare al utilizatorului pentru a modifica anumite aspecte ale designului dvs. folosind CSS sau jQuery. WordPress este capabil să facă acest lucru pentru dvs. În acest articol, vă vom arăta cum să adăugați clase pentru browserul și sistemul de operare al utilizatorului în clasa body WordPress.
În mod implicit, WordPress generează clase CSS pentru diferite secțiuni ale site-ului dvs. De asemenea, oferă filtre, astfel încât dezvoltatorii de teme și plugin-uri să își poată atașa propriile clase. Veți folosi filtrul body_class pentru a adăuga informații despre browser și sistemul de operare ca și 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 dvs.
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');
Prima parte a acestui script detectează browserul utilizatorului și îl adaugă la $classes. A doua parte detectează sistemul de operare al utilizatorului și îl adaugă, de asemenea, la $classes. Ultima linie folosește filtrul WordPress body_class pentru a adăuga clase.
Acum trebuie să adăugați clasa body la tag-ul HTML <body> din fișierul header.php al temei dvs. Înlocuiți linia body din fișierul șablon cu acest cod:
<body <?php body_class(); ?>>
Rețineți că dacă lucrați cu o temă de pornire precum underscores sau cu framework-uri de teme bine realizate precum Genesis, atunci tema dvs. va avea deja funcția body class în tag-ul body. Odată ce codul este implementat, veți putea vedea clasele pentru browser și sistemul de operare cu tag-ul body în sursa HTML. Veți observa, de asemenea, că vor exista și alte clase adăugate tag-ului body de către WordPress.
Acum puteți stiliza clasele pentru diferite browsere și sisteme de operare sau le puteți utiliza ca selectori în jQuery. Sperăm că acest articol v-a ajutat să detectați informațiile despre browserul și sistemul de operare al utilizatorului în WordPress.
Dacă sunteți la început cu dezvoltarea temelor WordPress, atunci s-ar putea să doriți să consultați și introducerea noastră în Sass și WordPress Body Class 101 pentru noii designeri de teme. Anunțați-ne dacă aveți feedback sau întrebări lăsând un comentariu mai jos.
Sursa: Justin Sternberg
mrcio
Din anumite motive pe Safari pe un Mac, afișează gecko linux
Suport WPBeginner
Dacă aveți un add-on de securitate sau un CDN, acesta ar putea trimite acele informații către browser în loc de informațiile corecte.
Admin
Adam
Ce se întâmplă dacă utilizatorul folosește Edge? Browserul înlocuitor pentru IE.
Suport WPBeginner
Acesta este un articol mai vechi, dar pentru Edge, este: is_edge urmând formatarea de mai sus
Admin
Adam
Destul de ușor. Mulțumesc!
Mel
Salut.. Sunt un fan al acestui site de aproape 3 ani.. apropo, există vreo actualizare pentru această funcție pentru browserul Edge? mulțumesc
Mai multă putere!!!
Suport WPBeginner
Salut Mel,
Puteți adăuga
$is_edgela cod pentru a detecta Microsoft Edge.Admin
Daniel Geiser
Există posibilitatea de a detecta Edge?
Rehan
Asta e exact ce vreau... mulțumesc mult...
cel mai bun vreodată
Bill Robbins
Aceasta este o modalitate minunată de a ajusta stilurile pentru browsere individuale. Singurul dezavantaj major este că poate funcționa invers atunci când este utilizat cu unele plugin-uri/sisteme de caching. Veți ajunge să aplicați stiluri destinate unui browser tuturor browserelor, deoarece tag-ul body va fi stocat în cache la fel ca restul conținutului de pe pagină.
Suport WPBeginner
Bill, Punct bun. Căutăm o soluție alternativă și vom actualiza articolul în curând. Mulțumim că ați semnalat acest lucru.
Admin