Definir las partes de plantilla de un tema de WordPress usando el theme.json

Descubre en este tutorial cómo definir las partes de plantilla (template parts) en un tema de WordPress usando el fichero theme.json.

WordPress 5.8 introdujo el fichero theme.json que es una de las piezas clave sobre la que se fundamentan los temas de bloques o FSE (Full Site Editing).

El fichero theme.json permite un grado de personalización de un tema de WordPress que merece la pena familiarizarse con él.

Por eso, estoy publicando una serie de tutoriales centrados en que entiendas cómo funciona y sobre todo cómo puedes personalizarlo a tu gusto.

En este caso, vamos a ver cómo definir las partes de plantilla (cabecera, pie de página…) de un tema. 

Instrucciones para definir las partes de plantilla de un tema de WordPress

1. Crear las plantillas personalizadas

Lo primero que tienes que hacer si quieres que se muestren las partes de plantillas en el editor de plantillas, es crear las template parts en cuestión. Lógico ¿verdad?

Para este ejemplo vamos a usar una parte de plantilla que sea la cabecera y otra que sea el pie de página.

Para crearlas solo tienes que utilizar el editor de plantillas.

2A. Crear el fichero theme.json

En caso de que el tema no cuente con él, tienes que crear un fichero llamado theme.json y colocarlo en la raíz de tu tema.

Una vez lo hayas hecho, añade el siguiente código :

Con este código estarías definiendo dos nuevas partes de plantilla, una cabecera y un pie página.

Estas son las propiedades que puedes modificar:

• name: el nombre del fichero de la parte de plantilla.
• title: el título que se mostrará al buscar el bloque en el editor de plantillas.
• area: area en la que se mostrará:
  • header: cabecera
  • footer: pie de página
  • uncategorized: si quieres usar otro área que no sea ninguno de los dos anteriores. Práctico si quieres utilizar listados de entradas.

Puedes añadir varios tipos de cabeceras o footers, por ejemplo el tema Twenty Twenty-Two añade varias opciones de cabecera:

	"templateParts": [
		{
			"name": "header",
			"title": "Header",
			"area": "header"
		},
		{
			"name": "header-large-dark",
			"title": "Header (Dark, large)",
			"area": "header"
		},
		{
			"name": "header-small-dark",
			"title": "Header (Dark, small)",
			"area": "header"
		},
		{
			"name": "footer",
			"title": "Footer",
			"area": "footer"
		}
	]

B. Modificar el fichero theme.json

En caso de que tu tema ya cuente con un fichero theme.json puedes definir en él las partes de plantilla. Para ello busca la sección de "templateParts" (si no existe créala al mismo nivel que "settings") y cambia el contenido entre corchetes ([ ]) teniendo en cuenta las propiedades que comentamos arriba.

3. Interfaz en el editor de bloques

Una vez que hayas añadido este snippet, bien sea añadiendo un nuevo fichero theme.json o modificando uno existente, verás que estas partes de plantilla aparecen en el editor de plantillas.

Conclusiones

Ahora ya sabes cómo definir las partes de plantillas (template parts) en cualquier tema de WordPress usando el fichero theme.json.

Si tienes alguna duda sobre este tutorial, déjala en los comentarios.

¿Sugerencias para próximos snippets? Envíamelas con el formulario de contacto.

Todo ventajas de ser suscriptor.