En la primavera de 2012, se lanzó la versión 3.4 de WordPress. Además de introducir el Personalizador de Temas y la posibilidad de autoincrustar Tweets, la versión 3.4 también añadió una función que los desarrolladores podían utilizar para comprobar si el visitante de un sitio web se estaba conectando desde un dispositivo móvil, como un smartphone o una tablet.
Esa función — wp_is_mobile() — apareció en un momento en que la aclamada «Pantalla Retina» que Apple había presentado para su iPhone 4 era de unos escasos 640 x 960 píxeles. Cuando llegó el iPhone 5, unos meses después de WordPress 3.4, la pantalla del teléfono alcanzaba los 640 x 1.136 píxeles, todavía muy lejos de las pantallas de los modernos teléfonos inteligentes y tablets, que desdibujan los límites entre el espacio de pantalla móvil y de escritorio.
Entonces, ¿es wp_is_mobile() útil en la actualidad?
El propósito de la función wp_is_mobile()
En 2012, la compatibilidad de los navegadores con las media queries de CSS que permiten el diseño web adaptativo era todavía relativamente nueva.(¡Realmente nuevo para los usuarios del navegador Internet Explorer de Microsoft!) Pero permitir diseños de página que se adapten a las distintas dimensiones de las ventanas gráficas no era el objetivo de wp_is_mobile().
La función no distingue entre teléfonos y tablets y desconoce por completo los píxeles disponibles en el navegador de un visitante. En cambio, wp_is_mobile() se concibió como una herramienta que permitiría a los desarrolladores optimizar el ancho de banda al responder a dispositivos móviles que a menudo tenían poca potencia y posiblemente estaban en manos de usuarios que pagaban a sus proveedores de telecomunicaciones por las transferencias de datos.
Hoy en día, con teléfonos y tablets más potentes que muchos ordenadores de sobremesa disponibles en 2012, puede que estrangular el ancho de banda sea menos importante, pero sigue habiendo casos de uso para una función que simplemente divide el mundo en dos: dispositivos móviles y todo lo demás.
La función wp_is_mobile() en acción
La función wp_is_mobile() de WordPress devuelve true cuando se ejecuta como resultado de una petición de los navegadores de la mayoría de los teléfonos inteligentes y tablets (incluido el Kindle). Así, el ejemplo clásico de la función que genera diferentes flujos de contenido en PHP tiene este aspecto:
<?php if( wp_is_mobile()){ ?>
<p>This content is for mobile devices</p>
<?php } else { ?>
<p>This content is for desktops (and laptops).</p>
<?php } ?>Si realmente necesitas optimizar la salida de tu sitio web para dispositivos móviles (probablemente para minimizar los requisitos de ancho de banda), la técnica anterior podría utilizarse en archivos de tema para generar estructuras totalmente diferentes para páginas de móvil y de escritorio.
Detección de dispositivos para ajustes granulares del contenido
Las media queries de CSS y otras técnicas que soportan el diseño web responsivo pueden ayudar a que los diseños de página se adapten a una amplia variedad de tamaños y orientaciones de pantalla. Pero no pueden ayudarte a comunicarte con los visitantes de tu sitio como usuarios de móviles o de ordenadores de sobremesa.
Por ejemplo, sabes que los usuarios de ordenadores de sobremesa probablemente utilizarán un ratón para «hacer clic» en elementos de tu sitio, mientras que los usuarios de móviles «tocarán». Los usuarios de ordenadores de sobremesa pueden hacer «clic con el botón derecho» en un enlace para abrirlo en una nueva ventana del navegador. Mientras tanto, los usuarios de móvil pueden «mantener pulsado» para iniciar la misma tarea. El mero hecho de comunicarte con los usuarios sobre cómo navegar por tu sitio web (como en tu documentación de ayuda) podría significar que estás utilizando la terminología equivocada la mitad de las veces.
A continuación te explicamos cómo podemos combinar wp_is_mobile() y los shortcodes de WordPress para soportar la salida granular de contenido móvil o de escritorio de una forma que también sea fácil de manejar para los editores del sitio web.
Utilizaremos nuestra detección de móvil/escritorio junto con las funciones de WordPress add_shortcode() y do_shortocde() para crear herramientas de shortcode que los editores puedan aplicar en las entradas.
En primer lugar, añadiremos este código al archivo functions.php (después de protegerlo creando un tema hijo):
/**
* Add shortcodes
*/
// Create [desktop] shortcode
add_shortcode('desktop', 'show_desktop_content');
function show_desktop_content($atts, $content = null){
if( !wp_is_mobile() ){
return do_shortcode( $content );
} else {
return null;
}
}
// Create [mobile] shortcode
add_shortcode('mobile', 'show_mobile_content');
function show_mobile_content($atts, $content = null){
if( wp_is_mobile() ){
return do_shortcode( $content );
} else {
return null;
}
}Esto crea los shortcodes [desktop] (escritorio) y [mobile] (móvil) (y sus etiquetas de cierre) que podemos utilizar en cualquier contenido de entrada o página como éste:
<h2>Password Help</h2>
To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.En un dispositivo móvil, el contenido anterior aparecerá así:
En el resto de dispositivos, los visitantes verán esto:
Esta técnica hace que sea bastante fácil ofrecer contenido que sea «consciente» de cómo interactúan los visitantes con tu sitio de WordPress.
La función wp_is_mobile() y el almacenamiento en caché de WordPress
No hace falta que lleves utilizando WordPress desde 2012 para saber que el almacenamiento en caché de páginas es una de las formas más eficaces de mejorar el rendimiento. Pero el almacenamiento en caché básico de WordPress puede echar por tierra los intentos de ofrecer contenidos diferentes en las peticiones de la misma página.
El caché de WordPress de una página individual se inicia con una solicitud del cliente. Si esa primera petición procede de un dispositivo móvil, el contenido almacenado en caché se adaptará a los usuarios de móviles si es modificado por wp_is_mobile(). Y cada solicitud posterior de esa página entregará contenido para móviles — incluso a los usuarios de ordenadores de sobremesa — hasta que se borre el caché.
Por eso la plataforma de Alojamiento Administrado para WordPress de Kinsta admite cachés separados para contenido móvil y de escritorio, empezando por el caché local de tu servidor web NGINX y extendiéndose al Caché Edge de Kinsta en 260+ PoPs de Cloudflare de todo el mundo.
Habilitar el caché de páginas para dispositivos móviles se consigue con sólo un par de clics (¡o toques!) en el panel de MyKinsta:
Resumen
La función de WordPress wp_is_mobile() puede parecer un recuerdo del pasado, pero puedes encontrar usos para su detección de «móvil o escritorio» que pueden ayudarte a crear una mejor experiencia para todos los visitantes de tu sitio web.
No olvides que necesitarás cachés separados para los distintos contenidos que generes si quieres obtener el mejor rendimiento de estas rutas para móvil y escritorio.
¿Tienes alguna idea genial para aprovechar wp_is_mobile()? Háznoslo saber en el comentario de abajo.
Steve Bonisteel es un Editor Técnico de Kinsta que comenzó su carrera de redactor como periodista de prensa escrita, persiguiendo ambulancias y camiones de bomberos. Lleva tratando temas relacionados con la tecnología de Internet desde finales de la década de 1990.
Deja una respuesta