Deseja exibir os posts do WordPress em um layout de grade?
Um layout de grade oferece mais flexibilidade ao exibir suas postagens no WordPress. Isso pode ser útil ao criar páginas personalizadas.
Neste artigo, mostraremos como exibir facilmente suas postagens do WordPress em um layout de grade em qualquer lugar do seu site.
Quando você precisa de um layout de grade para o WordPress?
Todos os temas do WordPress oferecem suporte ao layout vertical tradicional de postagens de blog, e isso funciona bem para a maioria dos tipos de sites. Entretanto, esse layout pode ocupar muito espaço, especialmente se você tiver muitas postagens.
Se estiver criando uma página inicial personalizada para o seu site, talvez queira usar o layout de grade para exibir as publicações recentes.
Isso lhe dará mais espaço para adicionar outros elementos à sua página inicial.
Além disso, sua grade de postagens destacará as imagens em destaque, para que seja visualmente atraente e clicável. Você também pode usar a grade de postagens para exibir seu portfólio criativo e outros tipos de conteúdo personalizado.
Muitos temas de revistas e temas de fotografia já usam o layout baseado em grade para exibir publicações. Entretanto, se o seu tema não for compatível com essa funcionalidade, você precisará adicioná-la.
Dito isso, vamos mostrar como exibir os posts do WordPress em um layout de grade. Basta usar os links rápidos abaixo para ir direto ao método que você deseja usar.
- Criar um layout de grade com o editor de blocos do WordPress
- Criar um layout de grade com o plug-in Post Grid
- Criar um layout de grade usando o construtor de páginas SeedProd
- Criar um layout de grade adicionando código ao WordPress
Tutorial em vídeo
Se você preferir instruções por escrito, continue lendo.
Método 1. Criar um layout de grade de postagem do WordPress com o Block Editor
Esse método permite que você simplesmente exiba suas postagens e miniaturas em um layout de grade de postagens usando o editor de blocos do WordPress. Há um bloco de grade de postagem incorporado que permite criar sua própria grade.
Para fazer isso, abra a página que deseja editar, clique no botão “Mais” para adicionar bloco e procure por “Query Loop” e clique no bloco para adicioná-lo.
Esse bloco adiciona o loop de postagem à sua página.
Em seguida, clique na opção “Start Blank” (Iniciar em branco) na parte superior do bloco para criar uma grade de postagem.
Isso oferece algumas opções diferentes, dependendo do tipo de informação que você deseja exibir com sua grade de postagem.
Selecionaremos a opção “Image, Date, & Title”, mas você pode escolher o que quiser.
Depois disso, passe o mouse sobre a imagem e selecione a opção “Grid View” (Exibição em grade).
Isso transforma sua lista em uma grade de postagem.
Em seguida, você pode personalizar as informações que deseja exibir.
Primeiro, vamos excluir a paginação na parte inferior do bloco. Para fazer isso, basta clicar nela e no menu de opções “Três pontos”.
Em seguida, clique em “Remove Pagination” (Remover paginação).
Isso removerá automaticamente o elemento do bloco.
Você pode excluir as datas das postagens da mesma forma ou deixar mais informações sobre as postagens para seus visitantes.
Em seguida, adicionaremos links para a miniatura e o título da postagem.
Basta clicar na miniatura de sua postagem e ativar a opção “Link para postagem” no painel de opções do lado direito.
Em seguida, faça o mesmo com o título da postagem.
Quando terminar, clique no botão “Update” (Atualizar) ou “Publish” (Publicar) para ativar sua grade de postagens.
Agora, você pode visitar o site do WordPress para ver a nova grade de postagens do WordPress.
Você pode adicionar esse bloco a qualquer página ou post. Se quiser usá-lo como página de arquivo do seu blog, consulte nosso guia sobre como criar uma página separada para postagens de blog no WordPress.
Método 2. Criar um layout de grade de postagem do WordPress com o plug-in Post Grid
Esse método oferece uma maneira simples de adicionar uma grade de postagem personalizável que pode ser adicionada em qualquer lugar do seu site.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in Post Grid. Para obter mais detalhes, consulte nosso guia sobre como instalar um plug-in do WordPress.
Após a ativação, você precisa acessar Post Grid ” Add New para criar sua primeira grade de postagem.
Em seguida, dê um título à sua grade de postagem. Ele não aparecerá em nenhum lugar da página, é apenas para ajudá-lo a se lembrar.
Abaixo disso, você encontrará as configurações da grade de postagem divididas em diferentes seções com várias guias.
Primeiro, você precisa clicar na guia “Query Post”. É aqui que você definirá os tipos de post que deseja exibir na caixa “Post types” (Tipos de post).
Por padrão, ele exibirá apenas posts, mas você pode adicionar páginas e até mesmo tipos de posts personalizados.
Depois disso, você precisa clicar na guia “Layouts”.
Em seguida, clique no botão “Criar layout”. Isso será aberto em uma nova janela.
Você precisa nomear seu layout. Em seguida, clique na opção “General” (Geral) e será aberta uma lista de tags.
Essas tags são as informações que serão exibidas em sua grade de postagem.
Selecionaremos a opção “Thumbnail with link” e a opção “Post title with link”.
Em seguida, clique em “Publicar” ou “Atualizar” para salvar seu layout.
Agora, volte para o editor de grade de postagem original na guia anterior, e haverá uma nova opção de layout disponível que você pode selecionar.
Basta clicar no novo layout na seção “Layouts de item” na parte inferior da tela.
Em seguida, clique na guia “Item style” (Estilo do item). Aqui você pode definir o tamanho da grade.
As configurações padrão devem funcionar para a maioria dos sites, mas, se não funcionarem, você pode alterá-las aqui.
Quando terminar, clique no botão “Publish” (Publicar) na parte superior da página, e sua grade estará pronta para ser adicionada ao seu blog do WordPress.
Agora, você precisa clicar na guia “Shortcode” e, em seguida, copiar o shortcode na caixa “Post Grid Shortcode”.
Depois disso, abra a página em que deseja exibir sua lista de postagens e clique no botão “Mais” para adicionar o bloco.
Em seguida, procure por “Shortcode” e selecione o bloco “Shortcode”.
Em seguida, cole o shortcode que você copiou anteriormente na caixa.
Em seguida, clique no botão “Atualizar” ou “Publicar”.
Agora, você pode visualizar sua página para ver o layout da grade de postagens do WordPress ao vivo.
Método 3. Criar um layout de grade de postagem no WordPress com o plug-in SeedProd Page Builder
Outra maneira de criar um layout de grade de postagem é usar o plug-in do construtor de páginas SeedProd. É o melhor construtor de páginas do WordPress para arrastar e soltar do mercado, usado por mais de 1 milhão de sites.
O SeedProd ajuda você a criar facilmente páginas personalizadas e até mesmo temas totalmente personalizados do WordPress sem escrever nenhum código. Você pode usar o plug-in para criar qualquer tipo de página que desejar, como páginas 404, páginas de lançamento em breve, páginas de destino e muito mais.
Para saber mais, consulte nosso guia sobre como criar uma página personalizada no WordPress.
No construtor do SeedProd, ao personalizar sua página, basta clicar no botão adicional “Add Section” (Adicionar seção) em qualquer lugar da página.
Isso abrirá uma opção para adicionar um novo bloco.
Em seguida, arraste o bloco “Posts” para sua página, e ele adicionará automaticamente uma lista de posts à sua página.
Agora, você pode personalizar esse bloco com o painel de opções à esquerda.
Primeiro, role a tela para baixo até a seção “Layout”. Aqui você pode definir o número de colunas para a grade do post do blog e ativar as opções “Show Feature Image” e “Show Title”.
Em seguida, role para baixo até o botão de alternância “Show Excerpt” e o botão de alternância “Show Read More” e desative-os para criar um layout simples de grade de postagem de blog.
Se você quiser personalizar o esquema de cores, o texto e muito mais, clique na guia “Advanced” (Avançado) na parte superior da coluna da esquerda.
Em seguida, clique no menu suspenso “Text” (Texto) e faça suas alterações.
Você pode continuar personalizando o layout da grade da página e da postagem do blog o quanto quiser.
Quando terminar, clique no botão “Save” (Salvar) e selecione o menu suspenso “Publish” (Publicar) na parte superior da página para tornar suas alterações efetivas.
Agora, você pode visualizar a nova grade de postagens em seu site.
Método 4. Criar um layout de grade de postagem no WordPress adicionando código ao WordPress
Esse método requer algum conhecimento básico de como adicionar código ao WordPress. Se você nunca fez isso antes, consulte nosso guia sobre como copiar e colar código no WordPress.
Antes de adicionar o código, você precisa criar um novo tamanho de imagem que será usado na grade de postagens. Para saber mais, consulte nosso guia sobre como criar tamanhos de imagem adicionais no WordPress.
Em seguida, você precisará encontrar o arquivo de tema do WordPress correto onde adicionará o snippet de código. Por exemplo, você pode adicioná-lo ao single.php, para que ele apareça na parte inferior de todas as suas postagens.
Você também pode criar um modelo de página personalizado e usá-lo para exibir o layout de grade da postagem do blog com miniaturas.
Para saber mais, consulte nossa folha de dicas sobre hierarquia de modelos do WordPress para ajudar a encontrar o arquivo de modelo de tema correto.
Depois de fazer isso, você pode começar a adicionar código ao WordPress. Como o snippet de código é bastante longo, vamos dividi-lo seção por seção.
Primeiro, adicione o seguinte trecho de código ao arquivo de modelo do 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();
?>
Esse trecho de código configura a consulta de loop de posts. Você pode alterar a variável “posts_per_page” para exibir mais posts por página, se desejar.
Em seguida, adicione o seguinte trecho de código ao arquivo de modelo do 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;
?>
Esse trecho de código cria duas colunas para nossas postagens e exibirá o título e a imagem da postagem. Ele também cria uma classe CSS que mostraremos a você como estilizar mais tarde.
Ele também faz referência a ‘postimage’, portanto, você precisará alterá-lo para o nome do tamanho da imagem que criou anteriormente.
Depois disso, adicione o seguinte trecho de código no final.
<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>
Esse snippet de código simplesmente fecha o loop. Ele também oferece a opção de adicionar navegação de postagem, mas a maioria dos proprietários de sites usa um plug-in diferente para isso, portanto, não o incluímos para evitar conflitos de código.
Veja como ficou o trecho de código final.
<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>
Agora, você precisará adicionar o seguinte CSS ao seu site para garantir que a grade de postagens seja exibida de forma agradável.
Se você não tiver feito isso antes, consulte nosso guia sobre como adicionar facilmente CSS personalizado ao seu site 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;
}
Você pode modificar os diferentes seletores CSS para ver como eles alteram diferentes elementos do loop de postagem.
Esperamos que este artigo tenha ajudado você a aprender como exibir seus posts do WordPress em um layout de grade. Talvez você também queira ver nosso guia sobre como escolher o melhor software de web design e nossas escolhas de especialistas sobre o melhor software de bate-papo ao vivo para pequenas empresas.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Syed Balkhi says
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 says
I tried to do this under ‘posts’ for my blog that has already been created. It didn’t work.
WPBeginner Support says
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 says
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 says
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 says
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 says
In the layout settings, you should be able to customize the display of the featured iamges
Administrador
Lisa says
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 says
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 says
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 says
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 says
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 says
Can anyone help me to have page grid and (not post grid) for my pages. How ro customize?
Hector says
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 says
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 says
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 says
Meeeee tooooo!!!!! Following to see if there is a response…..
WPBeginner Support says
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 says
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 says
Hi Lori,
You can start with a self-hosted WordPress.org website which allows you to install plugins out of the box.
Administrador
Carl says
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 says
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 says
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 says
Hi, that’s great plugin.
But i can’t creat a grid with three colums, only two colums.
How can i?
Holly says
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 says
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 says
Can anyone help with this please
Liah says
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 says
Hi Liah,
Yes it will automatically update the grid.
Administrador
Leanne says
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 says
Hey Leanne,
You’d need to look for a WordPress theme that automatically displays your blog posts in a grid layout.
Administrador
Joseph says
Hi Thank you for the nice Article. Is there any way to make the same without plugin. If so how could i ?
Thanks
leighton says
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 says
Great Article, just wanted to know if we can add post excerpt length in this plugin?
mike says
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 says
This is just fine for pages! Still can’t figure how it works for posts! Someone help pls.
Dave Parks says
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 says
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 says
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 says
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 says
hi thanks for kind info,
please help me how to filter post by categories
hasan says
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 says
Please contact theme developer they will be able to help you better.
Administrador
anil singh says
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 says
Will this pluggin work on wordpress.com?
WPBeginner Support says
Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administrador
Tonia says
Hi – i see an image in your blog article, does this support featured content image ?
natalie james says
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 says
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