Un flux de blog standard (une colonne verticale d’articles, les uns en dessous des autres) fonctionne très bien quand vous avez dix entrées. Quand vous en avez une centaine, le défilement vertical se transforme en scroll infini: les lecteurs décrochent dès le troisième écran et la profondeur de vue tombe à zéro.

Une galerie d’articles (une grille de cartes sur 2 à 4 colonnes) résout le problème efficacement. Un seul écran contient trois fois plus d’articles, l’œil a de quoi s’accrocher et le taux de clic augmente grâce aux grandes vignettes. Pour une page d’accueil, une page de catégorie ou une landing page sur mesure, c’est le format le plus efficace.

Voici trois façons de construire une galerie d’articles dans WordPress. D’une approche entièrement native (sans extension) à du code flexible pour les développeurs. Chaque méthode inclut des étapes précises, sans généralités vagues.

💡 Aperçu rapide:

• Choisissez votre méthode: le bloc Boucle de requête natif (sans extension), l’extension Post Grid (personnalisation maximale) ou du code sur mesure avec WP_Query + lightbox (pour les développeurs).
• Pour la Boucle de requête: ouvrez une page dans l’éditeur, ajoutez un bloc Boucle de requête → Partir de zéro → sélectionnez un modèle de carte → activez l’affichage en grille → configurez les colonnes.
• Pour Post Grid: installez l’extension depuis le dépôt WordPress.org, créez une grille dans Post Grid → Ajouter, configurez la requête et l’apparence, insérez le shortcode dans n’importe quelle page.
• Pour le code sur mesure: ajoutez WP_Query avec pagination à un template de thème, enveloppez la sortie dans une div en grille avec CSS Grid, connectez GLightbox ou Fancybox pour les fenêtres pop-up.

Méthode 1: le bloc Boucle de requête, sans extension

Depuis la version 5.8, le cœur de WordPress inclut le bloc Boucle de requête. Aujourd’hui, sous WordPress 7.0, c’est un outil mature: un constructeur qui affiche une grille d’articles directement dans l’éditeur de blocs. Aucune extension, aucun shortcode, aucune modification de fichier de thème.

Créez une nouvelle page ou ouvrez-en une existante, cliquez sur «+» dans l’éditeur. Cherchez «Boucle de requête» et ajoutez le bloc. Il proposera plusieurs mises en page prêtes à l’emploi; sélectionnez Partir de zéro pour construire une carte de toutes pièces.

Un prototype apparaîtra devant vous: un seul article avec une vignette, un titre et une date. Maintenant, l’étape clé: dans la barre d’outils du bloc, cliquez sur l’icône Affichage en grille (une grille de carrés). La liste se transformera instantanément en grille. Le nombre de colonnes se règle dans la barre latérale; pour la plupart des thèmes, 3 est optimal.

Configurez le contenu de la carte selon vos besoins. Cliquez sur la vignette et, dans la barre latérale, activez l’option Lier à l’article; désormais, cliquer sur l’image mène à l’article. Faites de même pour le titre. La date peut être supprimée: cliquez dessus → trois points → Supprimer la date.

Les réglages supplémentaires de la Boucle de requête se trouvent dans la barre latérale du bloc: sélection de catégorie, tri (par date, par titre, aléatoire) et nombre d’articles par page. Si vous devez exclure certains articles, utilisez le champ Exclure.

Avantages: complètement natif, ne ralentit pas le site, fonctionne avec n’importe quel thème de blocs. Inconvénients: pas de filtrage par catégorie sans rechargement de page ni d’animations complexes; pour cela, il vous faut une extension.

Méthode 2: l’extension Post Grid, flexibilité maximale

Quand la Boucle de requête native ne suffit pas et que vous avez besoin de filtrage, d’une disposition en maçonnerie, d’un slider ou d’effets de survol, The Post Grid de RadiusTheme entre en scène. Cette extension compte plus de 250 avis et plus de 100 000 installations actives sur WordPress.org, testée jusqu’à la version 6.9.4.

L’installation est standard: Extensions → Ajouter → rechercher « The Post Grid » → Installer → Activer. Après l’activation, un élément de menu Post Grid → Ajouter apparaît.

Le processus de création de grille comporte quatre étapes:

Étape 1, Requête d’articles. Choisissez le type de contenu: articles, pages ou un type personnalisé. Filtrez par catégories, étiquettes, auteurs. Ordre de tri: par date, par titre ou aléatoire. Le nombre d’articles se règle également ici.

Étape 2, Mises en page. Cliquez sur Créer une mise en page et construisez la carte visuellement: des balises sont disponibles pour les vignettes avec et sans lien, le titre, la date, l’auteur et l’extrait. Faites glisser les champs nécessaires sur le canevas et cliquez sur Publier. Revenez aux paramètres de la grille et sélectionnez la mise en page que vous venez de créer.

Étape 3, Style des éléments. Configurez le padding, le border-radius, l’ombre, les polices et les couleurs. Le nombre de colonnes pour desktop, tablette et mobile se règle également ici.

Étape 4, Shortcode. Copiez le shortcode généré, ouvrez une page dans l’éditeur, ajoutez un bloc Shortcode et collez le code. Terminé.

La version Pro ajoute le filtrage AJAX (les lecteurs changent de catégorie sans rechargement de page), plus le scroll infini, la grille en maçonnerie et la prise en charge des types de contenu personnalisés. Le tarif commence à 49 $ par an.

Avantages: contrôle total de l’apparence, fonctionne avec n’importe quel thème et constructeur de page (Elementor, Divi). Inconvénients: la version gratuite n’a pas le filtrage AJAX ni la maçonnerie; l’extension ajoute du CSS et du JS, donc sur des sites très légers, l’augmentation de 50 à 80 Ko peut être perceptible.

Méthode 3: code sur mesure avec WP_Query, pour les développeurs

Si vous construisez un thème from scratch ou modifiez un thème enfant, vous pouvez réaliser la galerie entièrement en code. C’est plus léger qu’une extension (pas un seul kilo-octet supplémentaire) et cela vous donne un contrôle absolu sur la structure HTML.

Le template ci-dessous est un point de départ minimal et fonctionnel. Ajoutez-le à un fichier de thème (par exemple, front-page.php dans un thème enfant) ou via l’extension Code Snippets avec un hook sur 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

Grille CSS, CSS Grid natif, sans 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
}

Trois colonnes sur desktop → deux sur tablette → une sur téléphone. repeat(3, 1fr) signifie «trois colonnes de largeur égale» et gap: 24px définit l’espacement entre les cartes.

Pour une galerie aléatoire, remplacez 'orderby' => 'date' par 'orderby' => 'rand'. La requête mélange les articles à chaque chargement de page, exactement ce que décrit l’idée originale de ce tutoriel.

La lightbox se connecte séparément. Deux options éprouvées: GLightbox (gratuit, environ 5 Ko gzippé, pas de jQuery) et Fancybox 5 (licence MIT, support de galerie intégré). Ajoutez un attribut data au lien:

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

Initialisez GLightbox dans votre main.js:

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

Cette approche vous donne une galerie d’articles entièrement personnalisée avec une lightbox qui pèse moins de 10 Ko en plus de la charge standard de WordPress. Important: avant de modifier les fichiers du thème, faites une sauvegarde complète avec l’extension Duplicator ou un snapshot d’hébergement. Si vous placez du code dans functions.php, utilisez un thème enfant pour ne pas perdre vos modifications lors des mises à jour.

Regardez une courte vidéo: installer The Post Grid en 8 minutes, de la recherche de l’extension dans le dépôt à une grille en direct sur la page:

⁉️🤔 Foire aux questions

Quelle méthode choisir pour un blog classique?

Si vous avez un thème de blocs, commencez par la Boucle de requête. C’est un bloc natif, zéro extension et aucun ralentissement du site. Pour trois colonnes avec vignettes, c’est largement suffisant. Passez à une extension uniquement si vous avez besoin d’une disposition en maçonnerie ou d’un filtrage sans rechargement de page.

Pourquoi ai-je besoin d’une galerie d’articles si mon thème affiche déjà des articles?

Un flux de thème standard est une liste verticale. Une galerie en grille fait tenir 3 à 4 fois plus d’articles sur le premier écran. Densité → engagement plus élevé → taux de rebond plus faible. Pour les pages d’accueil et les landing pages personnalisées, c’est déterminant.

La Boucle de requête fonctionne-t-elle avec les thèmes classiques?

Oui, si le thème n’a pas bloqué l’éditeur de blocs via remove_theme_support. Pour les très anciens thèmes construits sur des shortcodes et des widgets, The Post Grid est un meilleur choix puisqu’il fonctionne avec tout via un simple shortcode.

Puis-je créer une grille d’articles avec une lightbox gratuitement?

Oui, la méthode 3 est entièrement gratuite: WP_Query du cœur + CSS Grid du cœur + GLightbox sous licence MIT. Zéro coût, performance pure. L’inconvénient est que vous avez besoin de connaissances de base en PHP et CSS.

La Boucle de requête va-t-elle casser mon site lors d’une mise à jour de WordPress?

Non. La Boucle de requête est un bloc natif du cœur; il se met à jour avec WordPress et subit des tests complets à chaque version. Le paramètre showposts (l’ancienne approche avec get_posts) est obsolète depuis la version 3.1 et les méthodes modernes ne cassent pas lors des mises à jour majeures.

Comment changer le nombre de colonnes sur mobile?

Dans la Boucle de requête, utilisez la barre latérale du bloc sous Paramètres de la grille: vous pouvez définir un nombre de colonnes différent pour chaque point de rupture (desktop, tablette, mobile). Dans The Post Grid, allez à l’étape Style des éléments pour les mêmes points de rupture. En code sur mesure, utilisez les media queries en CSS (comme montré dans l’exemple ci-dessus).

Quelle méthode utiliser en 2026

Pour neuf sites sur dix, le bloc Boucle de requête est suffisant. Il est natif, léger et se monte en deux minutes sans documentation. Si vous avez besoin d’un filtrage par catégorie sans rechargement de page, d’une grille en maçonnerie ou d’une intégration avec Elementor, installez The Post Grid: plus de 100 000 installations et plus de 250 avis sur WordPress.org parlent d’eux-mêmes.

Le code sur mesure avec WP_Query est le choix de ceux qui construisent un thème from scratch ou maintiennent un site à forte charge où chaque kilo-octet compte. C’est aussi la seule façon d’obtenir une galerie d’articles aléatoire sans extension: 'orderby' => 'rand' dans les arguments de WP_Query fait exactement ce pour quoi les développeurs écrivaient des pages de code il y a dix ans en utilisant get_posts et des lightboxes maison.

Choisissez la méthode qui correspond à votre besoin et rendez le premier écran de votre site dense; les lecteurs vous remercieront en faisant défiler la page.