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

wp_is_mobile

, 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:

deviceinclude

deviceexclude

.

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

iPod

iPhone

iPad

iOS

Android

Mobile

Windows

Mac

Linux

. 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:

[wonderplugin_cond deviceinclude="Mobile"]
Este contenido solo se mostrará en dispositivos móviles y tabletas.
[/wonderplugin_cond]

[wonderplugin_cond deviceexclude="Mobile"]
Este contenido se ocultará en dispositivos móviles y tabletas.
[/wonderplugin_cond]

[wonderplugin_cond deviceexclude="iPhone,iPad"]
Este contenido se mostrará en todos los dispositivos excepto en iPhone e iPad.
[/wonderplugin_cond]

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.

La entrada Cómo detectar dispositivos móviles en WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *