Adauga body class in WordPress despre browser si sistem de operare al utilizatorilor

, , Leave a comment

In momentul in care ai inceput dezvoltarea unei teme sau a unui plugin WordPress vei avea nevoie  de mai multe informatii legate de ce sisteme de operare si ce browsere folosesc vizitatorii tai. Cu ajutorul acestor informatii, vei fi capabil sa modifici anumite aspecte ale design-ului pentru a fi responsive, folosindu-te de CSS sau de jQuerry dupa caz. WordPress te poate ajuta cu colectarea acestor clase iar acest articol este un tutorial pentru toti cei care vor sa invete cum sa adauge clase despre browserele si sistemele de operare ale utilizatorilor in wordpress body class.

In mod default, wordpress va genera clase CSS, diferite pentru fiecare sectiune in parte a site-ului tau. Deasemenea, pune la dispozitie  anumite filtre cu ajutorul carora dezvoltatorii de plugin-uri si teme wordpress isi pot realiza propriile clase. Pentru a adauga informatiile legate de browsere si sisteme de operare in forma CSS class vei folosi filtrul numit body_class.

Pentru inceput, trebuie sa adaugi codul de mai jos in fisierul function.php al temei.

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');

Mai apoi, daca vei lucra cu o tema gen undercore sau Genesis, vei observa ca in body tag ai deja functia body class. Asta se intampla pentru ca una din teme este creata special pentru incepatori in ale codarii CSS iar cealalta este o tema codata bine in frameworks.

Imediat ce codul va fi implementat, vei putea sa vezi informatiile despre browserul si sistemul de operare al utilizatorului cu body tag, in sursa HTML.

 

Leave a Reply

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.