¿Quieres mostrar entradas de WordPress en una disposición de cuadrícula?
Una disposición en cuadrícula le ofrece más flexibilidad a la hora de mostrar sus entradas en WordPress. Esto puede ser útil a la hora de crear páginas personalizadas.
En este artículo, le mostraremos cómo mostrar fácilmente sus entradas de WordPress en una disposición de cuadrícula en cualquier lugar de su sitio.
¿Cuándo necesita una estructura / disposición / diseño / plantilla para WordPress?
Todos los temas de WordPress son compatibles con la tradicional disposición vertical de las entradas de blog, que funciona bien en la mayoría de los sitios web. Sin embargo, esta disposición puede ocupar mucho espacio, sobre todo si tienes muchas entradas.
Si está creando una página de inicio personalizada para su sitio, entonces puede que desee utilizar la disposición de cuadrícula para mostrar sus entradas recientes.
Así tendrá más espacio para añadir otros elementos a su página de inicio / página de inicio.
Además, la cuadrícula de entradas resaltará las imágenes destacadas, para que sea visualmente atractiva y se pueda hacer clic en ella. También puede utilizar la cuadrícula de entradas para mostrar su porfolio creativo y otros tipos de contenido personalizado.
Muchos temas de revistas y temas de fotografía ya utilizan la disposición en cuadrícula para mostrar las entradas. Sin embargo, si tu tema no es compatible con esta funcionalidad, tendrás que añadirla.
Dicho esto, vamos a mostrarte cómo mostrar tus entradas de WordPress en una disposición de cuadrícula. Simplemente utilice los enlaces rápidos a continuación para saltar directamente al método que desea utilizar.
- Crear una disposición de cuadrícula con el editor de bloques de WordPress
- Crear una disposición de cuadrícula con el plugin Post Grid
- Crear una cuadrícula con el maquetador de páginas SeedProd
- Crear una disposición de cuadrícula añadiendo código a WordPress
Tutorial en vídeo
Si prefiere instrucciones escritas, siga leyendo.
Método 1. Crear una disposición de cuadrícula de entradas de WordPress con el editor de bloques
Este método te permite mostrar tus entradas y miniaturas en una disposición de cuadrícula de entradas utilizando el editor de bloques de WordPress. Hay un bloque de cuadrícula de entradas integrado que te permite crear tu propia cuadrícula.
Para ello, abra la página que desea editar, haga clic en el botón “Más” para añadir un bloque y busque “Bucle de consulta”; a continuación, haga clic en el bloque para añadirlo.
Este bloque añade el bucle de entradas a tu página.
A continuación, haz clic en la opción “Empezar en blanco” de la parte superior del bloque para crear una cuadrícula de entradas.
Esto ofrece varias opciones en función del tipo de información que desee mostrar en la cuadrícula de entradas.
Nosotros seleccionaremos la opción “Imagen, fecha y título”, pero tú puedes elegir lo que quieras.
A continuación, pase el cursor sobre la imagen y seleccione la opción “Vista de cuadrícula”.
Esto convierte tu lista en una cuadrícula de entradas.
A continuación, puede personalizar la información que desea mostrar.
En primer lugar, vamos a borrar la paginación de la parte inferior del bloque. Para ello, basta con hacer clic sobre ella y pulsar el menú de opciones “Tres puntos”.
A continuación, haga clic en “Quitar / eliminar paginación”.
Esto quitará / eliminará automáticamente el elemento del bloque.
Puedes borrar las fechas de las entradas de la misma manera o dejar más información de la entrada para tus visitantes.
A continuación, añadiremos enlaces a la miniatura y al título de la entrada.
Sólo tiene que hacer clic en la miniatura de su entrada y activar el conmutador “Enlazar a entrada” del panel de opciones de la derecha.
A continuación, haga lo mismo con el título de su entrada.
Cuando hayas terminado, haz clic en el botón “Actualizar” o “Publicar” para activar la cuadrícula de entradas.
Ahora, puede visitar su sitio web de WordPress para ver su nueva cuadrícula de entradas de WordPress.
Puedes añadir este bloque a cualquier página o entrada. Si desea utilizarlo como página de archivo de su blog, consulte nuestra guía práctica sobre cómo crear una página independiente para entradas de blog en WordPress.
Método 2. Crear una estructura / disposición / diseño / plantilla de entradas de WordPress con el plugin Post Grid.
Este método ofrece una forma sencilla de añadir una cuadrícula de entradas personalizable que puede añadir en cualquier lugar de su sitio web.
Lo primero que tienes que hacer es instalar y activar el plugin Post Grid. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Una vez activado, debe visitar Cuadrícula de entradas ” Añadir nueva para crear su primera cuadrícula de entradas.
A continuación, dale un título a la cuadrícula de tu entrada. Esto no aparecerá en ninguna parte de su página es sólo para ayudarle a recordar.
Debajo encontrará los ajustes de la cuadrícula de entradas divididos en diferentes secciones con varias pestañas.
En primer lugar, tienes que hacer clic en la pestaña “Consulta de entradas”. Aquí es donde definirá los tipos de entradas que desea mostrar en el cuadro “Tipos de entradas”.
Por defecto, solo mostrará entradas, pero puedes añadir páginas e incluso tipos de contenido personalizados.
A continuación, deberá hacer clic en la pestaña “Disposiciones”.
A continuación, haga clic en el botón “Crear disposición”. Se abrirá una nueva ventana.
Tienes que ponerle un nombre a tu disposición / disposición / diseño / plantilla. A continuación, haga clic en la opción “General” y se abrirá una lista de etiquetas.
Estas etiquetas son la información que se mostrará en la cuadrícula de entradas.
Seleccionaremos la opción “Miniatura con enlace” y la opción “Título de entrada con enlace”.
A continuación, haga clic en “Publicar” o “Actualizar” para guardar la estructura / disposición / diseño / plantilla.
Ahora, vuelva al editor de la cuadrícula de entradas original en la pestaña anterior, y habrá una nueva opción de disposición disponible que puede seleccionar.
Basta con hacer clic en la nueva estructura / disposición / diseño / plantilla de la sección “Estructura de los elementos / artículo”, en la parte inferior de la pantalla.
A continuación, haga clic en la pestaña “Estilo del elemento”. Aquí puedes establecer el tamaño de tu cuadrícula.
Los ajustes por defecto deberían funcionar para la mayoría de los sitios, pero si no es así, puede cambiarlos aquí.
Cuando hayas terminado, haz clic en el botón “Publicar” de la parte superior de la página y tu cuadrícula estará lista para añadirla a tu blog de WordPress.
Ahora, tienes que hacer clic en la pestaña ‘Shortcode’ y luego copiar el shortcode en la casilla ‘Post Grid Shortcode’.
A continuación, abra la página en la que desea mostrar su lista de entradas y haga clic en el botón “Más” para añadir un bloque.
A continuación, busque “Shortcode” y seleccione el bloque “Shortcode”.
A continuación, pegue en el cuadro el shortcode que ha copiado anteriormente.
A continuación, haga clic en el botón “Actualizar” o “Publicar”.
Ahora, usted puede ver su página para ver su estructura / disposición / diseño / plantilla de entradas de WordPress en vivo.
Método 3. Crear una estructura / disposición / diseño / plantilla de la cuadrícula de entradas de WordPress con el plugin SeedProd Page Builder.
Otra forma de crear una estructura / disposición / diseño / plantilla de entradas es utilizando el plugin SeedProd page builder. Es el mejor editor de arrastrar y soltar página de WordPress en el mercado utilizado por más de 1 millón de sitios web.
SeedProd le ayuda a crear fácilmente páginas personalizadas e incluso temas de WordPress completamente personalizados sin escribir ningún código. Puedes utilizar el plugin para crear cualquier tipo de página que desees, como páginas 404, páginas de próximo lanzamiento, páginas de destino y mucho más.
Para obtener más información, consulte nuestra guía sobre cómo crear una página personalizada en WordPress.
En el maquetador SeedProd, cuando esté personalizando su página, simplemente haga clic en el botón “Añadir sección” en cualquier parte de la página.
Aparecerá una opción para añadir un nuevo bloque.
A continuación, arrastra el bloque “Entradas” a tu página y automáticamente se añadirá un catálogo de entradas a tu página.
Ahora, puede personalizar este bloque con el panel de opciones de la izquierda.
En primer lugar, desplázate hasta la sección “Disposición / diseño / plantilla”. Aquí puedes establecer el número de columnas de la cuadrícula de entradas de tu blog y activar los conmutadores “Mostrar imagen característica” y “Mostrar título”.
A continuación, desplácese hacia abajo hasta el conmutador “Mostrar extracto” y los conmutadores “Mostrar leer más” y desactívelos para crear una estructura / disposición / diseño / plantilla de entradas de blog sencilla.
Si desea personalizar la combinación de colores, el texto, etc., haga clic en la pestaña “Avanzado” situada en la parte superior de la columna de la izquierda.
A continuación, haz clic en el menú desplegable “Texto” y realiza los cambios que desees.
Puede seguir personalizando la disposición de la cuadrícula de su página y entradas de blog tanto como desee.
Cuando haya terminado, haga clic en el botón “Guardar” y seleccione “Publicar” en la parte superior de la página para hacer efectivos los cambios.
Ahora, puedes ver tu nueva cuadrícula de entradas en tu sitio web.
Método 4. Crear una disposición de cuadrícula de entradas de WordPress añadiendo código a WordPress
Este método requiere conocimientos básicos sobre cómo añadir código a WordPress. Si no lo ha hecho antes, consulte nuestra guía sobre cómo copiar y pegar código en WordPress.
Antes de añadir código, necesitas crear un nuevo tamaño de imagen que usarás para la cuadrícula de entradas. Para obtener más información, consulte nuestra guía sobre cómo crear tamaños de imagen adicionales en WordPress.
A continuación, tendrás que encontrar el archivo de tema de WordPress adecuado en el que añadirás el fragmento de código. Por ejemplo, puedes añadirlo a tu single.php, para que aparezca en la parte inferior de todas tus entradas.
También puede crear una plantilla de página personalizada y utilizarla para mostrar la disposición en cuadrícula de las entradas de su blog con miniaturas.
Para obtener más información, consulte nuestra hoja de trucos de jerarquía de plantillas de WordPress para ayudarle a encontrar el archivo de plantilla de tema adecuado.
Una vez hecho esto, puede empezar a añadir código a WordPress. Dado que el fragmento de código es bastante largo, lo desglosaremos sección por sección.
En primer lugar, añada el siguiente fragmento de código al archivo de plantilla de su 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();
?>
Este fragmento de código establece la consulta del bucle de entradas. Si lo desea, puede cambiar la variable ‘posts_per_page’ para mostrar más entradas por página.
A continuación, añada el siguiente fragmento de código al archivo de plantilla de su tema.
<?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;
?>
Este fragmento de código crea dos columnas para nuestras entradas y mostrará el título y la imagen de la entrada. También crea una clase CSS que le mostraremos cómo aplicar estilos más adelante.
También hace referencia a “postimage”, por lo que tendrás que cambiarlo por el nombre del tamaño de imagen que creaste anteriormente.
A continuación, añada el siguiente fragmento de código al final.
<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>
Este fragmento de código simplemente cierra el bucle. También da la opción de añadir la navegación de entradas, pero la mayoría de los propietarios de sitios web utilizan un plugin diferente para esto, así que no lo incluimos para evitar conflictos de código.
Este es el aspecto final del fragmento de código.
<div id="gridcontainer">
<?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>
Ahora, tendrás que añadir el siguiente CSS a tu sitio para asegurarte de que la cuadrícula de entradas se muestra correctamente.
Si no lo ha hecho antes, consulte nuestra guía sobre cómo añadir fácilmente CSS personalizado a su sitio de WordPress.
#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;
}
Puedes modificar los diferentes selectores CSS para ver cómo cambian los diferentes elementos del bucle de tu entrada.
Esperamos que este artículo te haya ayudado a aprender cómo mostrar tus entradas de WordPress en una disposición de cuadrícula. También puedes consultar nuestra guía sobre cómo elegir el mejor software de diseño web y nuestra selección de expertos sobre el mejor software de chat en directo para pequeñas empresas.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Rachel
I tried to do this under ‘posts’ for my blog that has already been created. It didn’t work.
WPBeginner Support
You would want to ensure you have multiple blog posts published live on your site for them to be visible as the most common reason for that issue.
Administrador
julie
Hi
I have tried this on my static homepage but it is not working.
Do I just add the one shortcode or both ( ie the php code also?)
using make theme.
do i just add it to the page as a paragraph and shortcode?
thanks
julie
WPBeginner Support
You should only need to add the shortcode to the page, if you reach out to the plugin’s support they should be able to let you know why it is not displaying properly
Administrador
Paige
Is there a way to customize the thumbnails? I have mine set to the featured image, however some are different sizes and are cut off in the wrong areas.
WPBeginner Support
In the layout settings, you should be able to customize the display of the featured iamges
Administrador
Lisa
I’m following all the steps to set this grid up on my homepage but it’s not displaying. I created a page, added the short code, and under settings–>reading I set my homepage to static with that page. What am I doing wrong?
p.s. I purchased a child theme (Foodie Pro), could that be my issue? Thanks!
WPBeginner Support
There may be a page template that could be causing a display issue, if you reach out to Post Grid’s support they should be able to help have it display properly
Administrador
Jess
This was GREAT!!! Thankyou! I was able to apply this for my main blog page however I also have navigation for the different categories within my blog. How can I make it so that each of these category pages also displays as a grid?
Lu
I installed this plugin but my Wordpress site have been automatically updated to Gutenberg and now a box appears in all my Wordpress Post pages, covering the content so I can’t see it! The only way I can get rid of it is to de-install Post Grid. Anyone have any other ideas so I can use the Post Grid? Thanks for any help! L
Robert
I have the page set up but I have 5 posts that I did before that are not showing up on the new Post Grid.
How do I get the posts to show up on the grid?
Travenjo
Can anyone help me to have page grid and (not post grid) for my pages. How ro customize?
Hector
I’m using the Twenty Fourteen theme and this only gave me one option for layout instead of what you are showing and the one they let me use is a double but it just doesn’t work even the pagination got stuck on me so I don’t know what to do,is there a better plugin for my theme?
Aurangzaib
What a simple solution, i understand WP and PHP on a good level and this is the smartest and easiest solution to make a grid of posts and fetch them up from the DB, although the need is pretty rare if you are willing to make a different page for any purpose otherwise there are themes that have built-in support of many kinds of grids designs i customized and designed a bit on my web there at simspk.com, also keeping simple and clean content is the simplest way to achieve better ranks, Great post bro, keep them up!
Daniel Grove
What about for blog category pages? They just get listed vertically in my theme and it looks lame and wastes so much space! I want it to grid them just like the home blog page does.
Jess
Meeeee tooooo!!!!! Following to see if there is a response…..
WPBeginner Support
Hey Daniel and Jess,
The plugin’s premium version claims to have the option to create post grid for category archive pages. We didn’t test the premium version for the article. Please check the plugin website to learn more before buying.
Administrador
Lori
I have the Dara theme with the Premium plan, and I am VERY NEW. Unfortunately, I just realized that plug-ins are only available with the Business plan, which I cannot afford to invest in at this time since it would triple my cost. Dara has a grid page option, but it only allows child pages to be displayed – I want POSTS to display from a specific category. Looks like I would have to create a static child page every time I want new content to appear in this Premium plan Dara grid page option, right??
WPBeginner Support
Hi Lori,
You can start with a self-hosted WordPress.org website which allows you to install plugins out of the box.
Administrador
Carl
This is great but is this same process possible WITHOUT installing a plugin. How do you shows 10 different category separately? How select images for grid?
Brianna
This is awesome! Is there a way to edit from two across ( 2 columns) to three or four? When I change the settings to 20 posts a page, I am getting 2 columns and 10 rows.
Dale Kevin
Hi, I followed all the steps but it doesnt work. The page where I posted the shortcode of postgrid doesnt show up as my how page. Whats wrong? Maybe the Php code is needed?
I need you guidance. Thank you. I appreciate you response
Mr Thanh
Hi, that’s great plugin.
But i can’t creat a grid with three colums, only two colums.
How can i?
Holly
Hi,
I’ve used this plugin on all the sites i’ve created, i love it its so easy to use but im having a problem with the layout a little bit. Im using Layout 1 with 4 Columns and for some reason a row splits into two different rows, how do i stop this from happening?
Dee
Hello there. This was very helpful thank you. It works fine on the front page of my blog but wouldn’t work in the categories. Whenever a category is clicked in the header, the page shows the theme grid and not the Post Grid. How do I go about this? What page do I copy the code into please?
Thank you
DEE
Can anyone help with this please
Liah
My current theme doesn’t have the grid layout for the blog section. I’ve download the plugin and it works great but when I upload a new blog post does it automatically update the grid to include the latest post? Thank you for the super helpful video!
WPBeginner Support
Hi Liah,
Yes it will automatically update the grid.
Administrador
Leanne
I’m trying to make the blog section of my site look nicer here – is there a way to automatically style the current blog posts in a grid rather than creating a new page and adding shortcode or editing php files?
WPBeginner Support
Hey Leanne,
You’d need to look for a WordPress theme that automatically displays your blog posts in a grid layout.
Administrador
Joseph
Hi Thank you for the nice Article. Is there any way to make the same without plugin. If so how could i ?
Thanks
leighton
I want to use this but i am confused, I follow it but I dont see anything, I copy the shortcode but still nothing, do I have to upload images and text? can someone help?
Shahid
Great Article, just wanted to know if we can add post excerpt length in this plugin?
mike
This is cool for pages only. What if my posts belong under categories only. How do I add the shortcode to category archive. Thanks
Henry
This is just fine for pages! Still can’t figure how it works for posts! Someone help pls.
Dave Parks
I finally found “Taxonomy” setting on the plugin homepage – available if you buy the premium.
Which means the freebee is of zero value.
Dave Parks
The only category setting I see is
“Exclude by post ID
you can exclude post by ID, comma(,) separated”
With all due respect to the creator of this plugin, there’s no way I’m going input all the IDs I do not want to appear. The list is too long, and it will grow as I develop this site.
So is there some place to put in the one ID that I want to appear?
Tina Davidson
Hi – I finally have my blog up and running – yay! But want to add a store element to it. A “Shop Now” page. Do you think this its the best type of plug-in to use or is the one more efficient for a store set-up? Thanks so much! Tina
hasan
thanks for good knowledge
my website has two kinds of contents : post and pages.
can i add my new pages on homepage automatically without using widgets?
thanks again
Karthik
hi thanks for kind info,
please help me how to filter post by categories
hasan
thank you for good knowledge
i use a theme support magazine template on my site but it includes only posts .
how can i use this template for pages also not only posts ?
thanks again
WPBeginner Support
Please contact theme developer they will be able to help you better.
Administrador
anil singh
thanks who do not know php and how to cutomize homepage this article will be helpful. i have one question which i searched all the web but not find any article. quetion is how can custmize homepage with category list without showing post area in homepage please make article for it . you can see example on freejobalert.in
judit
Will this pluggin work on wordpress.com?
WPBeginner Support
Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administrador
Tonia
Hi – i see an image in your blog article, does this support featured content image ?
natalie james
Thank you so much for this article, it is as though you were reading my mind and my wish list for my blog. I was easily able to follow your step by step instructions until the very end. Im not sure how to put my query correctly, I think what Im trying to say is that I would like the grid page to be my landing page of my blog. At the moment it is inside a post with a post heading. You do mention at the end that I can past the code into my themes file but unfortunately I dont know where that is. Hope this makes sense and I look forward to your reply.
thanks
Natalie
Paul Wandason
Hi Natalie,
I maybe wrong here – but I think you need to create a *page* with the grid on it, then if you go to “settings” then “reading” in the wordpress admin dashboard, you can set “Front page displays” to a static page, and select the page you’ve just created with the grid on it under the “front page” drop down menu.
Hope this helps, and good luck!
Paul