Atunci 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.
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 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 start, cum ar fi underscores, sau cu cadre de temă bine realizate, cum ar fi 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 de browser și sistem de operare cu tag-ul body în sursa HTML. Veți observa, de asemenea, că vor exista alte clase adăugate la tag-ul 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ă abia începeți cu dezvoltarea temelor WordPress, atunci s-ar putea să doriți să consultați și introducerea noastră în Sass și Clasa Body WordPress 101 pentru noii designeri de teme. Anunțați-ne dacă aveți feedback sau întrebări lăsând un comentariu mai jos.
Sursă: 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
This is an older article but for Edge, it is: is_edge following the above formatting
Admin
Adam
Destul de ușor. Mulțumesc!
Mel
Hi.. I’ve been a fan of this website for almost 3 years.. by the way any update on this function for edge browser? thanks
Mai multă putere!!!
Suport WPBeginner
Salut Mel,
Puteți adăuga
$is_edgela cod pentru a detecta Microsoft Edge.Admin
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
Asta e exact ce vreau... mulțumesc mult...
best ever
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