Quando si sviluppano temi per WordPress, a volte è necessario conoscere le informazioni sul browser e sul sistema operativo dell’utente per modificare alcuni aspetti del design utilizzando CSS o jQuery. WordPress è in grado di farlo per voi. In questo articolo vi mostreremo come aggiungere le classi del browser e del sistema operativo dell’utente nel contenuto di WordPress.
Di default WordPress genera classi CSS per le diverse sezioni del sito web. Fornisce anche dei filtri, in modo che gli sviluppatori di temi e plugin possano hookare le proprie classi. Utilizzerete il filtro body_class per aggiungere le informazioni sul browser e sul sistema operativo come classi CSS.
La prima cosa da fare è aggiungere il seguente codice nel file functions.php del tema.
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');
La prima parte di questo script rileva il browser dell’utente e lo aggiunge a $classes. La seconda parte rileva il sistema operativo dell’utente e lo aggiunge a $classes. L’ultima riga utilizza il filtro body_class di WordPress per aggiungere le classi.
Ora è necessario aggiungere la classe body al tagga HTML <body> nel file header.php del tema. Sostituire il contenuto del body nel file del template con questo codice:
<body <?php body_class(); ?>>
Si noti che se si sta lavorando in corso d’opera con un tema iniziale come underscores o con framework di temi ben codificati come Genesis, il tema avrà già la funzione body class nel tagga body. Una volta implementato il codice, si potranno vedere le classi del browser e del sistema operativo nel tagga body nel sorgente HTML. Si noterà anche che WordPress aggiungerà altre classi al tagga body.
Ora è possibile stilizzare le classi per i diversi browser e sistemi operativi o utilizzarle come selettori in jQuery. Speriamo che questo articolo vi abbia aiutato a rilevare le informazioni sul browser e sul sistema operativo dell’utente in WordPress.
Se siete alle prime armi con lo sviluppo di temi per WordPress, potreste anche dare un’occhiata alla nostra introduzione a Sass e a WordPress Body Class 101 per i nuovi designer di temi. Fateci sapere se avete feedback o domande lasciando un commento qui sotto.
Fonte: Justin Sternberg
Adam
What if the user is using Edge? The IE replacement browser.
WPBeginner Support
This is an older article but for Edge, it is: is_edge following the above formatting
Admin
Adam
Easy enough. Thanks!
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
More power!!!
WPBeginner Support
Hi Mel,
You can add
$is_edgeto the code to detect Microsoft Edge.Admin
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
This is what i want exacly… thank you so much…
best ever
Bill Robbins
This is a wonderful way to tweak styling for individual browsers. The only major drawback is it can backfire when used with some caching plugins/systems. You’ll end up applying styles intended for one browser to all browsers because the body tag will be cached just like the rest of the content on the page.
WPBeginner Support
Bill, Good point. We are looking for an alternative solution and will update the article soon. Thanks for pointing this out.
Admin