Por petición a través del formulario de soporte, hoy vamos a aprender a utilizar un potente snippet que convierte los listados de posts en grids, cuadrículas o rejillas de un modo sencillo y sin utilizar ningún plugin. Es decir, vamos a ver cómo listar posts en grid si utilizas un child theme de Genesis Framework.
Éste Snippet valdría para crear un grid de posts en cualquier theme de WordPress. La única diferencia es que las clases de CSS que se utilizan en el snippet son específicas de Genesis.
Al aplicarlo todas nuestras listas de posts (blog, archivo de autor, archivo de categoría, de etiqueta, de fecha, resultados de búsqueda… ¡todos!) se mostrarán en un layout de rejilla, o separadas en columnas.
El proceso para crear un grid loop en sí tarda en hacerse menos de un minuto, pero en el vídeo voy a ir poco a poco y vamos a probar varias opciones para listar posts o cualquier tipo de contenido listable, en forma de rejilla.
Aquí te dejo el vídeo donde implementamos el snippet.
Snippet para crear un Grid Layout en Genesis
Tal y cómo hemos visto en el vídeo son sólo 4 pasos:
- Copiar y pegar el código al final de tu archivo functions.php
- Ajustar la clase de CSS de tu theme para la cantidad de columnas que quieres usar
- Indicar el número de columnas a utilizar
- Guardar y listo
Aquí te dejo el código:
// Convertir en grid todas las páginas de archivo
function be_archive_post_class( $classes ) {
// Don't run on single posts or pages
if( is_singular() )
return $classes;
$classes[] = 'one-third';
global $wp_query;
if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 3 )
$classes[] = 'first';
return $classes;
}
add_filter( 'post_class', 'be_archive_post_class' );Más adelante veremos cómo utilizar este layout en columnas sólo para listados específicos. Por ejemplo, sólo en una categoría concreta. O sólo en la página de blog… etc
También veremos más adelante cómo adecuar la medida de las imágenes destacadas de nuestros contenidos a su nueva medida como columna y así rascar unos milisegundos en el tiempo de carga.
Pero por el momento, y para empezar en este tema, éste pequeño snippet es todo lo que necesitas para listar posts en grid.
Eso es todo. Espero que te haya sido de utilidad. Si tienes cualquier duda al respecto y eres suscriptor espero tu correo a través del soporte del área privada. Y si no lo eres, recuerda que cada semana publico nuevos snippets en mis Cursos de WordPress Online.
A día de hoy hay un total de 108 clases publicadas con más de 216 vídeos .
