¿Dónde conviene guardar cabecera y pie reutilizables en un tema de bloques?

Las piezas globales deben vivir en template parts para reutilizarse en varias plantillas sin duplicación.

Tema de bloques 02: templates y template parts sin duplicación

Aprende a estructurar plantillas de tema de bloques con HTML de bloques y partes reutilizables para mantener coherencia en todo el sitio.

¿Cuánto sabes de WordPress Themes Pro?

📘 Teoría

Cómo organizar /templates y /parts

Piensa en capas: templates para contexto, parts para piezas repetidas.

El directorio templates define vistas completas como index, single, page, archive o 404.

El directorio parts contiene fragmentos reutilizables como header.html y footer.html.

Cuando una pieza aparece en varias plantillas, conviértela en part desde el principio para evitar divergencias.

templates/: contexto completo de la vista.
parts/: bloques compartidos entre plantillas.
Menos copia y pega de markup.
Cambios globales más rápidos y seguros.

Crear index.html base con partes reutilizables

index.html debe ser sólido porque actúa como fallback del sistema de plantillas.

templates/index.html mínimo

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date"}} -->
  <div class="wp-block-query">
    <!-- wp:post-template -->
    <!-- wp:post-title {"isLink":true} /-->
    <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->
    <!-- wp:query-pagination /-->
  </div>
  <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Diseñar template parts estables

Header y footer deben ser simples, semánticos y compatibles con navegación del editor.

Define parts con responsabilidad clara: navegación en header, enlaces legales o secundarios en footer.

Evita mezclar bloques de contenido editorial en template parts globales; eso complica reutilización.

Cuando un part cambie por tipo de contenido, crea variación específica en lugar de condicionar en exceso.

parts/header.html básico

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
  <!-- wp:site-title {"level":0} /-->
  <!-- wp:navigation {"overlayMenu":"never"} /-->
</div>
<!-- /wp:group -->