Al desarrollar temas de WordPress, a veces es posible que necesite 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.
De forma predeterminada, WordPress genera clases de 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. Estarás usando el body_class
filtro 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 lo agrega a $classes
así como. La última línea usa WordPress body_class
filtro para agregar clases.
Ahora necesitas agregar la clase body a la <body>
Etiqueta HTML en su tema header.php
expediente. 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 de inicio como guiones bajos o marcos temáticos bien codificados como Genesis, entonces su tema ya tendrá la función de clase de cuerpo en la etiqueta de 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 habrá otras clases agregadas a la etiqueta del cuerpo por WordPress.
Ahora puede diseñar las 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 del navegador y del sistema operativo del usuario en WordPress.
Si recién está comenzando con el desarrollo de temas de WordPress, es posible que también desee echar un vistazo a 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.