Lors du développement de thèmes WordPress, vous pourriez parfois avoir besoin d'informations sur le navigateur et le système d'exploitation de l'utilisateur pour modifier certains aspects de votre conception à l'aide de CSS ou jQuery. WordPress est capable de le faire pour vous. Dans cet article, nous vous montrerons comment ajouter des classes de navigateur et d'OS utilisateur à la classe body de WordPress.
Par défaut, WordPress génère des classes CSS pour différentes sections de votre site Web. Il fournit également des filtres, afin que les développeurs de thèmes et de plugins puissent ajouter leurs propres classes. Vous utiliserez le filtre body_class pour ajouter des informations sur le navigateur et le système d'exploitation en tant que classe CSS.
La première chose à faire est d'ajouter le code suivant dans le fichier functions.php de votre thème.
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 première partie de ce script détecte le navigateur de l'utilisateur et l'ajoute à $classes. La deuxième partie détecte le système d'exploitation de l'utilisateur et l'ajoute également à $classes. La dernière ligne utilise le filtre body_class de WordPress pour ajouter des classes.
Vous devez maintenant ajouter la classe body à la balise HTML <body> dans le fichier header.php de votre thème. Remplacez la ligne body de votre fichier de modèle par ce code :
<body <?php body_class(); ?>>
Notez que si vous travaillez avec un thème de démarrage comme underscores ou des frameworks de thème bien codés comme Genesis, votre thème aura déjà la fonction body class dans la balise body. Une fois le code implémenté, vous pourrez voir les classes du navigateur et du système d'exploitation avec la balise body dans la source HTML. Vous remarquerez également que d'autres classes seront ajoutées à la balise body par WordPress.
Vous pouvez maintenant styliser les classes pour différents navigateurs et systèmes d'exploitation ou les utiliser comme sélecteurs dans jQuery. Nous espérons que cet article vous a aidé à détecter les informations du navigateur et du système d'exploitation de l'utilisateur dans WordPress.
Si vous débutez dans le développement de thèmes WordPress, vous voudrez peut-être aussi consulter notre introduction à Sass et WordPress Body Class 101 pour les nouveaux concepteurs de thèmes. Faites-nous savoir si vous avez des commentaires ou des questions en laissant un commentaire ci-dessous.
Source : Justin Sternberg
mrcio
Pour une raison quelconque, sur Safari sur un Mac, il affiche gecko linux
Support WPBeginner
Si vous avez un module de sécurité ou un CDN, il se peut qu'il envoie ces informations au navigateur au lieu des informations correctes.
Admin
Adam
Qu'en est-il si l'utilisateur utilise Edge ? Le navigateur de remplacement d'IE.
Support WPBeginner
This is an older article but for Edge, it is: is_edge following the above formatting
Admin
Adam
Assez facile. Merci !
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
Plus de puissance !!!
Support WPBeginner
Salut Mel,
Vous pouvez ajouter
$is_edgeau code pour détecter Microsoft Edge.Admin
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
C'est exactement ce que je veux... merci beaucoup...
best ever
Bill Robbins
C'est une excellente façon de modifier le style pour les navigateurs individuels. Le seul inconvénient majeur est que cela peut se retourner contre vous lorsque vous l'utilisez avec certains plugins/systèmes de mise en cache. Vous finirez par appliquer des styles destinés à un navigateur à tous les navigateurs car la balise body sera mise en cache tout comme le reste du contenu de la page.
Support WPBeginner
Bill, bonne remarque. Nous recherchons une solution alternative et mettrons bientôt à jour l'article. Merci de l'avoir signalé.
Admin