Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 4
En esta cuarta parte de nuestro tutorial cómo crear un tema Full Site Editing (FSE) desde cero, aprenderemos a utilizar el bloque Bucle de consulta (Query Loop) para recuperar automáticamente las publicaciones del sitio y mostrarlas en un diseño limpio, ordenado y completamente dinámico. En esta parte aprenderemos a utilizar el Bucle de consulta en WordPress para mostrar dinámicamente las entradas del blog.
Además, veremos cómo personalizar la información que aparece de cada entrada, incorporando elementos como la imagen destacada, el título, el extracto, la fecha de publicación y un enlace para continuar leyendo.
Al finalizar esta parte tendremos una página principal del blog totalmente funcional y preparada para mostrar automáticamente todas las entradas publicadas en nuestro sitio WordPress.
Creando el archivo home.html
Para crear la plantilla del blog, añadimos el archivo home.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 .
Añadiendo el bloque Bucle de consulta (Query Loop)
Para mostrar automáticamente las entradas del blog utilizaremos el bloque Bucle de consulta (Query Loop). Este bloque recupera las publicaciones almacenadas en WordPress y las muestra siguiendo el diseño que definamos en la plantilla.
Gracias al Query Loop, cada vez que publiquemos una nueva entrada, esta aparecerá automáticamente en el listado del blog sin necesidad de modificar la plantilla.
Configurando la página de entradas
Para que WordPress utilice correctamente la plantilla Inicio del blog, debemos indicar qué página mostrará el listado de las publicaciones.
Para ello accedemos a Ajustes → Lectura y, en el apartado Tu portada muestra, seleccionamos una página estática como portada y asignamos la página Blog como Página de entradas.
A partir de ese momento, WordPress utilizará automáticamente la plantilla home.html para mostrar todas las entradas publicadas en el sitio. Cada nueva publicación que creemos aparecerá en esta página sin necesidad de realizar ninguna configuración adicional.
En nuestro caso, el botón Entrar de la página de inicio enlazará directamente con la página Blog, donde WordPress mostrará automáticamente todas las entradas utilizando la plantilla que acabamos de crear.
Como todavía no hemos aplicado ningún estilo específico a la plantilla del blog, WordPress mostrará las entradas utilizando la distribución predeterminada. Es decir, todas las publicaciones aparecerán una debajo de otra, ocupando el ancho disponible del contenedor.
Aunque este comportamiento es perfectamente válido, en la mayoría de los sitios web resulta más atractivo mostrar varias entradas por fila cuando el espacio disponible lo permite.
Para conseguirlo añadiremos unas sencillas reglas CSS. Siguiendo un enfoque mobile first, en dispositivos móviles mantendremos una única columna para facilitar la lectura. A partir de tablets y pantallas de escritorio, el listado pasará automáticamente a mostrarse en dos columnas, aprovechando mejor el espacio disponible.
/* ==========================================
BLOG
========================================== */
.blog {
margin: 0 20px;
}
.wp-block-post-template {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
/* Tablets y escritorio */
@media (min-width: 768px) {
.wp-block-post-template {
grid-template-columns: repeat(2, 1fr);
}
}
Personalizando el bloque Bucle de consulta
El bloque Bucle de consulta (Query Loop) es uno de los bloques más importantes de WordPress. Permite recuperar automáticamente las entradas del sitio y mostrarlas utilizando un único diseño. Gracias a ello, cualquier nueva publicación aparecerá en el blog sin necesidad de modificar la plantilla, ya que WordPress se encargará de generar el listado de forma dinámica.
Una vez insertado el bloque Bucle de consulta, podemos personalizar la información que se mostrará de cada publicación. Para ello, añadiremos dentro de la plantilla de la entrada los bloques que formarán parte de cada tarjeta del blog.
Estructura del Bucle de consulta
Una vez creada la estructura básica, podemos personalizar el Bucle de consulta en WordPress para decidir qué elementos mostrará cada entrada y cómo se organizarán dentro de la plantilla.
La imagen anterior muestra, a la izquierda, la estructura del Bucle de consulta en la Vista de lista y, a la derecha, el aspecto de la plantilla home.html en el Editor del sitio una vez incorporados los bloques que formarán parte de cada entrada del blog.
En la Vista de lista podemos observar la jerarquía de bloques que forman el Bucle de consulta. La Plantilla de entrada contiene los bloques que se repetirán automáticamente para cada publicación, mientras que el bloque Paginación permitirá navegar entre las distintas páginas del blog cuando el número de entradas lo requiera.
Observa que solo hemos definido una única Plantilla de entrada. Sin embargo, WordPress reutilizará automáticamente esta misma estructura de bloques para mostrar todas las publicaciones recuperadas por el Bucle de consulta.
Puedes ampliar conocimientos visitando:
Bucle de consulta (Query Loop)
Bloque de bucle de consulta (Query Loop block)