Ao desenvolver temas do WordPress, às vezes você pode precisar das informações do navegador e do sistema operacional do usuário para modificar determinados aspectos do seu design usando CSS ou jQuery. O WordPress é capaz de fazer isso para você. Neste artigo, mostraremos como adicionar as classes do navegador e do sistema operacional do usuário na classe body do WordPress.
Por padrão, o WordPress gera classes CSS para diferentes seções do seu site. Ele também fornece filtros para que os desenvolvedores de temas e plug-ins possam adicionar suas próprias classes. Você usará o filtro body_class para adicionar informações sobre o navegador e o sistema operacional como classe CSS.
A primeira coisa que você precisa fazer é adicionar o seguinte código no arquivo functions.php do seu 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');
A primeira parte desse script detecta o navegador do usuário e o adiciona a $classes. A segunda parte detecta o sistema operacional do usuário e também o adiciona a $classes. A última linha usa o filtro body_class do WordPress para adicionar classes.
Agora você precisa adicionar a classe body à tag HTML <body> no arquivo header.php do seu tema. Substitua a linha body em seu arquivo de modelo por este código:
<body <?php body_class(); ?>>
Observe que, se estiver trabalhando com um tema inicial, como o underscores, ou com estruturas de temas bem codificadas, como o Genesis, seu tema já terá a função body class na tag body. Depois que o código for implementado, você poderá ver as classes do navegador e do sistema operacional com a tag body na fonte HTML. Você também perceberá que haverá outras classes adicionadas à tag body pelo WordPress.
Agora você pode estilizar as classes para diferentes navegadores e sistemas operacionais ou usá-las como seletores no jQuery. Esperamos que este artigo o tenha ajudado a detectar as informações do navegador e do sistema operacional do usuário no WordPress.
Se estiver apenas começando a desenvolver temas para o WordPress, talvez queira dar uma olhada em nossa introdução ao Sass e ao WordPress Body Class 101 para novos designers de temas. Se tiver algum feedback ou dúvida, deixe um comentário abaixo.
Fonte: Justin Sternberg
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Adam says
What if the user is using Edge? The IE replacement browser.
WPBeginner Support says
This is an older article but for Edge, it is: is_edge following the above formatting
Administrador
Adam says
Easy enough. Thanks!
Mel says
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!!!
WPBeginner Support says
Hi Mel,
You can add
$is_edgeto the code to detect Microsoft Edge.Administrador
Daniel Geiser says
Is there a possibility to detect Edge?
Rehan says
This is what i want exacly… thank you so much…
best ever
Bill Robbins says
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 says
Bill, Good point. We are looking for an alternative solution and will update the article soon. Thanks for pointing this out.
Administrador