Cómo agregar clases de navegador y sistema operativo de usuario en WordPress Body Class

Al desarrollar temas de WordPress, es posible que a veces necesite la información del navegador y del sistema operativo del usuario para modificar algunos aspectos de su diseño usando CSS o jQuery. WordPress puede hacerlo por ti. En este artículo, le mostraremos cómo agregar las clases de navegador y sistema operativo del usuario en la clase de cuerpo de WordPress.

De forma predeterminada, WordPress genera clases de CSS para diferentes secciones de su sitio web. También proporciona filtros, por lo que los desarrolladores de plugins y temas pueden vincular sus propias clases. Usarás el body_class filtro para agregar información del navegador y del sistema operativo como una 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 lo agrega a $classes además. La última línea usa WordPress body_class filtro para agregar clases.

Ahora necesitas agregar la clase de cuerpo al archivo <body> Etiquetas HTML en tu tema header.php archivo. Reemplace la línea del cuerpo en su archivo de plantilla con este código:

<body <?php body_class(); ?>>

Tenga en cuenta que si está trabajando con un tema inicial como guiones bajos o marcos temáticos bien codificados como Genesis, su tema ya tendrá la función de clase de cuerpo en la etiqueta de cuerpo. Una vez implementado 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 habrá otras clases agregadas a la etiqueta del cuerpo por WordPress.

Se agregó información del navegador y del sistema operativo en la clase de cuerpo de WordPress

Ahora puede definir clases para diferentes navegadores y sistemas operativos o usarlos como selectores en jQuery. Esperamos que este artículo le haya ayudado a detectar la información de su navegador y sistema operativo en WordPress.

Fuente: Justin Sternberg

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *