Lors du développement de thèmes WordPress, vous pouvez parfois avoir besoin des informations du navigateur et du système d'exploitation de l'utilisateur pour modifier certains aspects de votre conception à l'aide de CSS ou de jQuery. WordPress est capable de le faire pour vous. Dans cet article, nous allons vous montrer comment ajouter les classes de navigateur et de système d'exploitation de l'utilisateur dans la classe de corps de WordPress.

Détection de la plate-forme utilisateur et du navigateur dans 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 accrocher leurs propres classes. Vous utiliserez le body_class filter pour ajouter des informations sur le navigateur et le système d'exploitation en tant que classe CSS.

La première chose que vous devez 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 à $classes ainsi que. La dernière ligne utilise le WordPress body_class filtre pour ajouter des classes.

Maintenant, vous devez ajouter la classe body à la <body> Balise HTML dans votre thème header.php fichier. Remplacez la ligne du corps 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 des traits de soulignement ou des cadres de thème bien codés comme Genesis, votre thème aura déjà la fonction de classe body 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 qu'il y aura d'autres classes ajoutées à la balise body par WordPress.

Ajout d'informations sur le navigateur et le système d'exploitation dans la classe de corps 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 pouvez également 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.

La source: Justin Sternberg

Laisser un commentaire