Cómo Agregar Clases de Navegador de Usuario y Sistema Operativo en la Clase Corporal de WordPress

Al desarrollar los temas de WordPress, a veces puede que necesites el navegador del usuario y la información del sistema operativo para modificar ciertos aspectos de tu diseño usando CSS o jQuery. WordPress es capaz de hacer eso por ti. En este artículo, le mostraremos cómo agregar las clases del navegador del usuario y del sistema operativo en la clase de cuerpo de 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 plugins puedan enganchar sus propias clases. Usará el filtro body_class para añadir información del navegador y del sistema operativo como clase CSS.

Lo primero que tienes que hacer es añadir el siguiente código en el archivo functions.php de tu tema.

12345678910111213141515161718192021222324functionmv_browser_body_class($classes) { global$is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;        if($is_lynx) $clases[] = 'lince'; elseif($is_gecko) $clases[] = 'gecko';        elseif($is_opera) $clases[] = `ópera'; elseif($is_NS4) $clases[] = `ns4'; elseif($is_safari) $clases[] = `safari';        elseif($is_chrome) $clases[] = 'chrome'; elseif($is_IE) { $classes[] = 'ie'; if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $navegador_version)) $clases[] = ie'.$navegador_version[1]; } else$classes[] = 'unknown'; if($is_iphone) $classes[] = 'iphone'; if( stristr( $_SERVER['HTTP_USER_AGENT'], "mac") ) $clases[] = 'osx'; } elseif( stristr( $_SERVER['HTTP_USER_AGENT'], "linux") ) $clases[] = 'linux'; } elseif( stristr( $_SERVER['HTTP_USER_AGENT'], "windows") ) $clases[] = '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 filtro de WordPress body_class para añadir clases.

Ahora necesitas añadir la clase body 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:

1>

Tenga en cuenta que si está trabajando con un tema inicial como guiones bajos o marcos temáticos bien codificados como Génesis, entonces su tema ya tendrá la función de clase de cuerpo en la etiqueta de cuerpo. Una vez implementado el código podrás ver las clases del navegador y del sistema operativo con el tag body en el código fuente HTML. También notará que habrá otras clases añadidas a la etiqueta de cuerpo por WordPress.

Ahora puede cambiar el estilo de las clases para diferentes navegadores y sistemas operativos o usarlas como selectores en jQuery. Esperamos que este artículo le haya ayudado a detectar el navegador del usuario y la información del sistema operativo en WordPress.

Si acabas de empezar con el desarrollo de los temas de WordPress, también puedes 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 alguna sugerencia o pregunta dejando un comentario a continuación.

Fuente: Justin Sternberg