Cuando desarrolle temas para WordPress, a veces necesitará la información del navegador / sistema operativo del usuario para modificar ciertos aspectos de su diseño utilizando CSS o jQuery. WordPress es capaz de hacerlo por usted. En este artículo, le mostraremos cómo añadir las clases de navegador / sistema operativo del usuario en la clase cuerpo de WordPress.
Por defecto WordPress genera clases CSS para las diferentes secciones de tu sitio web. También proporciona filtros, para que los desarrolladores de temas y plugins puedan ganchar sus propias clases. Utilizarás el filtro body_class para añadir la información del navegador / sistema operativo como clase CSS.
Lo primero que tienes que hacer es añadir el siguiente código en el archivo functions. php de tu 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');
La primera parte de este script detecta el navegador / explorador del usuario y lo añade a $classes. La segunda parte detecta el sistema operativo del usuario y también lo añade a $classes. La última línea usa el filtro body_class de WordPress para añadir clases.
Ahora necesitas añadir la clase body a la etiqueta HTML <body> en el archivo header.php de tu tema. Reemplaza la línea body en tu archivo de plantilla con este código:
<body <?php body_class(); ?>>
Ten en cuenta que si estás trabajando con un tema de inicio como underscores o frameworks de temas bien codificados como Genesis, entonces tu tema ya tendrá la función body class en la etiqueta body. Una vez implementado el código podrás ver las clases del navegador / sistema operativo con la etiqueta body en el código fuente HTML. También notarás que habrá otras clases añadidas a la etiqueta body por WordPress.
Ahora puede aplicar estilo a las clases para diferentes navegadores / sistemas operativos o usarlas como selectores en jQuery. Esperamos que este artículo le haya ayudado a detectar la información del navegador / sistema operativo del usuario en WordPress.
Si estás empezando con el desarrollo de temas para WordPress, entonces también puedes echar un vistazo a nuestra introducción a Sass y WordPress Body Class 101 para nuevos diseñadores de temas. Déjanos saber si tienes alguna respuesta / comentario / opinión.
Fuente: Justin Sternberg
Syed Balkhi
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
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
Administrador
Adam
Easy enough. Thanks!
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!!!
WPBeginner Support
Hi Mel,
You can add
$is_edgeto the code to detect Microsoft Edge.Administrador
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
This is what i want exacly… thank you so much…
best ever
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.
Administrador