Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 3
En las dos partes anteriores hemos construido la base de nuestro tema Full Site Editing. Primero creamos la estructura mínima del tema y la página de inicio, y después añadimos la cabecera, el pie de página y la plantilla para las páginas del sitio. En esta tercera parte daremos el siguiente paso creando la plantilla de entradas individuales en WordPress.
Ahora ha llegado el momento de crear una de las plantillas más importantes de cualquier tema WordPress: la plantilla de entradas individuales. En esta tercera parte de nuestro tutorial cómo crear un tema Full Site Editing (FSE) desde cero, aprenderemos a crear el archivo single.html, responsable de mostrar cada entrada publicada en el blog.
Además de crear la plantilla Single, descubriremos cómo utilizar los bloques dinámicos de WordPress para mostrar automáticamente información como el título de la entrada, el contenido, la imagen destacada, la fecha de publicación, el autor y las categorías. Gracias a estos bloques, una única plantilla podrá mostrar correctamente cualquier entrada del sitio sin necesidad de realizar configuraciones adicionales.
Comprender el funcionamiento de la plantilla single.html es un paso fundamental en el desarrollo de temas Full Site Editing, ya que nos permitirá construir diseños profesionales capaces de adaptarse automáticamente al contenido almacenado en WordPress.
Al finalizar esta parte tendremos una plantilla de entradas completamente funcional y habremos dado un paso más en la creación de un tema Full Site Editing moderno utilizando únicamente las herramientas que WordPress pone a nuestra disposición.
Creando el archivo single.html
Dentro de la carpeta templates de nuestro tema creamos el archivo single.html.
Como podemos observar, WordPress ha detectado automáticamente el archivo single.html y lo ha asociado a la plantilla Entradas individuales. A partir de este momento podremos editar visualmente la plantilla desde el Editor del sitio sin necesidad de escribir el marcado de bloques manualmente.
Añadiendo la estructura básica de la plantilla
Para este ejemplo he creado una entrada con su correspondiente categoría y varias etiquetas. A medida que vayamos construyendo la plantilla Single, veremos cómo WordPress recupera automáticamente toda esta información sin necesidad de introducirla manualmente en la plantilla.
Recuperando la información de la entrada con bloques dinámicos
Una de las principales ventajas de los temas Full Site Editing es la posibilidad de utilizar bloques dinámicos. A diferencia de los bloques tradicionales, estos no contienen información fija, sino que recuperan automáticamente los datos almacenados en WordPress.
Para construir nuestra plantilla iremos incorporando los siguientes bloques dinámicos:
- Título de la entrada.
- Imagen destacada.
- Contenido de la entrada.
- Fecha de publicación.
- Autor.
- Categorías.
- Etiquetas.
Ya tenemos una plantilla Single completamente funcional. Aunque solo hemos utilizado una entrada como ejemplo, cualquier nueva publicación que creemos utilizará esta misma plantilla y mostrará automáticamente su título, imagen destacada, contenido y resto de información gracias a los bloques dinámicos de WordPress.
A partir de este momento puedes incorporar tantos bloques dinámicos como necesites y adaptar su diseño mediante CSS para conseguir el aspecto que desees. De esta forma podrás crear plantillas totalmente personalizadas sin renunciar a la flexibilidad que ofrece WordPress.
Puedes ampliar conocimientos visitando:
Plantillas
Bloque de título de la entrada
Bloque de contenido de la entrada
Bloque de imagen destacada
Bloques de metadatos de la entrada