Aprende en este tutorial de código cómo mostrar los posts en formato grid o cuadrícula tanto en las páginas de archivo como en la del blog en Genesis Sample.
En anteriores tutoriales aprendiste a mostrar los artículos en formato de rejilla tanto en el blog como en las páginas de archivo.
Ambos están pensados para usarlos de forma individual.
Pero, ¿qué pasa si quieres aplicar ambos en el mismo child theme? Pues que al tratarse de un código muy similar y utilizar las mismas funciones, van a entrar en conflicto.
Eso es lo que le ocurrió a David, un suscriptor de Código Genesis, y me preguntó cómo podía solucionar el problema.
Se podría «apañar» simplemente cambiando el nombre de las funciones, pero hay una solución más elegante combinando las etiquetas condicionales de WordPress y evitando así el duplicado de código.
Este es el resultado final para el blog:
Y este para las páginas de archivo:
¿Quieres algo así?
Aunque estos snippets están creados para Genesis Sample (3.1), puedes aplicarlos en cualquier otro child theme de Genesis tras realizar pequeños cambios en el código.
Instrucciones visualizar los posts de páginas de archivo y blog en formato rejilla en Genesis Sample
1. Modifica el fichero functions.php
Añade el siguiente código en functions.php:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con esto generas una clase .entry-wrapper que permitirá aplicar los estilos necesarios.
Con las etiquetas condicionales de WordPress, indicas que lo haga tanto en las páginas de archivo (is_archive()) como en la del blog (is_home()).
Además, este bloque fuerza el diseño de ancho completo, y elimina la metainformación de las entradas para que la estructura sea más limpia.
Por último, también crea un nuevo tamaño de imagen llamado «Grid» que se ajusta a las medidas necesarias. Pero si ya cuentas con un tamaño adecuado puedes eliminar esa línea de código.
Si la mantienes, acuérdate de regenerar todas la miniaturas de las imágenes que ya tienes en WordPress con el plugin Regenerate Thumbnails.
2. Personaliza el CSS de la rejilla
Una vez realizados los cambios en la plantilla, solo te falta asignar los estilos para que se muestre en formato de grid.
Para ello introduce este bloque al final de style.css:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
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.
Ahora solo te falta el último detalle.
3. Realiza ajustes de tema
Para darle el toque final ve a Genesis > Ajustes del tema > Archivos de contenido o a la misma ruta desde el personalizador de WordPress.
Ajusta las siguientes características:
- En «Selecciona una opción de las siguientes» elige el extracto de la entrada.
- Si optas por «Contenido de la entrada» te recomiendo limitar el número de caracteres (100 por ejemplo).
- Marca la casilla «¿Mostrar la imagen destacada?»
- En «Tamaño de la imagen destacada» elige Grid.
- Para «Alineación de la imagen destacada» elige Centrado.
Por supuesto, esto es un simple ejemplo que te puede servir de orientación, puedes cambiar los valores a tu gusto.
Además, si lo haces desde el personalizador de WordPress podrás ver los cambios a tiempo real.
Ya lo tienes. Los posts se mostrarán en formato grid.
Conclusiones
Ahora ya sabes cómo mostrar las entradas en formato cuadrícula tanto en las páginas de archivo como en la del blog de Genesis Sample (3.1).
Aunque este código está creado para un tema concreto, con unos pocos ajustes te servirá para cualquier plantilla de Genesis.
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. 😉
Tutoriales relacionados
- https://codigogenesis.com/mostrar-posts-rejilla-pagina-blog-genesis-framework/
- https://codigogenesis.com/mostrar-paginas-archivo-rejilla-genesis-framework/
- https://codigogenesis.com/forzar-el-diseno-de-ancho-completo-en-genesis-framework/
- https://codigogenesis.com/eliminar-informacion-meta-entradas-genesis-framework/
