Cómo hacer que un sitio WordPress se vea bien en el móvil

La mayoría de los sitios WordPress que no se adaptan al móvil tienen una de estas tres causas: un tema antiguo que nunca fue responsive, ajustes de bloques o del maquetador que ignoran el móvil, o CSS personalizado con anchos fijos. Arréglalos en ese orden: confirma que el tema es responsive, ajusta la configuración móvil en el editor o el maquetador y después limpia el código personalizado y los plugins. Revisa cada paso a tamaño de teléfono antes de pasar al siguiente.

Paso 1: comprueba si tu tema es responsive

Abre tu sitio en una vista móvil (consulta cómo ver la versión móvil de una web en el PC) y mira una página sencilla sin diseño especial, como la política de privacidad. Si incluso esa página aparece alejada o se desplaza hacia los lados, el problema es el tema.

Dos comprobaciones rápidas:

• Mira el código fuente de la página y busca name="viewport". Un tema responsive incluye la etiqueta meta viewport en el <head>. Si falta, el tema es anterior al diseño móvil.
• Revisa la antigüedad y las actualizaciones del tema en Apariencia > Temas. Un tema que no se actualiza desde hace años es un riesgo que va más allá del diseño móvil.

Si el tema no es responsive, cambiarlo suele salir más barato que parchearlo. Los temas de bloques predeterminados actuales, como Twenty Twenty-Five, y la mayoría de temas con mantenimiento activo son responsive de serie. Prueba el tema nuevo con Vista previa en vivo antes de activarlo.

Paso 2: usa la vista previa móvil del editor

WordPress incluye vistas previas por dispositivo:

• En el editor de bloques y el editor del sitio, el control de vista previa de la barra superior cambia entre Escritorio, Tableta y Móvil.
• En el Personalizador clásico (para temas clásicos), los botones de dispositivo al pie de la barra lateral hacen lo mismo.

Estas vistas previas cambian el tamaño del lienzo, lo que ayuda a detectar problemas de diseño mientras editas. No envían un user agent móvil, así que después confirma en la página publicada con una vista móvil de verdad.

Paso 3: arregla los bloques para pantallas pequeñas

Problemas habituales del editor de bloques y cómo solucionarlos:

• Columnas que se aprietan en lugar de apilarse. Selecciona el bloque Columnas y comprueba que está activada la opción de apilar en móviles.
• Anchos y altos fijos. Los bloques Imagen, Portada y Grupo pueden llevar tamaños fijos en píxeles. Usa anchos en porcentaje y alturas mínimas en lugar de fijas, para que el texto no se corte en pantallas estrechas.
• Tamaños de fuente grandes. Un título de 72 px que queda bien en escritorio se desborda en el móvil. Usa los ajustes de tipografía fluida del tema cuando existan, que escalan con la pantalla.
• Tablas anchas. Las tablas con muchas columnas se salen de la pantalla del móvil. Hazlas más cortas o deja que se desplacen en horizontal dentro de su propio contenedor.

Paso 4: revisa los ajustes móviles del maquetador

Si usas un maquetador como Elementor, Divi o Beaver Builder, la mayoría de problemas en móvil vienen de ajustes aplicados solo a tamaño escritorio. Los maquetadores tienen un modo responsive con valores separados para móvil y tableta: espaciado, tamaño de fuente, ancho de columnas y visibilidad.

1. Cambia el maquetador a su vista móvil.
2. Reduce los paddings y márgenes grandes definidos en píxeles.
3. Ajusta el tamaño de los títulos para móvil.
4. Revisa el orden de las columnas cuando se apilan; inviértelo si la imagen aparece antes del título al que acompaña.
5. Evita ocultar contenido importante en el móvil. Google indexa la versión móvil, así que un texto oculto es como si no existiera.

Los maquetadores también definen sus propios breakpoints (los predeterminados de Elementor son 767 px para móvil y 1024 px para tableta, y puedes añadir más). Asegúrate de que tu CSS personalizado usa los mismos anchos. Más sobre cómo elegirlos: breakpoints responsive.

Paso 5: arregla el menú

En el móvil, la navegación debe plegarse en un botón de menú. Los temas de bloques lo hacen con el ajuste de superposición del bloque Navegación (ponlo en Móvil o Siempre). En los temas clásicos se encarga el tema; si no lo hace, es otra señal para cambiarlo. Mantén corto el menú móvil y comprueba que los submenús se abren al tocarlos.

Paso 6: imágenes y velocidad

WordPress ya hace mucho aquí: crea varios tamaños de cada imagen subida, añade srcset para que los móviles reciban archivos más pequeños y carga las imágenes en diferido por defecto. Puedes ayudarle si:

• subes imágenes no más grandes que el tamaño máximo al que se mostrarán;
• las conviertes a WebP o AVIF (lo admiten de forma nativa las versiones recientes de WordPress, o un plugin de imágenes);
• usas un plugin de caché o la caché del hosting;
• eliminas los plugins que no usas, porque cada uno puede añadir scripts a todas las páginas.

Mide el resultado con los métodos de la guía del test de velocidad móvil.

Paso 7: localiza el CSS personalizado y los conflictos de plugins

Si el sitio sigue desplazándose hacia los lados, busca el elemento demasiado ancho. En Chrome DevTools, ejecuta esto en la consola para listar los elementos más anchos que la pantalla:

[...document.querySelectorAll('*')].filter(el => el.scrollWidth > document.documentElement.clientWidth)

Los culpables típicos son reglas width: 1200px en Apariencia > Personalizar > CSS adicional, widgets incrustados con tamaño fijo (feeds sociales antiguos, mapas, formularios) y sliders que fijan anchos en línea.

Paso 8: prueba bien el sitio publicado

Las vistas previas del editor son un comienzo. Antes de dar el trabajo por terminado:

1. Abre las páginas clave en una vista móvil en Chrome. Mobile View Extension lo hace con un clic y carga la página publicada con un user agent móvil, así ves lo que reciben realmente los teléfonos, incluido lo que sirven la caché o los plugins para móvil.
2. Prueba los formularios y el proceso de compra en un teléfono real.
3. Ejecuta una auditoría de Lighthouse para móvil (cómo hacerlo).

Si algo se ve distinto en el teléfono que en la vista previa, por qué una web se ve mal en el móvil recoge los motivos habituales.

Preguntas frecuentes

¿Por qué mi WordPress se ve bien en el editor pero no en el móvil?

Las vistas previas del editor solo cambian el tamaño del lienzo. Los plugins de caché, los plugins para móvil, la configuración de la CDN y el propio navegador del teléfono pueden cambiar lo que se sirve. Revisa la página publicada en una vista móvil real y vacía las cachés después de cada cambio.

¿Necesito un plugin para que WordPress sea responsive?

Normalmente no. Un tema responsive hace casi todo el trabajo. Los plugins que crean un tema móvil aparte eran habituales hace años, pero hoy rara vez hacen falta.

¿Sigue siendo necesario AMP para un WordPress móvil?

No. AMP es opcional, y una página responsive rápida cumple los mismos objetivos sin un formato aparte.