Hoy vamos a crear un grid de artículos en Digital Pro. Lo haremos para las páginas de blog, categorías y etiquetas. El CSS para crear el grid estará basado en flexbox.
Ya escribí sobre como hacer un grid de artículos en el blog de Altitude Pro y otro artículo de como crear un grid de artículos con flexbox en Outfitter Pro.
Grid en Digital Pro
Esta vez adaptaremos el diseño y el template para Digital Pro theme. Uno de los themes de StudioPress más vendidos, sin duda.
Los grid de artículos es algo que cada vez se ven más. Permite mostrar mucho más contenido y muy ordenado en una misma página. De esa manera al usuario le es más fácil buscar visualmente.
Veamos como adaptarlo para Digital Pro.
Un mismo template para todo
Crearemos un mismo template para todo. El blog, las páginas de categorías y las de etiquetas. De esta manera, no sólo no llenamos nuestra carpeta raíz de Digital Pro de archivos, sino que además tenemos control de todos los grids, editando un sólo template.
Crea el un archivo llamado custom-archive.php e introduce en él el siguiente código.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
No olvides incluir la etiqueta <?php en el template. 🙂
Para el texto del enlace «read more», sustituye le texto «Continue Reading» por el que quieras que aparezca en el enlace.
Creado este template lo subimos a la carpeta raíz de Digital Pro.
Editamos el functions.php
Dado que en el template hemos definido nuestro propio enlace de «Leer más», vamos a eliminar el original para que así no haya conflictos.
En el functions.php comentamos las siguientes líneas.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Comentadas las líneas, añadiremos la final el código para asignar el template a las páginas de blog, categorías y etiquetas. Además, añadiremos un nuevo tamaño de imagen para optimizar aún más el grid, dado que Digital Pro el único tamaño que crea es muy grande. De esta manera nos aseguramos de que todas las imágenes sean de las mismas medidas además de que optimizamos la velocidad de la web. Tendremos un diseño uniforme y rápido.
Copiamos este snippet y lo pegamos al final de functions.php.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Si no quieres que se aplique el template a alguna página de archivo, sencillamente eliminala del condicional.
Un poco de CSS con Flexbox
Ya tenemos la estructura y asignado el template. Ahora falta el estilo. Con flexbox terminaremos de dar cuerpo a este grid de Digital Pro.
Al final del archivo style.css añadimos este código CSS.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Conclusiones
Digital Pro tiene muchas posibilidades de edición. El Grid del artículos es una de ellas.
Después de hacer pruebas, un grid de dos columnas es lo que me pareció más adecuado. Claro que yo he partido del Digital Pro theme original. Si has cambiado anchos o márgenes, podría convenirte 3 o 4 columnas. Tan sólo tendrías que editar el código CSS y jugar con los anchos. Todo es probar.
Ya sabes, cualquier duda con el código, puedes dejarmela en los comentarios. Estaré encantado de contestarla. 🙂 Feliz día!