Detectar correctamente dispositivos moviles en WordPress



Últimamente me vienen muchos encargos en los que el diseño en móvil y el diseño en web son totalmente diferentes, ya no solo pequeños ajustes sino comportamientos en la forma de mostrar los contenidos.

El responsive  me ayudan a colocar cosas  pero para optimizar el código no consiste en ocultar ese html para movil y mostrarlo en web para que este optimizado necesito enviar la informacion justa y necesaria. No tiene sentido que estemos optimizando que si el html, la carga de los ficheros y lo mas basico el html no lo estemos cuidando.  Me he encontrado proyectos con web que tenian problemas de rendimiento y es que cuando detectaban en el javascript que era un movil reescribian y convertian lo que era un listado en un carousel y cosas asi.

 

Hace tiempo buscando en  google parecía que había encontrado la funcion de WordPress que me iba a dar la solucion,  wp_is_mobile() que nos indica si es un dispositivo móvil o no, pero jajaja no funciona correctamente y esta indicada para que no se use en temas, creo que es una de las cosas que deberian mejorar.

Los principales problemas suelen ser los sistemas de cache, ademas que en las pruebas que he realizado en un tema con la funcion wp_is_mobile() solo funcionaba si el usuario estaba registrado.

Por otro lado, también existen  variables globales para detectar navegadores  y servidores pero no cumplia con lo que necesitaba.

Ejemplo:

  • $is_iphone (boolean) iPhone Safari
  • $is_chrome (boolean) Google Chrome
  • $is_safari (boolean) Safari
  • $is_NS4 (boolean) Netscape 4
  • $is_opera (boolean) Opera
  • $is_macIE (boolean) Mac Internet Explorer
  • $is_winIE (boolean) Windows Internet Explorer
  • $is_gecko (boolean) FireFox
  • $is_lynx (boolean)
  • $is_IE (boolean) Internet Explorer
  • $is_edge (boolean) Microsoft Edge

 

Buscando encontré esta otra librería una gran joya que he probado en mas de un proyecto y no se ha quejado nadie aun   mobile-detect de serbanghita y de ella parten varios plugins para WordPress.

 

Ejemplo de como usarla mobile-detect en tus temas

1.- Lo primero que tenemos que hacer es añadir  Mobile_Detect.php en nuestra carpeta del tema.

2.- Luego tenemos que incluirla  en functions.php  podriamos usar:

Ahora ya la tenemos lista para usar.

3.- functions.php // aqui vamos a declarar las funciones para luego usarlas en nuestros templates

4.- ejemplo de como usarla en el index.php o en cualquier otro sitio

 

Existen muchas funciones pero eso podéis verlo en las librerías os pongo las dos de ellas pero la clase $mobble_detect se puede preguntar por dispositivo, versión ,…

 

 

 

 

Personalmente creo que WordPress debería incluir  todo este tipo de funciones. Hace años quizás no era necesario pero hoy en dia es como el responsive algo obligatorio.