Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 6
En la parte anterior aprendimos a mejorar el aspecto visual del blog de nuestro tema aplicando diferentes estilos CSS a las tarjetas, la imagen destacada, el título y la fecha de publicación. Con ello, hemos dado un paso más para crear un tema Full Site Editing (FSE) con un diseño moderno, limpio y totalmente responsive.
Ahora es el momento de ampliar las plantillas de nuestro tema Full Site Editing.. Además de la página principal del blog, WordPress genera automáticamente páginas para las categorías, las etiquetas, los autores y los archivos por fecha. Para mostrar correctamente este tipo de contenido, necesitaremos crear la plantilla archive.html.
¿Qué vamos a construir?
En este capítulo aprenderemos a crear la plantilla archive.html en un tema Full Site Editing, reutilizando el diseño del blog desarrollado en los capítulos anteriores e incorporando bloques dinámicos para mostrar automáticamente el título y la descripción de cada archivo.
Al finalizar este capítulo, nuestro tema será capaz de mostrar correctamente cualquier archivo generado por WordPress, acercándonos un paso más al objetivo de crear un tema Full Site Editing (FSE) desde cero completamente funcional.
Creando el archivo archive.html
Para crear la plantilla de archivo, añadimos el archivo archive.html dentro de la carpeta templates de nuestro tema.
Una vez creado el archivo, WordPress lo detectará automáticamente y mostrará una nueva plantilla llamada Inicio del blog dentro de Apariencia → Editor → Plantillas.
Nota: Al igual que en las plantillas anteriores, también podríamos haber creado esta plantilla directamente desde el Editor del sitio. Sin embargo, en este tutorial seguimos creando primero los archivos del tema para comprender mejor cómo WordPress relaciona cada plantilla con su correspondiente archivo dentro de la carpeta templates .
Creando la estructura de la plantilla
La plantilla Todos los archivos comparte gran parte de su estructura con la plantilla Inicio del blog, ya que ambas muestran un listado de entradas. Sin embargo, las páginas de archivo necesitan mostrar información adicional para que el usuario sepa qué contenido está consultando.
Por este motivo, incorporaremos el bloque Título del archivo, que mostrará automáticamente el nombre de la categoría, la etiqueta, el autor o la fecha correspondiente al archivo que se esté visualizando.
A continuación, añadiremos el Bucle de consulta, encargado de mostrar las entradas pertenecientes a ese archivo, junto con la paginación y el mensaje que aparecerá cuando no existan resultados.
La plantilla Todos los archivos quedará organizada con la siguiente estructura:
Una vez creada esta estructura, guarda los cambios y visita cualquier categoría o etiqueta de tu sitio para comprobar que WordPress utiliza correctamente la plantilla archive.html.
Comprobando el resultado
A continuación, abre desde el frontal cualquier categoría o etiqueta de tu sitio. Si todo ha ido bien, WordPress utilizará automáticamente la plantilla archive.html para mostrar el contenido correspondiente.
Por ejemplo, si tienes una categoría llamada Plantas, puedes acceder a ella desde la propia entrada o escribiendo una dirección similar a la siguiente:
http://tusitio.local/category/plantas/
No es necesario crear una plantilla independiente para las etiquetas. WordPress reutilizará automáticamente archive.html siempre que no exista una plantilla más específica.
Esta misma plantilla también se utilizará para mostrar las etiquetas, los archivos por autor y los archivos por fecha, siempre que el tema no disponga de una plantilla más específica, como category.html o tag.html.
Por ejemplo, si tienes una Etiqueta llamada Andalucía, puedes acceder a ella desde la propia entrada o escribiendo una dirección similar a la siguiente:
http://tusitio.local/tag/andalucia/
Puedes ampliar conocimientos visitando:
Jerarquía de plantillas
Bloque de título del archivo
Título de la consulta
Bloque de bucle de consulta