Quando si sviluppano temi per WordPress, a volte potresti aver bisogno delle informazioni sul browser e sul sistema operativo dell'utente per modificare determinati aspetti del tuo design utilizzando CSS o jQuery. WordPress è in grado di farlo per te. In questo articolo, ti mostreremo come aggiungere classi per browser e sistema operativo dell'utente alla WordPress body class.
Per impostazione predefinita, WordPress genera classi CSS per diverse sezioni del tuo sito web. Fornisce anche filtri, in modo che gli sviluppatori di temi e plugin possano agganciare le proprie classi. Utilizzerai il filtro body_class per aggiungere informazioni sul browser e sul sistema operativo come classe CSS.
La prima cosa da fare è aggiungere il seguente codice al file functions.php del tuo 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 anch'esso a $classes. L'ultima riga utilizza il filtro body_class di WordPress per aggiungere le classi.
Ora devi aggiungere la classe body al tag HTML <body> nel file header.php del tuo tema. Sostituisci la riga del body nel tuo file template con questo codice:
<body <?php body_class(); ?>>
Nota che se stai lavorando con un tema starter come underscores o framework per temi ben codificati come Genesis, allora il tuo tema avrà già la funzione body class nel tag body. Una volta implementato il codice, sarai in grado di vedere le classi del browser e del sistema operativo con il tag body nel sorgente HTML. Noterai anche che ci saranno altre classi aggiunte al tag body da WordPress.
Ora puoi stilizzare le classi per diversi browser e sistemi operativi o usarle come selettori in jQuery. Speriamo che questo articolo ti abbia aiutato a rilevare le informazioni sul browser e sul sistema operativo dell'utente in WordPress.
Se stai appena iniziando con lo sviluppo di temi WordPress, potresti anche voler dare un'occhiata alla nostra introduzione a Sass e a WordPress Body Class 101 per nuovi designer di temi. Facci sapere se hai feedback o domande lasciando un commento qui sotto.
Fonte: Justin Sternberg
mrcio
Per qualche motivo su Safari su un Mac viene mostrato gecko linux
Supporto WPBeginner
Se hai un addon di sicurezza o una CDN, potrebbe inviare tali informazioni al browser invece delle informazioni corrette.
Amministratore
Adam
E se l'utente stesse usando Edge? Il browser sostitutivo di IE.
Supporto WPBeginner
This is an older article but for Edge, it is: is_edge following the above formatting
Amministratore
Adam
Abbastanza facile. Grazie!
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
Più potenza!!!
Supporto WPBeginner
Ciao Mel,
Puoi aggiungere
$is_edgeal codice per rilevare Microsoft Edge.Amministratore
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
Questo è esattamente quello che voglio... grazie mille...
best ever
Bill Robbins
Questo è un modo meraviglioso per modificare lo stile per i singoli browser. L'unico inconveniente principale è che può ritorcersi contro quando viene utilizzato con alcuni plugin/sistemi di caching. Finirai per applicare stili destinati a un browser a tutti i browser perché il tag body verrà memorizzato nella cache proprio come il resto del contenuto della pagina.
Supporto WPBeginner
Bill, buon punto. Stiamo cercando una soluzione alternativa e aggiorneremo presto l'articolo. Grazie per averlo segnalato.
Amministratore