Un feed blog standard (una colonna verticale di post, uno sotto l’altro) funziona bene quando hai dieci contenuti. Quando ne hai cento, lo scorrimento verticale diventa uno scroll infinito: i lettori perdono interesse già al terzo schermo e la profondità di visualizzazione crolla a zero.

Una galleria di post (una griglia di card su 2-4 colonne) risolve il problema in modo efficiente. Una sola schermata contiene il triplo dei post, l’occhio ha qualcosa a cui agganciarsi e il tasso di click-through aumenta grazie alle anteprime grandi. Per una homepage, una pagina di categoria o una landing page personalizzata, questo è il formato più efficace.

Ecco tre modi per costruire una galleria di post in WordPress. Da un approccio completamente nativo (nessun plugin) a codice flessibile per sviluppatori. Ogni metodo include passaggi specifici, senza genericità vaghe.

💡 Panoramica rapida:

• Scegli il metodo: il blocco nativo Query Loop (nessun plugin), il plugin Post Grid (massima personalizzazione) oppure codice personalizzato con WP_Query + lightbox (per sviluppatori).
• Per Query Loop: apri una pagina nell’editor, aggiungi un blocco Query Loop → Inizia da zero → seleziona un template di card → attiva Vista griglia → configura le colonne.
• Per Post Grid: installa il plugin dal repository WordPress.org, crea una griglia in Post Grid → Aggiungi nuovo, configura la query e l’aspetto, inserisci lo shortcode in qualsiasi pagina.
• Per il codice personalizzato: aggiungi WP_Query con paginazione a un template del tema, racchiudi l’output in un div grid usando CSS Grid, collega GLightbox o Fancybox per le finestre popup.

Metodo 1: blocco Query Loop, nessun plugin

Dalla versione 5.8, il core di WordPress include il blocco Query Loop. Oggi, in WordPress 7.0, è uno strumento maturo: un costruttore che mostra una griglia di post direttamente nell’editor a blocchi. Nessun plugin, shortcode o modifica ai file del tema.

Crea una nuova pagina o aprine una esistente, clicca «+» nell’editor. Cerca «Query Loop» e aggiungi il blocco. Ti proporrà diversi layout già pronti; seleziona Inizia da zero per costruire una card partendo da zero.

Apparirà un prototipo: un singolo post con anteprima, titolo e data. Ora il passaggio chiave: sulla barra degli strumenti del blocco, clicca l’icona Vista griglia (una griglia di quadrati). L’elenco si trasformerà immediatamente in una griglia. Il numero di colonne si configura nella barra laterale; per la maggior parte dei temi, 3 è il valore ottimale.

Configura il contenuto della card in base alle tue esigenze. Clicca sull’anteprima e nella barra laterale attiva l’opzione Collega al post; ora cliccando sull’immagine si arriva al post. Fai lo stesso per il titolo. La data può essere rimossa: cliccaci sopra → tre puntini → Rimuovi data.

Altre impostazioni del Query Loop si trovano nella barra laterale del blocco: selezione delle categorie, ordinamento (per data, per titolo, casuale) e numero di post per pagina. Se devi escludere determinati post, usa il campo Escludi.

Pro: completamente nativo, non rallenta il sito, funziona con qualsiasi tema a blocchi. Contro: nessun filtro per categoria senza ricaricare la pagina e nessuna animazione complessa; per quello serve un plugin.

Metodo 2: il plugin Post Grid, massima flessibilità

Quando il Query Loop nativo non basta e hai bisogno di filtri, layout masonry, uno slider o effetti hover, entra in scena The Post Grid di RadiusTheme. Questo plugin ha oltre 250 valutazioni e più di 100.000 installazioni attive su WordPress.org, testato fino alla versione 6.9.4.

L’installazione è standard: Plugin → Aggiungi nuovo → cerca «The Post Grid» → Installa → Attiva. Dopo l’attivazione, compare la voce di menu Post Grid → Aggiungi nuovo.

Il processo di creazione della griglia ha quattro passaggi:

Passaggio 1, Query Post. Scegli il tipo di contenuto: post, pagine o un tipo personalizzato. Filtra per categorie, tag, autori. Ordinamento: per data, titolo o casuale. Qui si imposta anche il numero di post.

Passaggio 2, Layout. Clicca Crea layout e costruisci la card in modo visuale: sono disponibili tag per anteprime con e senza link, titolo, data, autore ed estratto. Trascina i campi necessari sulla tela e clicca Pubblica. Torna alle impostazioni della griglia e seleziona il layout appena creato.

Passaggio 3, Stile elemento. Configura padding, border radius, ombra, font e colori. Qui si imposta anche il numero di colonne per desktop, tablet e mobile.

Passaggio 4, Shortcode. Copia lo shortcode generato, apri una pagina nell’editor, aggiungi un blocco Shortcode e incolla il codice. Fatto.

La versione Pro aggiunge il filtro AJAX (i lettori cambiano categoria senza ricaricare la pagina), oltre a scroll infinito, griglia masonry e supporto per tipi di post personalizzati. Il prezzo parte da $49 all’anno.

Pro: controllo totale sull’aspetto, funziona con qualsiasi tema e page builder (Elementor, Divi). Contro: la versione gratuita non ha il filtro AJAX né il masonry; il plugin aggiunge CSS e JS, quindi su siti molto leggeri l’aumento di 50-80 KB può essere percepibile.

Metodo 3: codice personalizzato con WP_Query, per sviluppatori

Se stai costruendo un tema da zero o modificando un tema child, puoi realizzare la galleria interamente con codice. È più leggero di un plugin (nemmeno un kilobyte in più) e ti dà il controllo assoluto sulla struttura HTML.

Il template qui sotto è un punto di partenza minimo ma funzionante. Aggiungilo a un file del tema (per esempio, front-page.php in un tema child) oppure tramite il plugin Code Snippets con un hook su 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

Griglia CSS, CSS Grid nativo, nessun framework:

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
}

Tre colonne su desktop → due su tablet → una su telefono. repeat(3, 1fr) significa «tre colonne di larghezza uguale» e gap: 24px imposta la spaziatura tra le card.

Per una galleria casuale, sostituisci 'orderby' => 'date' con 'orderby' => 'rand'. La query mescola i post a ogni caricamento della pagina, esattamente ciò che descrive l’idea originale di questo tutorial.

La lightbox si collega separatamente. Due opzioni affidabili: GLightbox (gratuita, circa 5 KB compressi, nessuna dipendenza da jQuery) e Fancybox 5 (licenza MIT, supporto galleria integrato). Aggiungi un attributo data al 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>

Inizializza GLightbox nel tuo main.js:

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

Questo approccio ti dà una galleria di post completamente personalizzata con una lightbox che pesa meno di 10 KB in aggiunta al carico standard di WordPress. Importante: prima di modificare i file del tema, fai un backup completo usando il plugin Duplicator o uno snapshot dell’hosting. Se inserisci codice in functions.php, usa un tema child per non perdere le modifiche con gli aggiornamenti.

Guarda un breve video: installare The Post Grid in 8 minuti, dalla ricerca del plugin nel repository alla griglia funzionante sulla pagina:

⁉️🤔 Domande frequenti

Quale metodo scegliere per un blog normale?

Se hai un tema a blocchi, parti con Query Loop. È un blocco nativo, zero plugin e nessun rallentamento del sito. Per tre colonne con anteprime è più che sufficiente. Passa a un plugin solo quando ti servono layout masonry o filtri senza ricaricare la pagina.

Perché mi serve una galleria di post se il mio tema li mostra già?

Il feed standard di un tema è un elenco verticale. Una galleria a griglia fa stare da 3 a 4 volte più post nella prima schermata. Densità → maggiore coinvolgimento → frequenza di rimbalzo più bassa. Per homepage e landing page personalizzate, questo è cruciale.

Query Loop funziona con i temi classici?

Sì, se il tema non ha bloccato l’editor a blocchi tramite remove_theme_support. Per temi molto vecchi basati su shortcode e widget, The Post Grid è la scelta migliore perché funziona con qualsiasi cosa tramite un normale shortcode.

Posso creare una griglia di post con lightbox gratis?

Sì, il metodo 3 è completamente gratuito: WP_Query dal core + CSS Grid dal core + GLightbox con licenza MIT. Costo zero, prestazioni pure. Lo svantaggio è che servono conoscenze di base di PHP e CSS.

Query Loop può rompere il sito quando WordPress si aggiorna?

No. Query Loop è un blocco nativo del core; si aggiorna con WordPress ed è sottoposto a test completi a ogni release. Il parametro showposts (il vecchio approccio con get_posts) è deprecato dalla versione 3.1 e i metodi moderni non si rompono durante gli aggiornamenti maggiori.

Come cambio il numero di colonne su mobile?

In Query Loop, usa la barra laterale del blocco in Impostazioni griglia: puoi impostare un numero diverso di colonne per ogni breakpoint (desktop, tablet, mobile). In The Post Grid, vai al passaggio Stile elemento per gli stessi breakpoint. Nel codice personalizzato, usa le media query nei CSS (come mostrato nell’esempio sopra).

Quale metodo usare nel 2026

Per nove siti su dieci, il blocco Query Loop è sufficiente. È nativo, leggero e si monta in due minuti senza documentazione. Se ti servono filtri per categoria senza ricaricare la pagina, griglia masonry o integrazione con Elementor, installa The Post Grid: oltre 100.000 installazioni e più di 250 valutazioni su WordPress.org parlano da sole.

Il codice personalizzato con WP_Query è la scelta per chi costruisce un tema da zero o gestisce un sito ad alto traffico dove ogni kilobyte conta. È anche l’unico modo per ottenere una galleria di post casuale senza plugin: 'orderby' => 'rand' negli argomenti di WP_Query fa esattamente ciò per cui dieci anni fa gli sviluppatori scrivevano pagine di codice usando get_posts e lightbox fatte in casa.

Scegli il metodo più adatto al tuo obiettivo e rendi densa la prima schermata del tuo sito; i lettori ti ringrazieranno continuando a scorrere.