Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter les classes de navigateur et de système d’exploitation des utilisateurs/utilisatrices dans la classe de corps de WordPress.

Lors du développement de thèmes WordPress, il peut arriver que vous ayez besoin des informations relatives au navigateur et au système d’exploitation de l’utilisateur pour modifier certains aspects de votre design à l’aide de CSS ou de jQuery. WordPress est capable de faire cela pour vous. Dans cet article, nous allons vous afficher comment ajouter les classes de navigateur et de système d’exploitation de l’utilisateur dans la classe de corps de WordPress.

Detecting user platform and browser in WordPress

Par défaut, WordPress génère des classes CSS pour les différentes sections de votre site. Il fournit également des filtres, de sorte que les développeurs de thèmes/développeuses peuvent crocheter 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 du compte 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 dans votre fichier de modèle par ce code :

<body <?php body_class(); ?>>

Note que si vous travaillez avec un thème starter comme tiret bas ou des frameworks de thème bien codés comme Genesis, alors 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 de navigateur et de système d’exploitation avec l’identifiant body dans la source HTML. Vous remarquerez également que d’autres classes seront ajoutées à la balise body par WordPress.

Adding browser and OS information in WordPress body class

Maintenant, vous pouvez styliser les classes pour différents navigateurs et système d’exploitation ou les utiliser comme sélecteurs dans jQuery. Nous espérons que cet article vous a aidé à détecter les informations sur le navigateur et le système d’exploitation des utilisateurs/utilisatrices dans WordPress.

Si vous débutez dans le développement de thèmes WordPress, vous pouvez également jeter un œil à notre introduction à Sass et à WordPress Body Class 101 pour les nouveaux concepteurs de thèmes. Faites-nous savoir si vous avez des retours ou des questions en laissant un commentaire ci-dessous.

Source : Justin Sternberg

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

9 commentairesLaisser une réponse

  1. 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 :)

      Administrateur

  2. 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!!!

  3. Daniel Geiser

    Is there a possibility to detect Edge? ;)

  4. Rehan

    This is what i want exacly… thank you so much…

    best ever :)

  5. 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.

      Administrateur

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.