Tutorial WordPress: Ocultar el título del sitio solo en móviles con media queries

Ocultar el título del sitio solo en móviles con media queries (WordPress)

En muchos proyectos WordPress se busca simplificar la cabecera en dispositivos móviles mostrando solo el logotipo o una versión compacta del header y ocultando el título del sitio. La forma más segura y flexible de hacerlo es con CSS y media queries: así controlas la visibilidad según el ancho de pantalla sin tocar la estructura HTML ni eliminar el título para lectores de pantalla si no quieres.

Resumen de la aproximación

Identificar el selector CSS que usa tu tema para el título (por ejemplo .site-title, h1.site-title o .site-branding .site-title).
Crear una media query para el punto de ruptura móvil que prefieras (por ejemplo max-width: 767px).
Aplicar la regla CSS para ocultarlo: display:none si quieres eliminar también el espacio, o técnicas accesibles si quieres mantenerlo disponible para lectores de pantalla.
Agregar el CSS en el Customizer → CSS adicional o en el style.css de un child theme.

Cómo identificar el selector correcto

Abre tu web en el navegador y activa las herramientas de desarrollador (Inspector).
Selecciona el elemento del título del sitio y anota las clases/ID que lo rodean (por ejemplo h1.site-title, .site-branding .site-title a).
Si el título es un enlace, considera apuntar a .site-title y/o .site-title a para cubrir ambos casos.

Ejemplo básico: ocultar el título solo en móviles

Este ejemplo oculta completamente el título cuando la anchura de la ventana es menor o igual a 767px (común como breakpoint para móviles). Sustituye .site-title por el selector real de tu tema.

@media (max-width: 767px) {
  .site-title,
  .site-title a {
    display: none !important
  }
}

Coloca ese fragmento en Apariencia → Personalizar → CSS adicional, o en el style.css de un tema hijo.

Oculto visual pero accesible (mantener para lectores de pantalla)

Si quieres que el título no se muestre visualmente pero que siga siendo accesible para lectores de pantalla (mejor para SEO y accesibilidad), usa la técnica de “clip” en lugar de display:none. Así el elemento permanece en el DOM y accesible, pero invisible al usuario.

@media (max-width: 767px) {
  .site-title {
    position: absolute !important
    width: 1px !important
    height: 1px !important
    padding: 0 !important
    margin: -1px !important
    overflow: hidden !important
    clip: rect(0 0 0 0) !important
    white-space: nowrap !important
    border: 0 !important
  }
}

Alternativamente, WordPress suele incluir la clase .screen-reader-text si tu tema la usa, puedes añadir/usar esa clase en móviles.

Otros matices y opciones

Preferencias de layout: Si ocultas el título con display:none, el resto de contenido del header puede reposicionarse. Prueba y ajusta márgenes/padding.
Selector específico del tema: Algunos temas usan selectores propios: .site-branding .site-title, #site-title, .header-logo h1. Usa exactamente el selector detectado en el inspector.
Importancia del !important: Úsalo si tu tema aplica reglas con mayor especificidad. Evítalo si no es necesario.
Breakpoints: Ajusta el valor de max-width según el diseño: 480px para móviles pequeños, 767px o 800px para la mayoría de móviles, 1024px si también quieres incluir tablets pequeñas.

Lista de breakpoints comunes (orientativa)

Small phones: max-width: 480px
Phones / small devices: max-width: 767px
Tablets / medium devices: max-width: 1024px

Ejemplo: Diferenciar entre móviles pequeños y tablets

/ Móviles pequeños /
@media (max-width: 480px) {
  .site-title { display: none !important }
}

/ Tablets (si quieres ocultar también en tablets) /
@media (max-width: 1024px) {
  .site-title { display: none !important }
}

Alternativa con PHP: inyectar CSS solo si WP detecta un cliente móvil

Esto no usa media queries (es detección server-side mediante wp_is_mobile()), pero puede servir como alternativa. Ten en cuenta que wp_is_mobile() no es infalible y la solución recomendada para distinguir pantallas sigue siendo CSS con media queries.

// functions.php — inyectar CSS si WordPress detecta un móvil
add_action(wp_head, mi_titulo_mobile_inline_css)
function mi_titulo_mobile_inline_css() {
  if ( wp_is_mobile() ) {
    echo 
  }
}

Pruebas y comprobaciones

Probar en distintas resoluciones: usa el modo responsive del inspector del navegador para verificar comportamiento en 320px, 375px, 412px, 768px, 1024px.
Comprobar accesibilidad: si ocultas con display:none, confirma si quieres eliminar el título del tree de accesibilidad si no, usa la técnica clip para mantenerlo disponible.
Clear cache: si usas plugins de caché/minificación, limpia caché luego de añadir el CSS para ver los cambios.
Verificar compatibilidad con plugins de SEO que dependan del título visible en la cabecera (por lo general no hay conflicto porque el título sigue en HTML a menos que lo elimines por PHP).

Consejos finales

Si solo quieres ocultar el texto pero mantener el espacio para no romper el diseño, considera usar visibility:hidden o ajustar opacity y tamaños, en lugar de display:none.
Siempre prueba en múltiples dispositivos y navegadores. El uso de media queries es la forma más robusta y responsiva de hacerlo.
Si el tema se actualiza con frecuencia, implementa los cambios en un child theme o en el CSS adicional del Personalizador para que no se pierdan.

Con estas instrucciones y fragmentos puedes ocultar el título del sitio únicamente en móviles mediante media queries, manteniendo el control sobre la accesibilidad y el layout según tus necesidades.

SushiHost