Aprende como crear un grid de artículos en el blog y en las categorías (y etiquetas) de Altitude Pro Theme. Lo haremos con código, creando un único template.
Altitude Pro es un tema muy completo. De hecho uno de los más personalizables de todos los Genesis Child Themes con los que he trabajado.
Una de las cosas que si se pueden modernizar es el blog. Hablando con propiedad me refiero a las páginas de archivo, es decir, blog, categorías y etiquetas. Todas ellas tienen el mismo diseño clásico de los artículos mostrados uno sobre otro, con casi todos los detalles de cada artículo.
Grid de artículos
Pues bien, vamos a cambiar ese diseño a un diseño más práctico y moderno, en forma de grid o rejilla. Donde se mostrarán más cantidad de artículos y muchos menos detalles. Esto minimizará mucho la información con lo que el lector se distraerá mucho menos.
Como veis en la captura, he dejado sólo la imagen destacada del artículo, el título y una porción del contenido.
Añadiremos, eso si, un poco de CSS para no romper el diseño general y sobre todo dar adaptabilidad a ese grid en las pantallas más pequeñas. Tablets y móviles.
Creamos el template
Dado que le daremos a todas esas páginas de archivo el mismo diseño, lo que haremos es crear un solo template y aplicarlo a todas ellas mediante una función.
Lo primero crearemos ese nuevo template. Yo lo he llamado custom-archive.php. Lo alojaremos en la carpeta raíz de Altitude Pro. En el añadiremos todo este código.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Para las personas más curiosas desgranaré un poco el código.
Lo primero forzamos el layout de ancho completo para evitar así cualquier barra lateral que rompa la maquetación.
Lo siguiente es un filtro para añadir una clase al body de las páginas de archivo donde se aplicará este template. De esa manera será más fácil crear estilos personalizados para esas páginas.
Por último está el bloque del loop personalizado. En este se han configurado algunos argumentos. en la línea de 'posts_per_page' => 12 se determina el número de posts por paǵina a mostrar. Te recomiendo que si lo cambias que sea por un multiplo de 3 y 2. De esa manera no se descuadrará el diseño en algunas pantallas de tablets.
Asignando el template
Terminado el template y subido a la carpeta raíz, queda crear una función que mediante condicionales asigne este template a las páginas de archivo que nosotros decidamos.
Esta función la añadiremos al final del archivo functions.php del theme Altitude Pro.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Fijaos que en la función llamamos al template por su nombre sin la extensión. Si le habéis puesto un nombre distinto al que yo le he puesto, deberéis editarlo para que coincidan.
La función no es mía, es de Bill Erickson, a quien ya he nombrado en ocasiones anteriores. Mediante condicionales, aplica el template que hemos creado a las páginas que designemos.
Estilos y adaptavilidad
Ahora mismo el grid no parece gran cosa, más bien algo raro :). Pongamos un poco de estilo para terminar de maquetarlo.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Con este estilo, conseguimos guardar la concordancia del diseño, ya que hemos añadido ese borde inferior a los títulos que tiene todo el theme. Y por supuesto, además le damos soporte para pantallas pequeñas añadiendo así la adaptavilidad, hoy en día tan necesaria.
Conclusiónes
Hoy en día este tipo de grids son muy vanguardistas. Y con las herramientas que nos proporciona CSS no es nada difícil hacerlos. Si bien es cierto que la estructura hay que tenerla clara, una vez tengamos el PHP preparado le resto es coser y cantar :).
Como detalle minimalista, yo dejaría las imágenes destacadas y el título. Nada más. Pero eso ya sería cuestión de dejar correr un Test A/B y ver que opción es mejor.
Para cualquier duda sobre el código podéis dejar un comentario abajo ;). Ventajas de ser suscriptor!