Los plugins para adaptar tu web de WordPress a móvil

Una pre­se­n­ta­ción web re­s­po­n­si­va (adaptable) es cada vez más im­po­r­ta­n­te en cuanto al diseño de páginas web con un enfoque Mobile First. La pre­se­n­ta­ción en di­s­po­si­ti­vos móviles y similares se puede im­ple­me­n­tar en unos pocos pasos si uti­li­za­mos los plugins de WordPress es­pe­cia­li­za­dos en la vi­sua­li­za­ción para di­s­po­si­ti­vos móviles. Hemos analizado algunos de los plugins de WordPress para móviles más populares.

Más del 43 % de todas las páginas web se han creado con WordPress, pero muchas de ellas se están quedando an­ti­cua­das, al menos desde el punto de vista técnico. Pro­ba­ble­me­n­te conozcas este tipo de sitios que, por lo general, tienen un tipo de letra pequeño y apenas legible, imágenes que so­bre­sa­len de la pantalla y que exigen deslizar la pantalla o hacer zoom con dos dedos para ver el menú entero. El problema: crear un sitio web desde cero con una plantilla re­s­po­n­si­va suele suponer mucho tiempo y esfuerzo.

Existen plugins que permiten hacer el diseño web re­s­po­n­si­vo sin tener que cambiar la plantilla de diseño y que ayudan a estar al día de los re­qui­si­tos del enfoque Mobile First. Mejor aún, con esta op­ti­mi­za­ción de tu sitio web puedes optimizar WordPress y mejorar tu SEO para móviles. Si vas a crear páginas web con WordPress co­m­ple­ta­me­n­te nuevas, se re­co­mie­n­da tener en cuenta el diseño re­s­po­n­si­vo a la hora de elegir una plantilla de WordPress.

Para poder ilustrar la vista de es­cri­to­rio y la vista en di­s­po­si­ti­vo móvil, hemos creado una página de prueba con los si­guie­n­tes pa­rá­me­tros:

• WordPress versión 5.9
• Plantilla de diseño: Twenty Eleven de WordPress.org

Este tema di­fí­ci­l­me­n­te puede ser descrito como re­s­po­n­si­vo: las imágenes se adaptan (un poco), pero el texto –y es­pe­cia­l­me­n­te el menú– no. El problema puede re­so­l­ve­r­se con los plugins para adaptar tu web de WordPress a móvil. Hemos probado algunos de estos plugins para ver qué re­su­l­ta­dos producen en un sitio web de WordPress visto desde un sma­r­t­pho­ne. Las opciones de co­n­fi­gu­ra­ción se describen de­ta­lla­da­me­n­te en la pre­se­n­ta­ción del re­s­pe­c­ti­vo plugin para versión móvil de WordPress.

* Co­m­pa­ra­ción de precios basada en la versión Premium para 1 sitio web. ** Actúa como un paquete con muchos extras.

El plugin WP Mobile Menu es un plugin fácil de usar que se actualizó cuando salió WordPress 5.9.

El plugin alarga el tamaño de la página de WordPress añadiendo en la cabecera una barra de menú que muestra el título del sitio web y el botón de ha­m­bu­r­gue­sa que despliega el menú en versiones móviles. El menú existente de la plantilla “Twenty Eleven” se mantiene. El plugin permite una pro­fu­n­di­dad de menú de dos submenús adi­cio­na­les. Esta nueva barra es “sticky”, por lo que siempre permanece visible en la parte superior de la pantalla al de­s­pla­zar­se por la página. Una vez activado, el menú se despliega sobre el contenido.

Hay varias opciones adi­cio­na­les que se esconden detrás de los siete elementos del menú que ofrece la interfaz de ad­mi­ni­s­tra­ción de WP Mobile Menu. Entre ellas se en­cue­n­tran:

• Insertar un texto y/o un logotipo en la cabecera en lugar del título del sitio web que se ha insertado au­to­má­ti­ca­me­n­te.
• Al activar el menú se puede definir el aspecto del contenido su­pe­r­pue­s­to. Se puede escoger el color del menú su­pe­r­pue­s­to y sus elementos internos, así como sus de­li­mi­ta­cio­nes.
• Insertar una imagen de fondo para el menú.
• Suprimir la vi­sua­li­za­ción de elementos concretos cuando el menú está de­s­ple­ga­do en una interfaz móvil.
• Uso de Google Fonts.
• Diseño pe­r­so­na­li­za­do del menú como, por ejemplo, con la creación de cinco botones de ha­m­bu­r­gue­sa con di­fe­re­n­tes estilos.
• Modos de pre­se­n­ta­ción del menú: su­pe­r­pue­s­to al contenido o de­s­pla­zá­n­do­lo.

En la versión premium (de pago) de este plugin de WordPress se puede, entre otros, suprimir el menú de la versión móvil en unas páginas de­te­r­mi­na­das o se puede ajustar su apa­rie­n­cia por separado en cada una de ellas. También son posibles los menús de pie de página y otros modos de vi­sua­li­za­ción del menú in­ter­ac­ti­vo. Asimismo, se tiene acceso a más de 2000 iconos de diversas bi­blio­te­cas.

Este plugin de WordPress para móviles ofrece una interfaz de ad­mi­ni­s­tra­ción re­s­po­n­si­va en el idioma que se haya es­ta­ble­ci­do en el panel de control de WordPress. El plugin se mantiene en todo momento claro y es (prá­c­ti­ca­me­n­te) intuitivo.

El panel de ad­mi­ni­s­tra­ción de Max Mega Menu ofrece, entre otros, lo siguiente en la versión gratuita:

• Crear elementos de mega menú ho­ri­zo­n­tal hasta el tercer nivel.
• Realizar ajustes in­di­vi­dua­les para cada nivel del menú, incluidas las flechas de na­ve­ga­ción.
• Organizar los elementos, en parte, mediante la he­rra­mie­n­ta drag & drop.
• Guardar tus propios diseños de menú como una plantilla in­di­vi­dual.
• Diseño in­di­vi­dual y pe­r­so­na­li­za­do con CSS/SCSS.
• Ex­po­r­ta­ción e im­po­r­ta­ción de pla­n­ti­llas de menú propias como archivos JSON o PHP.
• Fácil acceso a la do­cu­me­n­ta­ción.

Para hacer uso de algunas funciones, es necesario tener co­no­ci­mie­n­tos de HTML y CSS como, por ejemplo, para aplicar co­rre­c­ta­me­n­te el “z-index” cuando sea necesario.

Los usuarios de la versión Pro tienen acceso a los menús Sticky, Tabbed, Accordion, así como a los menús ve­r­ti­ca­les, más de 600 iconos de menú, 200 Google Fonts e insignias de menú para atraer la atención, así como la in­te­gra­ción de Woo­Co­m­me­r­ce y Easy Digital Downloads.

El plugin WPtouch de WordPress añade una plantilla de móvil ligera a la página web existente. El fu­n­cio­na­mie­n­to es claro y co­m­pre­n­si­ble con el lenguaje escogido para el panel de control de WordPress. Los elementos y las funciones que solo están di­s­po­ni­bles en la versión Pro aparecen re­sa­l­ta­dos en color.

De los plugins para adaptar tu web de WordPress a móvil que hemos probado hasta ahora, este produce el cambio más notable. Su di­fe­re­n­cia más si­g­ni­fi­ca­ti­va con los an­te­rio­res es el uso del conocido pe­r­so­na­li­za­dor para adaptar la vista al móvil. Con el botón “Cambiar a la plantilla móvil” se mostrará la versión móvil, la cual se puede gestionar muy có­mo­da­me­n­te. Los de­sa­rro­lla­do­res han seguido las re­co­me­n­da­cio­nes de Google a favor de una ex­pe­rie­n­cia de usuario móvil eficiente y, por ello, han co­n­s­trui­do un plugin muy ligero. El sitio web para móviles parece tener un reparto más claro y el texto continuo es más fácil de leer.

En la versión gratuita, el ad­mi­ni­s­tra­dor del sitio web dispone de las si­guie­n­tes opciones:

• Hasta seis grupos de di­s­po­si­ti­vos/na­ve­ga­do­res a elegir donde aplicar la página para móviles
• Pe­r­so­na­li­za­ción de la versión móvil en el Pe­r­so­na­li­za­dor
• Ac­ti­va­ción del menú como de­s­ple­ga­ble o de­s­pla­za­n­do el contenido (off canvas)
• Ajuste de la posición del botón ha­m­bu­r­gue­sa
• Libre elección de colores para el fondo, la cabecera, el menú, los enlaces y los en­ca­be­za­dos
• Panel de ad­mi­ni­s­tra­ción di­s­po­ni­ble en 23 idiomas di­fe­re­n­tes
• La plantilla original no afecta a la vi­sua­li­za­ción en el es­cri­to­rio ni a los demás ajustes de WordPress

La versión Pro, la cual no es muy económica, tiene una su­s­cri­p­ción de 1 año que, además del soporte Premium, incluye más pla­n­ti­llas para móviles, la po­si­bi­li­dad de integrar pu­bli­ci­dad, la función “Related Posts” y el uso de jQuery.

El plugin AMP for WP de WordPress para móviles es un proyecto de Google. Aplica las di­re­c­tri­ces de­sa­rro­lla­das por Google para mejorar la vi­si­bi­li­dad y aumentar la velocidad de las páginas de WordPress, y lo hace de forma muy exhau­s­ti­va y coherente. El plugin también está pensado para ayudar a mejorar la cla­si­fi­ca­ción de una página web en los re­su­l­ta­dos de búsqueda de Google.

El sitio web previo se modificó con un botón de menú de ha­m­bu­r­gue­sa en la cabecera y un cuerpo de texto mucho más legible. En la co­n­fi­gu­ra­ción básica del plugin, la página resulta no­ta­ble­me­n­te más rápida, el menú de­s­ple­ga­do abarca toda la página y los submenús se abren y cierran pe­r­fe­c­ta­me­n­te. Además, la barra de búsqueda está integrada en el propio menú que se superpone.

La co­n­fi­gu­ra­ción acompaña al cliente de manera casi auto ex­pli­ca­ti­va –di­fe­re­n­cia­n­do entre pri­n­ci­pia­n­tes y expertos– a través de los elementos del menú desde el panel de ad­mi­ni­s­tra­ción. El resultado es atractivo. Además, existe una extensa do­cu­me­n­ta­ción online respecto a este plugin (en inglés).

Este plugin de WordPress ofrece una gran selección de opciones para su vi­sua­li­za­ción en di­s­po­si­ti­vos móviles. La versión gratuita incluye cuatro pla­n­ti­llas y, según el de­sa­rro­lla­dor, más de 300 posibles variantes. Las funciones adi­cio­na­les pueden ad­qui­ri­r­se en la opción “Ex­te­n­sio­nes” del menú del panel de ad­mi­ni­s­tra­ción. Las funciones gratuitas incluyen:

• Soporte para Page Builders
• Cu­m­pli­mie­n­to del Re­gla­me­n­to General de Pro­te­c­ción de Datos (RGPD)
• Eli­mi­na­ción au­to­má­ti­ca del CSS no utilizado
• Co­m­pa­ti­bi­li­dad con Google Fonts, incluso cuando se utilizan lo­ca­l­me­n­te
• Co­m­pa­ti­bi­li­dad con varias he­rra­mie­n­tas de SEO
• Pa­gi­na­ción útil (nu­me­ra­ción de páginas) para co­n­te­ni­dos extensos
• Soporte para Google Tag Manager, Adsense (AMP-AD) y Analytics Support, así como para otros pro­vee­do­res de he­rra­mie­n­tas de análisis
• Po­si­bi­li­dad de adaptar los co­n­te­ni­dos a los móviles y al es­cri­to­rio de un ordenador
• Posibles pu­bli­ca­cio­nes re­la­cio­na­das
• Ada­p­ta­ción de imágenes mejorada
• Po­si­bi­li­dad de insertar vídeos de YouTube, Vime, Twitter, Instagram y Facebook
• In­te­gra­ción de 12 nuevas redes sociales
• Co­n­fi­gu­rar la versión AMP como página de inicio es­pe­cí­fi­ca y/o página web prio­ri­ta­ria

Las funciones de pago son, entre otras, las si­guie­n­tes:

• Algunos métodos de gestión de pu­bli­ci­dad
• Soporte para fo­r­mu­la­rios de contacto es­pe­cia­les
• Opción de enviar boletines in­fo­r­ma­ti­vos por correo ele­c­tró­ni­co
• Mu­l­ti­li­n­güi­s­mo con WPML, Polylang y WeGlot
• Vi­n­cu­la­ción con eCommerce
• Pla­n­ti­llas de elementos para CTA
• Más de 45 ex­te­n­sio­nes del mundo AMP

Además, AMP for WP no es lo mismo que el proyecto de código abierto Ac­ce­le­ra­ted Mobile Pages (AMP). Este último se ha propuesto construir sitios web con mucho menos código de pro­gra­ma­ción para que estos sean más rápidos. Si te interesa, puedes consultar nuestro artículo titulado plugins AMP para WordPress. El plugin AMP for WP puede co­n­si­de­rar­se apto prá­c­ti­ca­me­n­te para ambas tareas. Adi­cio­na­l­me­n­te, viene bien tener en cuenta los consejos sobre SEO en WordPress.