Aprende en este tutorial a crear una plantilla personalizada para que muestre el título, el extracto y la imagen en el orden que tú decidas en las páginas de archivo. Y que además lo haga en formato de rejilla.
Una de las ventajas de ser suscriptor de Código Genesis es que puedes proponer tutoriales. Una suscriptora me preguntó cómo modificar el orden de los elementos del loop, para mostrar el título debajo de la imagen destacada en todas las páginas de archivo.
Si bien en un tutorial anterior expliqué cómo conseguirlo para páginas de archivo de un CPT y en formato de plugin (a petición de otro suscriptor). En este caso, te voy a enseñar a cómo conseguirlo usando una plantilla personalizada. 😉
Vamos a ver cómo:
Pasos para cambiar el orden de los elementos del loop de una página de archivo en Genesis
1. Crea un fichero archive.php
En primer lugar, genera una plantilla personalizada para la página de archivos.
Crea un fichero llamado archive.php y colocarlo en la raíz del tema.
Para ver este código y los otros 1717 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque de código consigues reemplazar el loop de WordPress en todas las páginas de archivo por uno personalizado.
El nuevo loop se cargará en el siguiente orden:
- Imagen destacada
- Título
Si quieres modificarlo a tu gusto solo tienes que cambiar el orden de los elementos en el snippet superior. Llevan un comentario a la derecha para que te resulte más sencillo localizarlos.
Y si quieres añadir el extracto solo tienes que añadir esta línea en el punto que quieras:
echo the_excerpt(); // Añadir el excerpt 2. Personaliza el CSS de la rejilla
Una vez realizados los cambios en el child theme, solo te falta asignar los estilos para que se muestre en formato rejilla o grid.
Para ello inserta este fragmento al final de style.css:
Para ver este código y los otros 1717 snippets de esta web,
identifícate o suscríbete aquí.
Al insertar estas líneas de CSS te aseguras de que los posts se muestren en una rejilla de 2 columnas.
Si prefieres introducir solo 3 columnas, sustituye el 350px por 250px en la línea de grid-template-columns:
grid-template-columns: repeat(auto-fill, minmax(250px,1fr));Con este snippet también das unos estilos básicos para que los títulos de las páginas de archivo y el del blog queden centrados y mejor jerarquizados.
Conclusiones
Ahora ya sabes cómo modificar el orden de los elementos del loop en las páginas de archivo creando una plantilla personalizada. De esta forma que puedas mostrar el título, extracto e imagen destacada en el orden que desees.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
