Ocultar contenido en móvil o escritorio en WordPress: qué opción usar

Para mostrar contenido diferente en móvil y en ordenador en WordPress, o bien ocultas bloques según el tamaño de pantalla, de modo que todos los dispositivos reciben la misma página y el navegador esconde lo que no encaja, o bien dejas que el servidor detecte el dispositivo y envíe a cada uno una página distinta. Ocultar contenido en el móvil por tamaño de pantalla es la opción correcta para el diseño y funciona con cualquier caché de páginas; las reglas por dispositivo en el servidor son para el caso poco habitual en el que un móvil no debe recibir cierto contenido en absoluto.

Este artículo explica los dos enfoques, cómo configurar cada uno (con el editor de bloques, un maquetador, unas líneas de CSS o un plugin) y las dos trampas en las que cae casi todo el mundo: la caché de páginas y la indexación centrada en móviles de Google.

Dos formas de mostrar contenido distinto en móvil y en ordenador

La diferencia está en dónde se toma la decisión.

• Por tamaño de pantalla (CSS): la página completa llega a todos los visitantes. Unas reglas de estilo, llamadas media queries, ocultan algunas partes cuando la pantalla es más estrecha o más ancha que un ancho determinado. No se quita nada, simplemente no se muestra.
• Por dispositivo (en el servidor): cuando se pide la página, WordPress mira lo que el navegador dice de sí mismo (el user agent y, en los navegadores modernos, una indicación de si es «móvil» o no) y construye una página distinta para móviles y para ordenadores.

Para la mayoría de las webs la respuesta es la primera columna. Sigue leyendo para saber cuándo merece la pena el cuidado extra que exige la segunda.

Opción 1: ocultar contenido en el móvil según el tamaño de pantalla

Esto es lo que significa en la práctica el «diseño adaptable» (responsive): una sola página, organizada de forma distinta en cada pantalla. Hay cuatro formas habituales de hacerlo.

El editor de bloques de WordPress

Desde WordPress 7.0 el editor de bloques puede ocultar cualquier bloque compatible en ordenador, tableta o móvil. Encontrarás la opción Ocultar en la barra de herramientas del bloque y en la vista de lista, donde un pequeño icono marca los bloques con una regla de visibilidad. Como explica el equipo de WordPress en la nota para desarrolladores sobre la visibilidad de bloques (en inglés), los bloques ocultados así siguen en la página y la ocultación se hace con CSS. En la versión 7.0 los puntos de corte son fijos.

Tu tema o tu maquetador

Los maquetadores tienen sus propios interruptores. En Elementor, por ejemplo, selecciona un widget o un contenedor, abre la pestaña Avanzado y usa Ocultar en Escritorio, Ocultar en Tableta y Ocultar en Móvil en la sección Adaptabilidad. Algunos temas también ofrecen opciones parecidas. Comprueba qué anchos usa tu maquetador, porque pueden no coincidir con los de tu tema.

Unas líneas de CSS

Si no te asusta un poco de código, da al bloque un nombre de clase en su panel Avanzado, en Clase(s) CSS adicional(es), por ejemplo ocultar-en-movil. Después añade esto al CSS adicional de tu web:

@media (max-width: 781px) { .ocultar-en-movil { display: none; } }

Cambia el número para mover el punto de corte. Para el efecto contrario, usa min-width con una clase como ocultar-en-escritorio.

Un plugin

Con Content Gate Pro, el panel Visibility de cada bloque tiene una opción Hide on (ocultar en) con tres casillas: Phone (pantallas de hasta 781 píxeles de ancho), Tablet (de 782 a 1023 píxeles) y Desktop (1024 píxeles o más). También funciona con CSS, así que es segura con la caché de páginas, y necesita la opción Allow hiding blocks by screen size activada en los ajustes, que es lo predeterminado. En WordPress 7.0 la opción nativa ya cubre los casos sencillos; el plugin es útil cuando además restringes ese mismo bloque a usuarios con sesión iniciada o a ciertos roles. Consulta Restringir un solo bloque.

Opción 2: reglas por dispositivo en el servidor

Aquí WordPress decide antes de que la página salga del servidor. Su propia comprobación, la función wp_is_mobile(), lee la descripción que el navegador hace de sí mismo. La referencia oficial deja claros tres puntos: no mide el ancho de la pantalla, las tabletas cuentan como dispositivos móviles y cualquier caché de páginas debe guardar copias separadas para visitantes en móvil y en ordenador.

¿Cuándo merece la pena? Cuando un móvil no debe recibir algo en absoluto, por ejemplo:

• un contenido incrustado pesado, como un visor 3D o un configurador grande, que prefieres que los móviles no carguen;
• la descarga de un programa de escritorio que no tiene sentido en un móvil;
• una página que debe enviar a los visitantes en móvil a otro sitio.

Cómo configurarlo con Content Gate

Las condiciones por dispositivo son una función Pro. En una regla, el paso 6 Devices tiene dos casillas, Desktop y Phone; si no marcas ninguna, vale para todos los dispositivos. El dispositivo se suma al grupo que mantiene el acceso: marca Desktop y solo entran los visitantes desde un ordenador que además cumplan el paso 2 Who can see it, mientras que los visitantes en móvil reciben lo que diga el paso 4 What everyone else gets, como un mensaje o una redirección a una página pensada para móvil. En una web donde los visitantes no inician sesión, combínalo con Only visitors who are not logged in.

Para una parte de la página, el shortcode acepta el atributo devices: [content_gate who="logged_out" devices="desktop"]Descarga el programa[/content_gate] muestra el texto solo a los visitantes desde un ordenador que no han iniciado sesión. La lista completa de opciones está en Cómo funcionan las reglas.

La propia guía del plugin aconseja no tocar las reglas por dispositivo salvo que de verdad las necesites. El servidor distingue un móvil de un ordenador, no el tamaño exacto de la pantalla. Las tabletas cuentan como móviles, salvo los iPad recientes, que se presentan como un Mac y cuentan como ordenador.

Caché de páginas y SEO: las dos trampas

Caché de páginas

Una caché de páginas guarda una copia ya preparada de cada página y se la sirve a los siguientes visitantes. Si el primer visitante tras vaciar la caché entra desde un móvil, la versión móvil puede servirse a todo el mundo, también a quien entra desde un ordenador, hasta que caduque la caché. Ocultar por tamaño de pantalla no tiene este problema, porque todos los dispositivos reciben la misma página.

Si usas reglas por dispositivo en el servidor, haz una de estas cosas:

• activa la opción de tu plugin de caché o de tu hosting que guarda una caché separada para dispositivos móviles, si la tiene;
• excluye de la caché las páginas afectadas;
• o pregunta a tu proveedor de hosting cómo trata su caché a los visitantes en móvil.

Google indexa la versión móvil

Google usa la versión móvil de una página, rastreada con un rastreador para smartphone, para indexarla y posicionarla, y pide que la versión móvil tenga el mismo contenido que la de ordenador (consulta las prácticas recomendadas de Google para la indexación centrada en los móviles). Si quitas texto en el servidor para los móviles, lo más probable es que Google no lo vea nunca. Mantén tu contenido importante en la versión móvil y usa las reglas por dispositivo para extras, no para el texto con el que quieres posicionar.

Cómo probar las dos versiones

1. Cierra sesión o usa una ventana privada. Con Content Gate, los administradores siempre lo ven todo, así que desde tu cuenta parece que las reglas no funcionan.
2. Ocultación por tamaño de pantalla: estrecha la ventana del navegador, o usa la vista de dispositivos de las herramientas para desarrolladores del navegador, y mira cómo aparecen y desaparecen los bloques.
3. Reglas en el servidor: pruébalas con un móvil de verdad. Para el servidor, una ventana de ordenador estrecha sigue siendo un ordenador.
4. Con caché: vacíala, abre la página primero en un móvil y después en un ordenador, y comprueba que cada uno recibe su versión.

Qué opción te conviene

Para mostrar contenido diferente en móvil y en ordenador por motivos de diseño (un título más corto, una imagen más pequeña, un botón cómodo para el móvil), oculta bloques por tamaño de pantalla: usa el editor de bloques en WordPress 7.0 o posterior, los interruptores de tu maquetador o una línea de CSS. Es sencillo, funciona con cualquier caché y sigue el enfoque de diseño adaptable que recomienda Google.

Usa reglas por dispositivo en el servidor solo cuando un móvil no deba recibir algo, y prepara tu caché para ello. Si ya usas Content Gate para restringir contenido por rol de usuario, sus condiciones por dispositivo de Pro te permiten añadir esa decisión a las mismas reglas.