Cómo detectar dispositivos móviles en WordPress

Cuando estás creando una web es útil poder detectar si el usuario la visita en un dispositivo móvil o no.

El objetivo principal de esta característica es normalmente poder gestionar mejor el peso de la página, pero también se puede utilizar para ocultar o mostrar contenido en función del tipo de dispositivo en el que se encuentre el visitante.

Además, ofrecer distintos contenidos según el dispositivo te ofrece montones de oportunidades de optimización de ventas si tienes una tienda online, adaptándote a la navegación en cada dispositivo, móvil o no.

Antes de utilizar esta característica, ten en cuenta que la detección móvil no es un sustituto del uso de media queries o de un framework que sea adaptable (responsive), sino más bien un complemento que puede ayudarte a configurar con precisión tu tema WordPress.

Y no me refiero a ofrecer versiones responsive (adaptables a distintos dispositivos) de tu web, sino ejecutar y mostrar distintos elementos según el dispositivo.

La función wp_is_mobile

De lo que estoy hablando es de la función <a href="https://codex.wordpress.org/Function_Reference/wp_is_mobile" target="_blank" rel="nofollow noopener noreferrer">wp_is_mobile</a>, que te permite detectar si un visitante está usando un dispositivo móvil para ver tu web.

Esta función ejecuta una serie de pruebas basadas en la petición del agente de usuario del navegador del visitante y devuelve valores TRUE o FALSE a partir de los resultados de la prueba.

Puedes ver el detalle de lo que hace la función en el archivo /wp-includes/vars.php.

Su uso más eficaz es mediante condicionales, de este modo:

Solo tienes que sustituir el comentario en el fragmento de ejemplo por el código que se ejecutará en cada caso.

Fácil ¿no?

¡Ah! ¿que no?

Plugins WordPress para detectar dispositivos móviles

Si lo prefieres, también hay algún plugin que te permite detectar dispositivos móviles y tomar decisiones en consecuencia.

Mobile Detect

Este plugin usa la función wp_is_mobile, y está pensado para desarrolladores que quieran ir más allá de las posibilidades por defecto de WordPress.

Así, puedes usar métodos con clases, o añadir la identificación de tabletas. En la documentación te explican cómo usarlo para personalizar el uso de wp_is_mobile.

También es compatible con shortcodes, y aquí tienes varios ejemplos de uso.

Conditional Display for Mobile

Este plugin es bastante más personalizable que el anterior, y te permite incluir variables y condicionales para detectar distintos tipos de dispositivos móviles.

Tiene el shortcode [wonderplugin_cond][/wonderplugin_cond] que puedes usar envolviendo con él tu contenido, y luego usar los atributos del plugin para controlar dónde se mostrará cada contenido.

El plugin es compatible con dos atributos: deviceincludedeviceexclude.

deviceinclude puede usarse para mostrar el contenido solo a los dispositivos de la lista, y deviceexclude para ocultar el contenido de los dispositivos de la lista.

Los dispositivos que puede detectar son iPodiPhoneiPadiOSAndroidMobileWindowsMacLinux. Puedes especificar varios dispositivos, separándolos con comas.

Algunos detalles a tener en cuenta:

  • Si usas el dispositivo genérico llamado Mobile este incluirá todos los dispositivos móviles y tabletas: iPhone, iPad, iPod, Android móvil/tabletas.
  • Si quieres diferenciar entre dispositivos móviles y tabletas puedes especificar por separado varios dispositivos separados por comas, por ejemplo deviceinclude="iPhone,iPod,Android"deviceinclude="iPad".
  • Actualmente no hay ningún modo de detectar la diferencia entre móviles y tabletas con Android.

Te pongo algunos ejemplos:




Como ves, no tiene interfaz visual pero es muy fácil de usar y es muy personalizable.

Temas WordPress para ofrecer distinto contenido en dispositivos móviles

Cada vez hay más temas y maquetadores visuales que permiten estructurar tu web de forma que se muestre un contenido diferente a visitantes con dispositivos móviles.

Divi incorpora esta característica hace años, y es muy fácil de hacer. Pero además no hace mucho mejoró enormemente esta funcionalidad, extendiéndola a todos los elementos de  la página.

Todo elemento que puedes insertar en Divi, desde imágenes a textos, filas, columnas y secciones, puedes especificar cómo se verá en cada dispositivo, e incluso si se verá o no.

Además, también permite personalizar el aspecto global para dispositivos móviles, pudiendo incluso cambiar los menús, tipos de letra y más.

Y sí, también Elementor permite la edición adaptable a móviles, como puedes ver en la siguiente captura…

¿Y WordPress no puede hacer algo así?

Pues se está en ello, y al menos de momento hay algún plugin que incorpora esta funcionalidad en el editor de bloques, así que tiempo al tiempo.

Como has podido comprobar, por opciones no será, así que empieza a plantearte ofrecer contenido adaptado a los distintos dispositivos.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(5 votos, promedio: 5)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad
Ir al contenido