Cómo usar un diseño de cuadrícula para mostrar sus publicaciones de WordPress

¿Desea mostrar sus publicaciones de WordPress en formato de cuadrícula?

Al presentar su contenido en WordPress, un diseño de cuadrícula le brinda opciones adicionales. Esto puede resultar útil al diseñar páginas personalizadas. En este artículo, le enseñaremos cómo mostrar rápidamente sus publicaciones de WordPress en un estilo de cuadrícula en cualquier parte de su sitio.

¿Cuándo necesitas un diseño de cuadrícula de WordPress?

Cada tema de WordPress es compatible con el estilo clásico de publicación de blog vertical, que funciona bien para la mayoría de los sitios web. Sin embargo, este estilo puede ocupar mucho espacio, especialmente si tiene muchos artículos. Si está creando una página de inicio personalizada para su blog, es posible que desee utilizar el estilo de cuadrícula para mostrar su contenido más reciente.

Esto le permitirá agregar más cosas a su página de inicio. Además, su cuadrícula de publicación acentuará sus fotos destacadas, haciéndolas más atractivas estéticamente y en las que se pueda hacer clic. La cuadrícula de publicaciones también se puede usar para mostrar su cartera creativa y otras formas de material único.

Usando el editor de bloques, cree un diseño de cuadrícula de publicación de WordPress.

Con el editor de bloques de WordPress, puede mostrar fácilmente sus publicaciones y miniaturas en una disposición de cuadrícula de publicación. Puede construir su propia cuadrícula utilizando el bloque de cuadrícula posterior incorporado.

Abra la página que desea cambiar, luego haga clic en el botón Agregar bloque 'Más', busque 'Bucle de consulta' y luego haga clic en el bloque para agregarlo.

Este bloque incorpora su bucle de publicación en su página.

Luego, en la parte superior del bloque, seleccione 'Comenzar en blanco' para crear una cuadrícula de publicación.

Dependiendo del tipo de información que desee mostrar con su cuadrícula de publicación, tiene algunas opciones.

Iremos con 'Imagen, Fecha y Título', pero puedes hacer lo que quieras.

Luego, pase el mouse sobre la imagen y elija la opción 'Vista de cuadrícula'.

Esto convierte su lista en una cuadrícula de publicaciones.

La información que se muestra se puede personalizar.

Primero, eliminaremos la paginación en la parte inferior del bloque. Simplemente haga clic en él y seleccione el menú de opciones 'Tres puntos'.

Luego, elija 'Eliminar paginación'.

Esto eliminará el elemento del bloque automáticamente.

Del mismo modo, puede eliminar las fechas de las publicaciones o dejar información adicional sobre las publicaciones para sus lectores.

Después de eso, agregaremos enlaces tanto a la miniatura de la publicación como al título de la publicación.

Simplemente haga clic en la miniatura de su publicación y active la opción 'Enlace a la publicación' en el cuadro de opciones de la derecha.

Luego, para el título de tu publicación, repite el proceso.

Cuando haya terminado, haga clic en el botón 'Actualizar' o 'Publicar' para publicar su cuadrícula de publicaciones.

Ahora puede ver su nueva cuadrícula de publicaciones de WordPress visitando su sitio web de WordPress.

Luego, para el título de tu publicación, repite el proceso. Cuando haya terminado, haga clic en el botón 'Actualizar' o 'Publicar' para publicar su cuadrícula de publicaciones. Ahora puede ver su nueva cuadrícula de publicaciones de WordPress visitando su sitio web de WordPress.

Al agregar código a WordPress, puede crear un diseño de cuadrícula de publicación de WordPress.

Este enfoque requiere una comprensión básica de cómo insertar código en WordPress. Antes de comenzar a agregar código, primero debe establecer un nuevo tamaño de imagen para su cuadrícula de publicación.

A continuación, ubique el archivo del tema de WordPress al que agregará el fragmento de código. Puede, por ejemplo, incluirlo en su archivo single.php para que se muestre en la parte inferior de todos sus artículos. También puede crear su propia plantilla de página para mostrar el diseño de cuadrícula de su publicación de blog con miniaturas.

Después de eso, puede comenzar a agregar código a WordPress. Desglosaremos el ejemplo de código sección por sección porque es muy largo. Para comenzar, inserte el siguiente fragmento de código en su archivo de plantilla de tema.

 <?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?>

La consulta de bucle posterior se configura en esta línea de código. Si lo desea, puede modificar la variable 'publicaciones por página' para mostrar más publicaciones por página.

Luego, en su archivo de plantilla de tema, pegue el siguiente fragmento de código.

 <?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?>

Esta línea de código produce dos columnas para nuestros artículos, mostrando el título y la imagen de la publicación. También genera una clase CSS, que diseñaremos más adelante. También se refiere a 'imagen de publicación', que debe reemplazarse con el nombre del tamaño de imagen que creó anteriormente.

Luego, al final, agregue el siguiente fragmento de código.

 <?php $counter++; endwhile; //Post Navigation code goes here endif; ?>

Este fragmento de código simplemente cierra el ciclo. También le permite agregar navegación posterior, pero debido a que la mayoría de los propietarios de sitios web usan un complemento diferente para esto, no lo incluimos para evitar conflictos de código.

Así es como aparece el fragmento de código completo.

 <div> <?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?> <?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?> <?php $counter++; endwhile; //Pagination can go here if you want it. endif; ?> </div>

Para asegurarse de que su cuadrícula de publicaciones se muestre correctamente, agregue el siguiente CSS a su sitio web.

 #gridcontainer{ margin: 20px 0; width: 100%; } #gridcontainer h2 a{ color: #77787a; font-size: 13px; } #gridcontainer .griditemleft{ float: left; width: 278px; margin: 0 40px 40px 0; } #gridcontainer .griditemright{ float: left; width: 278px; } #gridcontainer .postimage{ margin: 0 0 10px 0; }

Explore los efectos de varios selectores de CSS en diferentes componentes de su post loop experimentando.

Esperamos que este artículo haya sido útil para enseñarle cómo mostrar sus publicaciones de WordPress en un estilo de cuadrícula.