3 formas de desarrollar tu tema móvil en WordPress

Reading time aprox: 4 minutes, 14 seconds

3 formas de desarrollar tu tema móvil en WordPress

Hacer que tu tema o tema hijo de WordPress esté preparado para ser visto en un «smartphone» o, «tablet» o, «celular» o, en definitiva, un dispositivo de reducidas dimensiones, es una necesidad hoy en día.

Si tu Tema, no es «mobile ready» (Listo para móviles), permíteme decirte que ¡tienes un problema!. Tu SEO será más bajo, hasta puede que no aparezcas en las listas de las máquinas de búsqueda.

Ya te conté en Hacer que WordPress esté listo para móvil, las fórmulas para hacer esta tarea de forma fácil, pero … ¡eres un desarrollador!, ¡lo fácil es para otros!

3 formas de desarrollar tu tema móvil en WordPress

Como instalar Plugins y Temas es muy fácil, tu estás creando tu propio tema o Tema hijo y, es aquí donde tu imaginación puede y debe mostrarse.

Tu cliente (si, tu eres tu cliente también) desea que su sitio esté «a la última» y eso es lo que ofreces, así que vamos a ver las tres formas en que podemos indicar a WordPress que presente tu sitio de forma amigable en diferentes dispositivos.

Recuerda que en el otro artículo mencioné una herramienta muy buena para verificar si tu sitio está preparado, se trata de «Google Mobile Frienly Test».

Si tienes todo funcionando, la página resultante de la prueba incluirá una imagen como esta:

wp_is_mobile()

En el momento de la creación de tu Tema (hijo), puedes hacer uso de una función nativa de WordPress: wp_is_mobile().

Esta función te devolverá un valor booleano, true o false, pero ten en cuenta que no es «la solución».

«wp_is_mobile()» comprueba si el visitante está usando un dispositivo móvil, pero no ofrece más detalles.

Un valor verdadero (true) te indica que la detección del «user agent string» coincide con alguno de los establecidos como de dispositivo móvil.

No pienses en esta función como una forma de detectar «celulares». Su propósito no es detectar el ancho de la pantalla, sino detectar la posible limitación de recursos (aunque hoy por hoy, muchos «smartphones» tienen más potencia de procesador y más capacidad de memoria, que muchos ordenadores de escritorio).

Esta función también devolverá un valor verdadero si el dispositivo es una tableta, ya que también es un dispositivo móvil, así que no es, en ningún caso, un sustituto para las media query de CSS¹ ni de las configuraciones de estilo por plataforma.

Una forma en la que esta función puede resultar útil en la creación de temas, es para determinar si debe usarse un subconjunto específico (más liviano) para presentarse en dispositivos móviles.

Quizá esta función dice que hay que hacer doble trabajo al crear el Tema, ya que debe crearse una «versión completa» para ordenadores de escritorio y una «versión ligera» para los móviles.

Además, se debe tener cuidado al utilizar esta función en un tema público. Si tu tema funciona de manera diferente para dispositivos móviles y dispositivos de escritorio, cualquier solución de almacenamiento en caché de página que se utilice DEBE mantener grupos móviles / no móviles separados.

Muchas soluciones de almacenamiento en caché no hacen esto o cobran por esta función. Incluso el archivo Léame más detallado puede no ser capaz de explicar adecuadamente estos detalles.

La función, según está definida en el core, es:

function wp_is_mobile() {
    if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
        $is_mobile = false;
    } elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false || 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;
    }

    return apply_filters( 'wp_is_mobile', $is_mobile );
}

Mobile Detect

A modo de extensión de la función «wp_is_mobile()», existe un plugin que amplía o mejora la funcionalidad.

«Mobile Detect» hace uso de una librería de código abierto llamada «Mobile Detect PHP Library» para afinar el funcionamiento de la función nativa de WordPress.

El punto principal es que las tabletas NO son consideradas como móviles.

Si estás interesado en la librería, puedes visitar su página web: «mobiledetect.net».

Usando Mobile_Detect.php

La librería «Mobile Detect PHP Library» nos puede resultar muy útil, así que veamos cómo podemos usarla en la creación de un Tema.

Lo primero es descargar el código «PHP²» de la función, desde el enlace de la página que te he puesto más arriba y guardarla en el directorio donde está tu Tema.

Luego hay que incluir la función en tu functions.php, lo que se hace con un pequeño inserto como:

if ( ! class_exists( 'Mobile_Detect' ) ) {
  require get_template_directory() . '/Mobile_Detect.php';
}

ahora ya podemos usar la función, para lo que hay que incluir un código como este para poder luego usar la librería en el index.php o cualquier otro archivo de tu Tema:

$mobble_detect = new Mobile_Detect();
$mobble_detect-setDetectionType( 'extended' );

// función para detectar un móvil
function es_movil() {
global $mobble_detect;
return $mobble_detect-isMobile();
}

// función para detectar una tableta
function es_tablet() {
global $mobble_detect;
return $mobble_detect-isTablet();
}

En el index.php o dónde necesites, puedes tener un código como:

<?php if (es_movil()){
 echo "<p> Esto solo se muestra en móvil </p>";
 } ?>
 

Existen muchas funciones y clases en esta librería, pero no quiero hacer aquí un manual, sólo te muestro un ejemplo de uso.

El style.css

El archivo style.css en el directorio de tu Tema, es el que servirá para dar formato a tus páginas, sea cual sea el dispositivo que esté usando el visitante.

Así que es tarea de las reglas CSS el representar correctamente cada uno de los elementos HTML³.

Para separar unos estilos de otros, se crean reglas separadas por directivas específicas, por ejemplo:

@media (min-width: 768px) {
  ....
}
  o

@media only screen and (max-width: 480px) {
  ....
}

De esta forma, es posible controlar el contenido que se ve en una pantalla, independientemente (o mejor dicho «dependientemente») de su tamaño.

Es una buena práctica, asegurarse de que el dispositivo representará correctamente las proporciones que hemos indicado en el desarrollo, para lo cual es conveniente añadir a la cabecera del documento, una instrucción:

Recuerda que puedes aprender cómo hacer esto, en el artículo Cómo poner código en la cabecera en WordPress.

Básicamente, lo que esta instrucción meta hace, es igualar la ventana de visión (viewport) al tamaño de la pantalla. De esta forma, la densidad de la pantalla se hace independiente de su tamaño en píxeles y un píxel lógico puede ser representado por varios píxeles «físicos» en una pantalla de alta densidad.

Esto es importante cuando tenemos en cuenta dispositivos con la tecnología Retina, que pueden usar dos o más píxeles para un píxel lógico; es por eso que hay ocasiones en las que el ancho de la pantalla no es el ancho de la ventana.

Algunos casos a modo de ejemplo son:

[wptb id=3610]

Conclusión

Hacer una página responsiva no es una obra de ingeniería urbanística, pero hay ciertos detalles que debes tener en cuenta para hacer las cosas de forma más efectiva.

Recuerda, #QuédateEnCasa, #UsaMascarilla, juega, experimenta y, sobre todo, ¡divertirte!

¡Gracias por leernos!

¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!

1. Cascading Style Sheet ↩

2. PersonalHome Page – Página de inicio personal [ nombre original del lenguaje de programación del lado del servidor PHP] ↩

3. HyperText Markup Language ↩