Detectar móvil en WordPress

En ocasiones nos puede interesar detectar si nos visitan desde un móvil o no a nuestro WordPress. Vamos a ver una función que lo detecta, pero que tiene algunas características que debemos tener en cuenta, wp_is_mobile()

Si estás en este artículo, seguro que en resumidas cuentas quieres hacer es:

Mostrar o no un contenido, dependiendo si es o no un móvil. Si es ordenador, mostramos una cosa, y si es móvil mostramos otra. Un claro ejemplo sería un tipo de menú u otro, o una imágen optimizada para PC o una imágen optimizada para móvil.

WP_IS_MOBILE()

Esta función lo que hace es analizar si el $_SERVER[‘HTTP_USER_AGENT’] contiene palabras como Android, Kindle, BlackBerry… Veamos la función:

function wp_is_mobile() {
	if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
		$is_mobile = false;
	} elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false // Many mobile devices (all iPhone, iPad, etc.)
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Android' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Silk/' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Kindle' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) !== false ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	}

	/**
	 * Filters whether the request should be treated as coming from a mobile device or not.
	 *
	 * @since 4.9.0
	 *
	 * @param bool $is_mobile Whether the request is from a mobile device or not.
	 */
	return apply_filters( 'wp_is_mobile', $is_mobile );
}

Claro, esto hace que cualquiera pueda manipular el envío de datos para coger lo que le interese. Pero bueno, no nos vamos a poner aquí finolis. Digamos que la función hace su cometido.

El CSS

Normalmente jugamos con los CSS para adaptar nuestro tema a los diferentes dispositivos. Más concretamente, trabjamos con Media Queries.

@media (min-width: 690px) and (orientation: landscape) {
   ...
}

Pero también podemos jugar con la función wp_is_mobile para asignar uno u otro CSS a nuestros elementos:

$classes = "";
<?php
if ( wp_is_mobile() ) {
	$classes= "menu-mobile bordeado-mobile";
} else {
	$classes= "menu-desktop bordeado-desktop";
}
?>

<div class="<?php echo $classes; ?>">
   Contenido
</div>

O directamente podemos mostrar o no el contenido que nos interese:

<?php
if ( wp_is_mobile() ) {
  ?>
  <div id="data-mobile" class="content mobile">...</div>
  <?php
} else {
  ?>
  <div id="data-desktop" class="content desktop">...</div>
  <?php
}
?>

A partir de aquí se mostrará un contenido u otro dependiendo desde qué dispositivo nos visiten.

Otras opciones

Este código podemos utilizarlo en las plantillas, pero también podemos trabajar con plugins. Con el plugin Conditional Display for mobile, puedes instalarlo, y a partir de ahí, en los contenidos puedes utilizar los shortcodes para mostrar contenido según sea o no móvi (utiliza wp_is_mobile())

[wonderplugin_cond deviceinclude="Mobile"]
  Este contenido se muestra sólo en los móviles y tablets
[/wonderplugin_cond]

[wonderplugin_cond deviceexclude="Mobile"]
  Este contenido NO se muestra en móviles y tables
[/wonderplugin_cond]

[wonderplugin_cond deviceexclude="iPhone,iPad"]
  Este contenido se muestra en todos los dispositivos, excepto iPhone and iPad.
[/wonderplugin_cond]

Dicho de otra manera, te permite jugar con los contenidos, sin necesidad de entrar a los ficheros del tema.

Que bonito y sencillo

Pues no. Todo tiene sus pegas. Y el problema sebéis dónde podemos encontrarlo? Pues si, en las cachés. Si utilizas caché en tu web, puedes tener problemas… Se genera un código, y ahí que se queda… por

El uso de wp_is_mobile() para detectar si te visitan desde móvil en WordPress está bien, pero tiene sus pegas. Es una opción.

---

Más información

• Mozilla CSS Media Queries