Cómo añadir clases de navegador y de sistema operativo en la clase de cuerpo de WordPress
Cuando desarrollas temas para WordPress, a veces puedes necesitar la información del navegador y del sistema operativo del usuario para modificar ciertos aspectos de tu diseño utilizando CSS o jQuery. WordPress es capaz de hacerlo por ti. En este artículo, te mostraremos cómo añadir las clases de navegador y sistema operativo del usuario en la clase body de WordPress
Por defecto, WordPress genera clases CSS para diferentes secciones de tu sitio web. También proporciona filtros, para que los desarrolladores de temas y plugins puedan enganchar sus propias clases. Utilizarás el filtro body_class
para añadir la información del navegador y del sistema operativo como clase CSS.
Lo primero que debes 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 del usuario y lo añade a $classes
. La segunda parte detecta el sistema operativo del usuario y lo añade a $classes
también. La última línea utiliza el WordPress body_class
para añadir clases
Ahora tienes que añadir la clase body al <body>
En la etiqueta HTML de tu tema header.php
de tu tema. Sustituye la línea del cuerpo de tu archivo de plantilla por este código
<body <?php body_class(); ?>>
Ten en cuenta que si estás trabajando con un tema de inicio como underscores o con frameworks de temas bien codificados como Genesis, entonces tu tema ya tendrá la función de la clase body 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 habrá otras clases añadidas a la etiqueta body por WordPress
Ahora puedes estilizar las clases para diferentes navegadores y sistemas operativos o utilizarlas como selectores en jQuery. Esperamos que este artículo te haya ayudado a detectar la información del navegador y del sistema operativo del usuario en WordPress
Si te estás iniciando en el desarrollo de temas para WordPress, quizá también quieras echar un vistazo a nuestra introducción a Sass y a WordPress Body Class 101 para nuevos diseñadores de temas. Haznos saber si tienes alguna opinión o pregunta dejando un comentario a continuación
Fuente Justin Sternberg
Si quieres conocer otros artículos parecidos a Cómo añadir clases de navegador y de sistema operativo en la clase de cuerpo de WordPress puedes visitar la categoría Themes.
Deja un comentario
¡Más Contenido!