Al desarrollar temas de WordPress, a veces puede necesitar información del navegador y del sistema operativo del usuario para modificar ciertos aspectos de su diseño utilizando CSS o jQuery. WordPress es capaz de hacer eso por usted. En este artículo, le mostraremos cómo agregar clases de navegador y sistema operativo del usuario a la clase body de WordPress.
Por defecto, WordPress genera clases CSS para diferentes secciones de su sitio web. También proporciona filtros, para que los desarrolladores de temas y plugins puedan agregar sus propias clases. Utilizará el filtro body_class para agregar información del navegador y del sistema operativo como clase CSS.
Lo primero que debe hacer es agregar el siguiente código en el archivo functions.php de su 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 del usuario y lo agrega a $classes. La segunda parte detecta el sistema operativo del usuario y también lo agrega a $classes. La última línea utiliza el filtro body_class de WordPress para agregar las clases.
Ahora necesitas agregar la clase body a la etiqueta HTML <body> en el archivo header.php de tu tema. Reemplaza la línea del 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 y del sistema operativo con la etiqueta body en el código fuente HTML. También notarás que WordPress agregará otras clases a la etiqueta body.
Ahora puedes estilizar las clases para diferentes navegadores y sistemas operativos o usarlas como selectores en jQuery. Esperamos que este artículo te haya ayudado a detectar la información del navegador y sistema operativo del usuario en WordPress.
Si recién estás comenzando con el desarrollo de temas de WordPress, es posible que también quieras echar un vistazo a nuestra introducción a Sass y WordPress Body Class 101 para nuevos diseñadores de temas. Háznos saber si tienes algún comentario o pregunta dejando un comentario a continuación.
Fuente: Justin Sternberg
mrcio
Por alguna razón en Safari en una Mac muestra gecko linux
Soporte de WPBeginner
Si tienes un complemento de seguridad o una CDN, es posible que esté enviando esa información al navegador en lugar de la información correcta.
Administrador
Adam
¿Qué pasa si el usuario está usando Edge? El navegador de reemplazo de IE.
Soporte de WPBeginner
This is an older article but for Edge, it is: is_edge following the above formatting
Administrador
Adam
Suficientemente fácil. ¡Gracias!
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
¡Más poder!
Soporte de WPBeginner
Hola Mel,
Puedes agregar
$is_edgeal código para detectar Microsoft Edge.Administrador
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
Esto es exactamente lo que quiero... muchas gracias...
best ever
Bill Robbins
Esta es una forma maravillosa de ajustar el estilo para navegadores individuales. El único inconveniente importante es que puede ser contraproducente cuando se usa con algunos complementos/sistemas de caché. Terminarás aplicando estilos destinados a un navegador a todos los navegadores porque la etiqueta body se almacenará en caché al igual que el resto del contenido de la página.
Soporte de WPBeginner
Bill, buen punto. Estamos buscando una solución alternativa y actualizaremos el artículo pronto. Gracias por señalarlo.
Administrador