¿Dónde conviene definir el header principal en un tema de bloques?

Un template part reutilizable evita duplicación y mantiene consistencia en todas las plantillas.

WordPress Themes Pro

Tema de bloques 05: navegación en FSE sin romper UX

Construye header y footer de navegación en block themes con enfoque responsive, accesible y mantenible.

¿Cuánto sabes de WordPress Themes Pro?

📘 Teoría

Principios de navegación en block themes

Piensa en estructura y comportamiento, no solo en apariencia del menú.

El bloque Navigation debe vivir en un template part reutilizable para evitar duplicación entre plantillas.

Define una jerarquía clara: identidad del sitio, navegación principal y acciones secundarias si existen.

Prueba siempre con menús largos y submenús para validar comportamiento real, no solo casos ideales.

Header como pieza global reutilizable.
Navegación principal con orden editorial claro.
Compatibilidad con submenús en móvil.
Pruebas de teclado y foco visibles.

Header base con Site Title + Navigation

Una estructura mínima y sólida facilita evolución del tema sin rehacer todo el layout.

parts/header.html recomendado

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
  <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between","verticalAlignment":"center"}} -->
  <div class="wp-block-group">
    <!-- wp:site-title {"level":0} /-->
    <!-- wp:navigation {"overlayMenu":"mobile","openSubmenusOnClick":true,"layout":{"type":"flex","justifyContent":"right"}} /-->
  </div>
  <!-- /wp:group -->
</div>
<!-- /wp:group -->

Footer navegable sin ruido

El footer no debe repetir todo el header: prioriza enlaces utilitarios y legales.

Usa una navegación secundaria en parts/footer.html para enlaces de soporte, legal o contacto.

Evita sobrecargarlo con menús profundos; en footer importa más la localización rápida que la jerarquía extensa.

Mantén contraste y espaciado adecuados para lectura en móvil y pantallas de bajo brillo.

parts/footer.html básico

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
  <!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","justifyContent":"center"}} /-->
  <!-- wp:paragraph {"align":"center","fontSize":"small"} -->
  <p class="has-text-align-center has-small-font-size">© 2026 Mi Tema Bloques</p>
  <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->