Cum sa adaugi browser-ul utilizatorilor in WordPress
Cand dezvolti o tema wordpress, ai nevoie cateodata de informatii legate de sistemele de operare pe care le folosesc utilizatorii pentru a efectua anumite modificari la tema folosind CSS si jQuery. WordPress este capabil sa faca asta pentru tine. In acest articole, vom invata mai multe despre aceste aspecte si vom invatam cum sa adaugam browser-ul utilizatorilor si clasele OS (operating system) in WordPress body class.
In mod default, WordPress este capabil sa genereze clase CSS pentru diferite sectiuni ale site-ului tau. Deasemenea, pune la dispozitie anumite filtre, filtre cu ajutorul carora dezvoltatorii de teme sau de plugin-uri pentru WordPress sa isi poata prelua propriile clase CSS. Pentru a efectua modificarea despre care vorbim, va trebui sa folosim filtrul body_class. Astfel, vom ajunge sa adaugam informatiile legate de browser si sistemele de operare ale vizitatorilor drept clase CSS.
Pentru inceput, pasul principal de urmat il reprezinta adaugarea cod-ului in fisierul functions.php al wordpress.
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 din acest script va detecta cu usurinta browser-ul utilizatorilor care va viziteaza site-ul si va adauga informatiile in $classes. Ce-a de-a doua parte a scriptului va detecta sistemul de operare si deasemenea, va adauga informatiile adunate in $classes. Ultima linie va folosi filtrul wordpress body_class pentru a adauga aceste classes.
Acum urmeaza sa adaugi body class-ul la tagul HTML <body> din fisierul header.php al temei tale wordpress. Vei inlocui linia din template cu urmatorul cod:
<body <?php body_class(); ?>>
Vezi ca daca lucrezi cu o tema starter ca underscore sau cu o tema bine codata cu frameworks cum ar fi Genesis, tema ta va avea deja functia body class in body tag. Odata ce codul este implementat vei fi capabil sa vezi clasele browserelor si sistemelor de operare ale vizitatorilor, cu ajutorul body tag in sursa HTML.
Speram ca articolul nostru v-a ajutat sa detectati sistemul de operare si browser-ul vizitatorilor site-ului vostru.
Comentarii recente