Um feed de blogue padrão (uma coluna vertical de publicações, umas abaixo das outras) funciona bem quando tem dez entradas. Quando tem uma centena, a rolagem vertical transforma-se numa rolagem infinita: os leitores perdem o interesse ao terceiro ecrã e a profundidade de visualização cai para zero.

Uma galeria de publicações (uma grelha de cartões em 2 a 4 colunas) resolve o problema de forma eficiente. Um único ecrã acomoda o triplo das publicações, o olhar tem onde se fixar e as taxas de clique aumentam graças às miniaturas grandes. Para uma página inicial, página de categoria ou landing page personalizada, este é o formato mais eficaz.

Abaixo estão três formas de construir uma galeria de publicações no WordPress. Desde uma abordagem totalmente nativa (sem plugins) até código flexível para developers. Cada uma inclui passos específicos, sem generalidades vagas.

💡 Visão geral rápida:

• Escolha o seu método: o bloco nativo Query Loop (sem plugins), o plugin Post Grid (personalização máxima) ou código personalizado usando WP_Query + lightbox (para developers).
• Para o Query Loop: abra uma página no editor, adicione um bloco Query Loop → Iniciar em Branco → selecione um modelo de cartão → ative a Vista de Grelha → configure as colunas.
• Para o Post Grid: instale o plugin a partir do repositório WordPress.org, crie uma grelha em Post Grid → Adicionar Novo, configure a consulta e a aparência, insira o shortcode em qualquer página.
• Para código personalizado: adicione WP_Query com paginação a um template do tema, envolva o output numa grelha div usando CSS Grid, ligue o GLightbox ou Fancybox para janelas pop-up.

Método 1: Bloco Query Loop, sem plugins

Desde a versão 5.8, o core do WordPress inclui o bloco Query Loop. Agora, no WordPress 7.0, é uma ferramenta madura: um construtor que exibe uma grelha de publicações diretamente no editor de blocos. Sem plugins, shortcodes ou edições de ficheiros de tema.

Crie uma nova página ou abra uma existente, clique em "+" no editor. Encontre "Query Loop" e adicione o bloco. Ele oferecerá vários layouts prontos; selecione Iniciar em Branco para construir um cartão de raiz.

Um protótipo aparecerá diante de si: uma única publicação com miniatura, título e data. Agora o passo chave: na barra de ferramentas do bloco, clique no ícone Vista de Grelha (uma grelha de quadrados). A lista transformar-se-á instantaneamente numa grelha. O número de colunas é configurado na barra lateral; para a maioria dos temas, 3 é o ideal.

Configure o conteúdo do cartão conforme as suas necessidades. Clique na miniatura e, na barra lateral, ative a opção Ligação para a Publicação; agora, clicar na imagem leva à publicação. Faça o mesmo para o título. A data pode ser removida: clique nela → três pontos → Remover Data.

As definições adicionais do Query Loop estão na barra lateral do bloco: seleção de categoria, ordenação (por data, por título, aleatória) e número de publicações por página. Se precisar de excluir certas publicações, use o campo Excluir.

Prós: completamente nativo, não torna o site mais lento, funciona com qualquer tema de blocos. Contras: sem filtragem por categoria sem recarregar a página e sem animações complexas; para isso, precisa de um plugin.

Método 2: O plugin Post Grid, máxima flexibilidade

Quando o Query Loop nativo não é suficiente e precisa de filtragem, layout masonry, um slider ou efeitos de hover, The Post Grid da RadiusTheme entra em cena. Este plugin tem mais de 250 avaliações e mais de 100.000 instalações ativas no WordPress.org, testado até à versão 6.9.4.

A instalação é padrão: Plugins → Adicionar Novo → pesquisar "The Post Grid" → Instalar → Ativar. Após a ativação, aparece um item de menu Post Grid → Adicionar Novo.

O processo de criação da grelha tem quatro passos:

Passo 1, Consultar Publicação. Escolha o tipo de conteúdo: publicações, páginas ou um tipo personalizado. Filtre por categorias, etiquetas, autores. Ordem de classificação: por data, título ou aleatória. O número de publicações também é definido aqui.

Passo 2, Layouts. Clique em Criar Layout e construa o cartão visualmente: estão disponíveis etiquetas para miniaturas com e sem links, título, data, autor e excerto. Arraste os campos necessários para a tela e clique em Publicar. Volte às definições da grelha e selecione o layout que acabou de criar.

Passo 3, Estilo do Item. Configure o padding, border-radius, sombra, fontes e cores. O número de colunas para desktop, tablet e mobile também é definido aqui.

Passo 4, Shortcode. Copie o shortcode gerado, abra uma página no editor, adicione um bloco Shortcode e cole o código. Pronto.

A versão Pro adiciona filtragem AJAX (os leitores mudam de categoria sem recarregar a página), além de scroll infinito, grelha masonry e suporte para tipos de publicação personalizados. O preço começa nos $49 por ano.

Prós: controlo total sobre a aparência, funciona com qualquer tema e construtores de páginas (Elementor, Divi). Contras: a versão gratuita não tem filtragem AJAX nem masonry; o plugin adiciona CSS e JS, pelo que em sites muito leves o aumento de 50-80 KB pode ser notório.

Método 3: código personalizado com WP_Query, para developers

Se está a construir um tema de raiz ou a modificar um tema filho, pode construir a galeria inteiramente com código. Isto é mais leve do que um plugin (nem um kilobyte extra) e dá-lhe controlo absoluto sobre a estrutura HTML.

O template abaixo é um ponto de partida funcional mínimo. Adicione-o a um ficheiro de tema (por exemplo, front-page.php num tema filho) ou através do plugin Code Snippets com um hook em template_redirect:

1
<?php
2
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
3
$args  = array(
4
    'post_type'      => 'post',
5
    'posts_per_page' => 12,
6
    'paged'          => $paged,
7
    'orderby'        => 'date',
8
    'order'          => 'DESC',
9
);
10
$query = new WP_Query( $args );
11
if ( $query->have_posts() ) : ?>
12
    <div class="post-grid">
13
        <?php while ( $query->have_posts() ) : $query->the_post(); ?>
14
            <article class="post-card">
15
                <a href="<?php the_permalink(); ?>">
16
                    <?php the_post_thumbnail( 'medium_large' ); ?>
17
                    <h3><?php the_title(); ?></h3>
18
                </a>
19
                <time datetime="<?php echo get_the_date( 'c' ); ?>">
20
                    <?php echo get_the_date(); ?>
21
                </time>
22
            </article>
23
        <?php endwhile; ?>
24
    </div>
25
    <?php the_posts_pagination(); ?>
26
<?php endif; wp_reset_postdata(); ?>
27

Grelha CSS, CSS Grid nativo, sem frameworks:

1
.post-grid {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    gap: 24px;
5
}
6
@media (max-width: 768px) {
7
    .post-grid {
8
        grid-template-columns: repeat(2, 1fr);
9
    }
10
}
11
@media (max-width: 480px) {
12
    .post-grid {
13
        grid-template-columns: 1fr;
14
    }
15
}

Três colunas em desktop → duas em tablet → uma em telemóvel. repeat(3, 1fr) significa "três colunas de largura igual" e gap: 24px define o espaçamento entre cartões.

Para uma galeria aleatória, substitua 'orderby' => 'date' por 'orderby' => 'rand'. A consulta baralha as publicações a cada carregamento de página, exatamente o que a ideia original deste tutorial descreve.

A lightbox é ligada separadamente. Duas opções comprovadas: GLightbox (gratuito, cerca de 5 KB comprimido, sem jQuery) e Fancybox 5 (licença MIT, suporte de galeria integrado). Adicione um atributo data ao link:

1
<a href="<?php the_post_thumbnail_url( 'full' ); ?>" class="glightbox" data-gallery="post-gallery">
2
    <?php the_post_thumbnail( 'medium_large' ); ?>
3
</a>

Inicialize o GLightbox no seu main.js:

1
const lightbox = GLightbox({
2
    selector: '.glightbox',
3
    touchNavigation: true,
4
    loop: true,
5
});

Esta abordagem dá-lhe uma galeria de publicações totalmente personalizada com uma lightbox que pesa menos de 10 KB além do carregamento padrão do WordPress. Importante: antes de editar ficheiros de tema, faça um backup completo usando o plugin Duplicator ou um snapshot da hospedagem. Se colocar código no functions.php, use um tema filho para não perder as alterações ao atualizar.

Veja um pequeno vídeo: instalar o The Post Grid em 8 minutos, desde a pesquisa do plugin no repositório até uma grelha ao vivo na página:

⁉️🤔 Perguntas frequentes

Que método devo escolher para um blogue normal?

Se tem um tema de blocos, comece com o Query Loop. É um bloco nativo, zero plugins e sem lentidão no site. Para três colunas com miniaturas, é mais do que suficiente. Passe para um plugin apenas quando precisar de layout masonry ou filtragem sem recarregar a página.

Por que preciso de uma galeria de publicações se o meu tema já mostra publicações?

Um feed de tema padrão é uma lista vertical. Uma galeria em grelha acomoda 3 a 4 vezes mais publicações no primeiro ecrã. Densidade → maior envolvimento → menor taxa de rejeição. Para páginas iniciais e landing pages personalizadas, isto é crítico.

O Query Loop funciona com temas clássicos?

Sim, se o tema não tiver bloqueado o editor de blocos via remove_theme_support. Para temas muito antigos construídos com shortcodes e widgets, o The Post Grid é uma escolha melhor, pois funciona com qualquer coisa através de um shortcode normal.

Posso fazer uma grelha de publicações com lightbox gratuitamente?

Sim, o método 3 é completamente gratuito: WP_Query do core + CSS Grid do core + GLightbox sob licença MIT. Custo zero, desempenho puro. A desvantagem é que precisa de conhecimentos básicos de PHP e CSS.

O Query Loop vai quebrar o meu site quando o WordPress atualizar?

Não. O Query Loop é um bloco nativo do core; atualiza com o WordPress e é submetido a testes completos em cada lançamento. O parâmetro showposts (a abordagem antiga com get_posts) foi descontinuado na versão 3.1, e os métodos modernos não se quebram durante grandes atualizações.

Como altero o número de colunas no mobile?

No Query Loop, use a barra lateral do bloco em Definições de Grelha: pode definir uma contagem de colunas diferente para cada breakpoint (desktop, tablet, mobile). No The Post Grid, vá ao passo Estilo do Item para os mesmos breakpoints. Em código personalizado, use media queries no CSS (como mostrado no exemplo acima).

Que método usar em 2026

Para nove em cada dez sites, o bloco Query Loop é suficiente. É nativo, leve e pode ser montado em dois minutos sem documentação. Se precisar de filtragem por categoria sem recarregar a página, grelha masonry ou integração com o Elementor, instale o The Post Grid: mais de 100.000 instalações e mais de 250 avaliações no WordPress.org falam por si.

O código personalizado com WP_Query é a escolha para quem constrói um tema de raiz ou mantém um site de alto tráfego onde cada kilobyte conta. É também a única forma de obter uma galeria de publicações aleatória sem plugins: 'orderby' => 'rand' nos argumentos do WP_Query faz exatamente o que os developers costumavam escrever páginas de código para fazer há dez anos, usando get_posts e lightboxes caseiras.

Escolha o método que se adequa à sua tarefa e torne o primeiro ecrã do seu site denso; os leitores agradecer-lhe-ão fazendo scroll para baixo.