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

Detectar la plataforma y el navegador del usuario en 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

Añadir información del navegador y del sistema operativo en la clase body de 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.

Javired

¡Más Contenido!

Deja un comentario Cancelar la respuesta