• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Crear una plantilla personalizada de páginas de archivo en Genesis

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 1803 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 1803 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. 😉

Archivo CSS Genesis Framework PHP

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?