Cómo agregar un navegador de usuario y clases de SO en WordPress Body Class

Al desarrollar temas de WordPress, a veces puede necesitar la informaci√≥n del navegador y del sistema operativo del usuario para modificar ciertos aspectos de su dise√Īo usando CSS o jQuery. WordPress es capaz de hacer eso por ti. En este art√≠culo, le mostraremos c√≥mo agregar el navegador del usuario y las clases de sistema operativo en la clase de cuerpo de WordPress.

Detección de plataforma de usuario y navegador en 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 complementos puedan conectar 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 usa el filtro body_class de WordPress para agregar clases.

Ahora necesita agregar la clase de cuerpo a la Etiqueta HTML en el archivo header.php de tu tema. Reemplace la línea del cuerpo en su archivo de plantilla con este código:

>

Tenga en cuenta que si está trabajando con un tema de inicio como guiones bajos o marcos de temas bien codificados como Génesis, entonces su tema ya tendrá la función de clase de cuerpo en la etiqueta del cuerpo. Una vez que se implemente el código, podrá ver las clases del navegador y del sistema operativo con la etiqueta del cuerpo en la fuente HTML. También notará que WordPress agregará otras clases a la etiqueta del cuerpo.

Agregar información de navegador y sistema operativo en la clase de cuerpo de WordPress

Ahora puede dise√Īar 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 del sistema operativo del usuario en WordPress.

Si reci√©n est√° comenzando con el desarrollo de temas de WordPress, tambi√©n puede consultar nuestra introducci√≥n a Sass y WordPress Body Class 101 para nuevos dise√Īadores de temas. H√°ganos saber si tiene alg√ļn comentario o pregunta dejando un comentario a continuaci√≥n.

Fuente: Justin Sternberg