Cómo Agregar Clases De Navegador Y Sistema Operativo De Usuario En La Clase De Cuerpo De Wordpress

Cómo agregar clases de navegador y sistema operativo de usuario en la clase de cuerpo de WordPress

Al desarrollar temas de WordPress, a veces es posible que necesite información del navegador y el sistema operativo del usuario para modificar algún aspecto de su diseño usando CSS o jQuery. WordPress puede hacer esto por ti. En este artículo, le mostraremos cómo agregar clases de navegador y sistema operativo de 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 temas y complementos pueden conectar sus propias clases. Utilizará el filtro body_class 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 al 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) $ 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[] = ‘cromo’; elseif ($ is_IE) {$ clases[] = ‘es decir’; si (preg_match (‘/ MSIE ([0-9]+) ([a-zA-Z0-9.]+) / ‘, $ _SERVE[‘HTTP_USER_AGENT’], $ browser_version)) $ clases[] = ‘es decir’. $ browser_version[1]; } else $ clases[] = ‘desconocido’; if ($ is_iphone) $ clases[] = ‘iphone’; si (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[] = ‘ventanas’; } devuelve $ clases; } 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 las clases $. La última línea usa el filtro body_class de WordPress para agregar clases. Ahora necesitas agregar la clase body a la Etiqueta HTML en el archivo header.php de su tema. Reemplace la línea del cuerpo de 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 tema 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 A 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 le haya ayudado a detectar la información del navegador y del sistema operativo del usuario en WordPress. Si es nuevo en 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

Leave a Reply