Cómo crear un tema Full Site Editing (FSE) desde cero. Creando el header del tema

En esta lección aprenderemos a crear un header FSE para un tema de WordPress. La cabecera es uno de los elementos más importantes de cualquier tema. En ella se agrupan el logotipo del sitio y el menú de navegación, dos elementos que aparecerán de forma automática en todas las páginas.

En esta lección crearemos la Parte de plantilla header.html, aprenderemos cómo funcionan las Template Parts en WordPress y construiremos una cabecera reutilizable utilizando los bloques Grupo y Fila. Al finalizar, tendremos un header preparado para incorporarlo a las plantillas del tema.

Crear header FSE en WordPress desde cero paso a paso

El primer paso será crear el archivo parts/header.html, que contendrá los elementos comunes que aparecerán en la parte superior de todas las páginas del sitio. De esta forma podremos crear un header FSE reutilizable y utilizarlo posteriormente en las diferentes plantillas del tema.

Si accedemos a Apariencia → Editor → Patrones, podremos ver las partes reutilizables del tema que hemos creado hasta este momento.

Hacemos clic en Editar.

Configurando el bloque Grupo

El bloque Grupo actuará como contenedor principal de la cabecera. Gracias a él podremos controlar el ancho del contenido, el espaciado y la disposición general del header. La Vista de lista nos permite comprobar fácilmente esta estructura mientras la construimos.

Hemos añadido un bloque Grupo que actuará como contenedor principal de la cabecera. Le asignaremos un ancho de contenido de 1300 px y un relleno superior e inferior de 20 px

Configurando el bloque Fila

Dentro de la Fila añadiremos dos elementos: el logotipo del sitio y el menú de navegación. Como todavía no hemos creado ninguna página, será necesario hacerlo antes de configurar el menú

El bloque Navegación detectará automáticamente las páginas existentes y permitirá crear el menú principal del sitio.

• Blog → Página de entradas
• Inicio → Página de inicio
• Mis trabajos → Página de contenido

Una vez creadas podemos observar que se han añadido al menú de navegación.

La ventaja de crear la cabecera como una parte reutilizable es que podremos utilizarla en todas las plantillas del tema sin necesidad de volver a construirla cada vez.

Contiene el logo y la navegación, podremos utilizar nuestro propio logotipo o bien el que descargaste en la parte 1.

Configurando el menú de navegación

Respecto a la navegación, la dejaremos con la configuración predeterminada de WordPress para centrarnos en la estructura del tema.

Quizás para la navegación un tamaño de fuente de 20px sea más adecuado, de todas formas a vuestro criterio queda.

Activando el espaciado desde theme.json

  "layout": {
     "contentSize": "900px",
     "wideSize": "1300px"
  },

  "spacing": {
    "padding": true,
    "margin": true,
    "blockGap": true,
    "units": [ "px", "rem", "%", "vh", "vw" ]
  },

¿Qué es una Template Part?

Un Template Part es una pieza reutilizable del tema. En lugar de repetir la misma cabecera en todas las plantillas, la creamos una sola vez y WordPress la inserta allí donde sea necesaria. Si más adelante modificamos el header, el cambio se reflejará automáticamente en todas las plantillas que lo utilicen.

Conclusión

Con esto ya tenemos una cabecera completamente funcional y hemos aprendido a crear un header FSE mediante una Parte de plantilla compuesta por el logotipo y el menú de navegación. Además, podremos reutilizarla en cualquier plantilla del tema. En la siguiente lección construiremos el footer utilizando exactamente la misma filosofía de trabajo.

Más tutoriales de WordPress