Cand lucrezi la dezvoltarea unei teme wordpress, de multe ori vei avea nevoie de informatii legate de sistemele de operare si browser-ele pe care le folosesc utilizatorii tai, pentru a lucra cu usurinta si pentru a putea efectua anumite modificari in tema la care lucrezi. Aspecte ale CSS si jQuerry pot fi mai usor modificate in momentul in care ai toate aceste cunostinte.
WordPress poate face asta pentru tine, adica poate colecta toate aceste date iar in acest articol, vom invata mai multe despre modul in care o face si despre cum poti implementa acest cod in body class-ul wordpress.
In mod default, wordpress va genera mereu diferite clase css pentru fiecare sectiune in parte a site-ului tau. Deasemenea, ele va pune la dispozitie anumite filtre astfel incat cei care se ocupa cu dezvoltarea sau modificarea temelor si plugin-urilor wordpress sa isi poata realiza propriile clase. Pentru a efectua modificarile despre care vorbeam mai sus, vom folosi filtrul numit body_class pentru a adauga informatii legate de sistemul de operare si browserul utilizatorilor ca informatii CSS class.
Pentru inceput, trebuie sa mergeti la fisierul functions.php al temei si sa adaugati codul de mai jos.
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 script va fi capabila sa detecteze browser-ul utilizatorilor si sa adauge informatiile obtinute in $classes. Ultima linie va folosi filtrul body_class al WordPress pentru a adauga clase.
Acum va trebui sa adaugi blody class in tag-ul HTML <body> al temei, in header.php. Trebuie sa inlocuiesti linia body in template cu acest cod:
<body <?php body_class(); ?>>
Daca vei lucra cu o tema de starter cum ar fi underscore sau vei folosi o tema codata bine in theme frameworks cum ar fi Genesis, atunci tema ta va avea deja functia body class in body tag. Odata ce codul va fi implementat, vei vedea toate informatiile legate de browser-e si sisteme de operare cu body tag in sursa HTML.
Speram ca v-am fost de ajutor!