Al desarrollar temas de WordPress, a veces puede necesitar información sobre el navegador y el sistema operativo del usuario para modificar ciertos aspectos de su diseño usando CSS o jQuery. WordPress puede hacerlo por ti. En este artículo, le mostraremos cómo agregar el navegador del usuario y las clases del sistema operativo 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 temas y complementos pueden conectar 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 $classes además. La última línea usa WordPress body_class filtro para agregar clases.

Ahora necesita agregar la clase de cuerpo a <body> Etiquetas HTML en tus temas 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 de tema bien codificados como Génesis, 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.

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

Ahora puede modelar clases para diferentes navegadores y sistemas operativos o usarlas 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.

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

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

Ultima actualización en 11 de marzo de 2014 por Redacción | Divulgación del lectorDivulgar: Nuestro contenido es respaldado por el lector. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Descubra cómo se financia WPBeginner, por qué es importante y cómo puede apoyarnos.

Comportamiento

Para compartir

Pío

Para compartir

Alfiler

Facebook Messenger

Correo electrónico

Plataforma de usuario y detección de navegador en WordPress

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');

Ahora necesita agregar la clase de cuerpo a <body> Etiquetas HTML en tus temas header.php Archivo. Reemplace la línea del cuerpo en su archivo de plantilla con este código: