Ao desenvolver temas para WordPress, às vezes você pode precisar de informações sobre o navegador e o sistema operacional do usuário para modificar certos aspectos do seu design usando CSS ou jQuery. O WordPress é capaz de fazer isso por você. Neste artigo, mostraremos como adicionar classes de navegador e SO do usuário à 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 desenvolvedores de temas e plugins possam adicionar suas próprias classes. Você usará o filtro body_class para adicionar informações do navegador e do sistema operacional como classe CSS.
A primeira coisa que você precisa fazer é adicionar o seguinte código ao 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 deste 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 as classes.
Agora você precisa adicionar a classe body à tag HTML <body> no arquivo header.php do seu tema. Substitua a linha do body no seu arquivo de template por este código:
<body <?php body_class(); ?>>
Observe que, se você estiver trabalhando com um tema inicial como underscores ou frameworks de tema bem codificados como Genesis, seu tema já terá a função body class na tag body. Assim que o código for implementado, você poderá ver as classes do navegador e do sistema operacional com a tag body no código-fonte HTML. Você também notará que outras classes serão adicionadas à tag body pelo WordPress.
Agora você pode estilizar as classes para diferentes navegadores e sistemas operacionais ou usá-las como seletores em jQuery. Esperamos que este artigo tenha ajudado você a detectar informações do navegador e do sistema operacional do usuário no WordPress.
Se você está apenas começando com o desenvolvimento de temas WordPress, talvez queira dar uma olhada em nossa introdução ao Sass e WordPress Body Class 101 para novos designers de temas. Deixe-nos saber se você tem algum feedback ou dúvida, deixando um comentário abaixo.
Fonte: Justin Sternberg
mrcio
Por algum motivo, no Safari em um Mac, está mostrando gecko linux
WPBeginner Support
Se você tiver um complemento de segurança ou CDN, ele pode estar enviando essas informações para o navegador em vez das informações corretas.
Admin
Adam
E se o usuário estiver usando o Edge? O navegador substituto do IE.
WPBeginner Support
This is an older article but for Edge, it is: is_edge following the above formatting
Admin
Adam
Fácil o suficiente. Obrigado!
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
Mais poder!!!
WPBeginner Support
Oi Mel,
Você pode adicionar
$is_edgeao código para detectar o Microsoft Edge.Admin
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
É exatamente isso que eu quero… muito obrigado…
best ever
Bill Robbins
Esta é uma maneira maravilhosa de ajustar o estilo para navegadores individuais. O único grande inconveniente é que pode sair pela culatra quando usado com alguns plugins/sistemas de cache. Você acabará aplicando estilos destinados a um navegador a todos os navegadores porque a tag body será armazenada em cache, assim como o restante do conteúdo da página.
WPBeginner Support
Bill, bom ponto. Estamos procurando uma solução alternativa e atualizaremos o artigo em breve. Obrigado por apontar isso.
Admin