![\"D\u00e9tection](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/crossplatform.jpg\" "\\"D\u00e9tection")
<\/p>\nLors du d\u00e9veloppement de th\u00e8mes WordPress, vous pouvez parfois avoir besoin d’informations provenant du navigateur et du syst\u00e8me d’exploitation de l’utilisateur pour modifier certains aspects de votre conception \u00e0 l’aide de CSS ou de jQuery. WordPress est capable de le faire pour vous. Dans cet article, nous vous montrerons comment ajouter des classes de navigateur utilisateur et de syst\u00e8me d’exploitation dans la classe de corps WordPress. <\/p>\n
<\/p>\n
Par d\u00e9faut, WordPress g\u00e9n\u00e8re des classes CSS pour diff\u00e9rentes sections de votre site Web. Il fournit \u00e9galement des filtres, afin que les d\u00e9veloppeurs de th\u00e8mes et de plugins puissent connecter leurs propres classes. Vous utiliserez le filtre body_class pour ajouter des informations sur le navigateur et le syst\u00e8me d’exploitation en tant que classe CSS.<\/p>\n
La premi\u00e8re chose \u00e0 faire est d’ajouter le code suivant dans le fichier functions.php de votre th\u00e8me. <\/p>\n
function mv_browser_body_class($classes) {\r\n global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;\r\n if($is_lynx) $classes[] = 'lynx';\r\n elseif($is_gecko) $classes[] = 'gecko';\r\n elseif($is_opera) $classes[] = 'opera';\r\n elseif($is_NS4) $classes[] = 'ns4';\r\n elseif($is_safari) $classes[] = 'safari';\r\n elseif($is_chrome) $classes[] = 'chrome';\r\n elseif($is_IE) {\r\n $classes[] = 'ie';\r\n if(preg_match('\/MSIE ([0-9]+)([a-zA-Z0-9.]+)\/', $_SERVER['HTTP_USER_AGENT'], $browser_version))\r\n $classes[] = 'ie'.$browser_version[1];\r\n } else $classes[] = 'unknown';\r\n if($is_iphone) $classes[] = 'iphone';\r\n if ( stristr( $_SERVER['HTTP_USER_AGENT'],\"mac\") ) {\r\n $classes[] = 'osx';\r\n } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],\"linux\") ) {\r\n $classes[] = 'linux';\r\n } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],\"windows\") ) {\r\n $classes[] = 'windows';\r\n }\r\n return $classes;\r\n }\r\n add_filter('body_class','mv_browser_body_class');\r\n<\/pre>\nLa premi\u00e8re partie de ce script d\u00e9tecte le navigateur de l’utilisateur et l’ajoute \u00e0 $ classes. La deuxi\u00e8me partie d\u00e9tecte le syst\u00e8me d’exploitation de l’utilisateur et l’ajoute \u00e9galement \u00e0 $ classes. La derni\u00e8re ligne utilise le filtre WordPress body_class pour ajouter des classes. <\/p>\n
Vous devez maintenant ajouter la classe de corps \u00e0 la <\/p>\n
Balise HTML dans le fichier header.php de votre th\u00e8me. Remplacez la ligne de corps dans votre fichier mod\u00e8le par ce code: <\/p>\n
>\r\n<\/pre>\nNotez que si vous travaillez avec un th\u00e8me de d\u00e9marrage comme des traits de soulignement ou des cadres de th\u00e8me bien cod\u00e9s comme Genesis, votre th\u00e8me aura d\u00e9j\u00e0 la fonction de classe de corps dans la balise body. Une fois le code impl\u00e9ment\u00e9, vous pourrez voir le navigateur et les classes de syst\u00e8me d’exploitation avec la balise body dans la source HTML. Vous remarquerez \u00e9galement que WordPress ajoutera d’autres classes \u00e0 la balise body. <\/p>\n
![\"Ajouter](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/1590104229_506_bodyclasses.png\" "\\"Ajouter")
<\/p>\n
Vous pouvez maintenant concevoir les classes pour diff\u00e9rents navigateurs et syst\u00e8mes d’exploitation ou les utiliser comme s\u00e9lecteurs dans jQuery. Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 d\u00e9tecter les informations du navigateur et du syst\u00e8me d’exploitation de l’utilisateur dans WordPress. <\/p>\n
Si vous d\u00e9butez avec le d\u00e9veloppement de th\u00e8mes WordPress, vous pouvez \u00e9galement consulter notre introduction \u00e0 Sass et WordPress Body Class 101 pour les nouveaux concepteurs de th\u00e8mes. Veuillez nous faire savoir si vous avez des commentaires ou des questions en laissant un commentaire ci-dessous. <\/p>\n
Source: Justin Sternberg<\/p>\n ","protected":false},"excerpt":{"rendered":"
Lors du d\u00e9veloppement de th\u00e8mes WordPress, vous pouvez parfois avoir besoin d’informations provenant du navigateur et du syst\u00e8me d’exploitation de l’utilisateur pour modifier certains aspects de votre conception \u00e0 l’aide de CSS ou de jQuery. WordPress est capable de le faire pour vous. Dans cet article, nous vous montrerons comment ajouter des classes de navigateur […]<\/p>\n","protected":false},"author":1,"featured_media":14221,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-14220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-themes"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/14220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/comments?post=14220"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/14220\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media\/14221"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media?parent=14220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/categories?post=14220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/tags?post=14220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}