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:

<?php
if ( wp_is_mobile() ) {
	/* Aquí lo que hace o pasa si es un dispositivo móvil */
} else {
	/* Aquí lo que hace o pasa si es un portátil o sobremesa */
}
?>

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:

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

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…
(6 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

2 comentarios en “Cómo detectar dispositivos móviles en WordPress”

  1. Buenas me ha encantado la publicación, y ahora mismo es lo que estoy necesitando para un tema que estoy haciendo. He estado probando la función y me parece perfecta, sería buena idea utilizarla si en desktop tengo que mostrar un carousel de imagenes y en móvil solo esas imágenes una debajo de otra.Cuan certera es esta función?. De antemano muchas gracias.

  2. Anselmo Martin

    Sólo tiene un pequeño problema y es que si has montado un CDN para tu página entonces el HTML que se le entrega a los usuarios estará cacheado, y si le hemos dado una página con el contenido movil, todos los usuarios verán ese contenido y no el correcto del navegador a pantalla grande y viceversa.
    A mi entender debe ser el CSS quien decida que se ve o no en cada caso y el contenido ser el mismo, por ejemplo la clase ver_movil tendría un display_none si el tamaño es mayor de uno específico y la clase ver_tablet otro y la clase ver_grande otro…

Deja un comentario

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

 

Ir arriba Ir al contenido