Comment afficher facilement une liste de pages avec des miniatures dans WordPress

Vous souhaitez un moyen simple de rendre vos listes de pages WordPress plus attrayantes ? L'ajout de miniatures est une technique simple mais efficace pour améliorer l'attrait visuel et la navigation sur le site.

L'affichage d'images mises en avant à côté de vos titres de page donne à vos visiteurs plus d'informations sur le contenu, ils sont donc plus susceptibles de cliquer et de visiter ces pages.

Chez WPBeginner, nous avons aidé de nombreux utilisateurs à optimiser leurs sites WordPress, et nous savons que cette astuce peut faire une grande différence. 

Dans cet article, nous vous montrerons comment afficher une liste de pages avec des miniatures dans WordPress, étape par étape.

Pourquoi afficher une liste de pages avec des miniatures dans WordPress ?

WordPress a deux types de publications différents appelés articles et pages.

Les pages sont utilisées pour des contenus plus pérennes, comme les pages « À propos », « Contact » et « Services », tandis que les articles sont utilisés pour le contenu de blog qui est mis à jour plus fréquemment.

Vos pages les plus importantes sont généralement liées depuis votre menu de navigation principal, mais vous pouvez avoir plus de pages que vous souhaitez afficher.

En ajoutant une liste de pages avec des miniatures, vous pouvez rendre vos liens plus attrayants que les liens textuels standards et donner à vos visiteurs une meilleure idée du contenu de chaque page sur votre site Web WordPress.

Lorsque les visiteurs sont engagés et intéressés, ils sont susceptibles de visiter plus de pages et de rester plus longtemps sur votre site web, ce qui augmente la probabilité qu'ils effectuent un achat ou rejoignent votre liste d'e-mails.

Cela dit, examinons quelques façons différentes de montrer une liste de pages avec des miniatures sur votre site web. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

• Méthode 1. Afficher une liste de pages avec des miniatures en ajoutant du code à WordPress
• Méthode 2. Afficher une liste de pages avec des miniatures en utilisant l'éditeur de blocs WordPress

Méthode 1. Afficher une liste de pages avec des miniatures en ajoutant du code à WordPress

Une façon d'afficher une liste de pages avec des miniatures est d'ajouter du code à vos fichiers WordPress.

Cette méthode est plus avancée, mais l'avantage est que vous pourrez utiliser des shortcodes personnalisables. Au lieu d'avoir à mettre à jour manuellement la liste chaque fois que vous publiez une nouvelle page, les shortcodes généreront automatiquement une liste de pages mise à jour pour vous.

Si vous n'avez jamais ajouté de code à votre site WordPress auparavant, vous pouvez consulter notre guide pour débutants sur le coller des extraits du web dans WordPress.

Ensuite, vous devez ajouter le code suivant à votre fichier functions.php, dans un plugin spécifique au site, ou en utilisant un plugin d'extraits de code :

add_shortcode('pagelist', function ($args) {
    $args = wp_parse_args($args, [
        'type'  => 'page',
        'limit' => 10,
    ]);
    $out = [];
    $ids = [];
    // Check if we have a predefined list od IDs
    if ( ! empty($args['id'])) {
        $ids = array_filter(explode(',', $args['id']), function ($id) {
            return ! empty($id);
        });
        $ids = array_map('intval', $ids);
    }
    // If we don't have a predefined list od IDs, get the latest posts based on 'limit' parameter
    if (empty($ids)) {
        $queryArgs = [
            'post_type'              => isset($args['type']) && post_type_exists($args['type']) ? $args['type'] : 'page',
            'posts_per_page'         => ! empty($args['limit']) && is_numeric($args['limit']) ? intval($args['limit']) : 10,
            'ignore_sticky_posts'    => true,
            'fields'                 => 'ids',
            'cache_results'          => false,
            'update_post_meta_cache' => false,
            'update_post_term_cache' => false,
        ];
        $ids = get_posts($queryArgs);
        wp_reset_postdata();
    }
    foreach ($ids as $id) {
        $img = has_post_thumbnail($id)
            ? get_the_post_thumbnail($id, [60, 60])
            : '<span class="wpb-post-list__no-image"></span>';
        $excerpt = has_excerpt($id) ? wpautop(get_the_excerpt($id)) : '';
        $out[] = "<a href='" . get_the_permalink($id) . "' class='wpb-page-list__item'>
            <div>{$img}</div>
            <div>
                <div><h4>" . get_the_title($id) . "</h4></div>
                {$excerpt}
            </div>
        </a>";
    }
    return "<div class='wpb-page-list'>" . implode('', $out) . "</div>";
});

Nous recommandons d'ajouter ce code en utilisant WPCode, c'est le meilleur plugin d'extraits de code sur le marché.

WPCode rend sûr et facile l'ajout de code personnalisé dans WordPress sans modifier le fichier functions.php de votre thème.

Pour commencer, vous devez installer et activer le plugin gratuit WPCode. Si vous avez besoin d'aide, consultez notre tutoriel sur comment installer un plugin WordPress.

Une fois le plugin activé, allez dans Extraits de code » + Ajouter un extrait depuis votre tableau de bord WordPress.

Sur la page Ajouter un extrait, survolez votre souris sur l'option « Ajouter votre code personnalisé (Nouvel extrait) » et cliquez sur le bouton « Ajouter un extrait personnalisé ».

Ensuite, dans la fenêtre contextuelle qui apparaît à l'écran, sélectionnez « Extrait PHP » comme type de code.

À partir de là, vous devez ajouter un titre pour votre extrait, qui peut être n'importe quoi pour vous aider à vous souvenir de l'utilité du code.

Ensuite, collez le code ci-dessus dans la zone « Aperçu du code ».

Après cela, basculez simplement le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l'extrait » en haut de la page.

Cet extrait de code créera un shortcode que vous pourrez utiliser pour afficher votre liste de pages avec des miniatures n'importe où sur votre site.

Avant d'utiliser le shortcode, vous devrez ajouter le CSS suivant à votre site pour vous assurer que votre liste de pages s'affiche correctement.

Si vous ne l'avez jamais fait auparavant, consultez notre guide sur comment ajouter facilement du CSS personnalisé à votre site WordPress.

.wpb-page-list{
    display: block;
    margin: 10px 0 35px;
}
.wpb-page-list__item{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-column-gap: 16px;
    align-items: center;
    text-decoration: none;
    margin: 10px 0;
}
.wpb-page-list__item:hover h4{
    text-decoration: underline;
}
.wpb-post-list img,
.wpb-post-list__no-image{
    display: block;
    width: 60px;
    height: 60px;
}
.wpb-post-list__no-image{
    background: #aaa;
}
.wpb-page-list__item h4{
    font-size: 20px;
}
.wpb-page-list__item p {
    font-size: 1rem;
    color: #555;
}

Après cela, vous devez ajouter le shortcode suivant à WordPress pour ajouter votre liste de pages :

[pagelist]

Ce shortcode affichera une liste de pages contenant vos 10 dernières pages, par ordre de date de publication. Elle sera automatiquement mise à jour à mesure que de nouvelles pages seront ajoutées.

Si vous souhaitez limiter le nombre de pages à afficher, vous pouvez utiliser le shortcode ci-dessous :

[pagelist limit=3]

Remplacez simplement '3' par le nombre de pages que vous souhaitez afficher.

Pour ajouter le shortcode à WordPress, ouvrez la page que vous souhaitez modifier, puis cliquez sur le bouton d'ajout de bloc 'Plus'.

Après cela, recherchez le bloc 'Shortcode'.

Ensuite, cliquez sur le bloc 'Shortcode' pour l'ajouter à votre site et collez simplement le shortcode ci-dessus.

Une fois que vous avez terminé, assurez-vous de cliquer sur 'Enregistrer' ou 'Publier' pour sauvegarder vos modifications.

Après cela, vos visiteurs pourront voir votre liste de pages avec des miniatures.

Vous pouvez également utiliser le shortcode dans un widget pour afficher votre liste de pages dans votre barre latérale ou votre pied de page.

Afficher une liste de pages avec des pages de site spécifiques

Pour afficher une liste de pages avec seulement certaines pages, vous devrez ajouter le shortcode suivant à votre site :

[pagelist id="20, 10, 35"]

Ce shortcode affichera des pages spécifiques en fonction de leur ID. Pour plus de détails, consultez notre guide sur comment trouver les ID de page dans WordPress.

Afficher une liste de vos derniers articles de blog

Vous pouvez également utiliser le shortcode pour afficher une liste de vos derniers articles de blog. Cela peut être un excellent moyen d'augmenter le nombre de pages vues de vos articles de blog.

Ajoutez simplement le shortcode suivant à WordPress :

[pagelist type=post]

Voici à quoi ressemblera votre liste de vos derniers articles de blog pour vos lecteurs.

Afficher une liste de pages avec toutes les pages que vous avez publiées

Enfin, vous pouvez afficher une liste de pages avec des miniatures qui contient toutes les pages que vous avez publiées.

Cela peut être utile si vous souhaitez créer une page d'archive ou une page de sitemap HTML pour vos lecteurs. Les miniatures d'articles ajoutées la rendent plus attrayante qu'une simple liste de pages.

Vous devrez ajouter le shortcode suivant à votre site :

[pagelist limit="-1"]

Au fur et à mesure que vous publiez de nouvelles pages, votre liste de pages sera automatiquement mise à jour.

Méthode 2. Afficher une liste de pages avec des miniatures en utilisant l'éditeur de blocs WordPress

Une autre façon d'afficher une liste de pages dans WordPress est d'utiliser l'éditeur de blocs WordPress.

Remarque : Lorsque vous utilisez cette méthode, votre liste de pages devra être créée et mise à jour manuellement, car les nouvelles pages ne seront pas ajoutées automatiquement une fois publiées.

Pour ce faire, ouvrez la page que vous souhaitez modifier.

Ensuite, cliquez sur l'icône « Plus » pour ajouter un bloc et ouvrir le menu des blocs.

Après cela, recherchez « Colonnes » dans la barre de recherche.

Ensuite, sélectionnez le bloc « Colonnes ».

Cela affiche une liste de blocs de colonnes disponibles.

Sélectionnez le bloc de colonnes « 30/70 ». Nous utiliserons la colonne de gauche pour les miniatures et la colonne de droite pour le titre de la page et un bref résumé.

Ensuite, cliquez sur l'icône « Plus » pour ajouter un bloc.

Après cela, sélectionnez le bloc « Image » pour ajouter votre image mise en avant. Cela vous donne la possibilité de télécharger une nouvelle image ou d'en choisir une dans votre bibliothèque de médias.

Si vous souhaitez lier votre image, cliquez sur l'icône « Insérer un lien ».

Ensuite, ajoutez simplement l'URL de votre page.

Une fois que vous avez ajouté votre image, cliquez sur l'icône « Plus » pour ajouter un bloc dans la colonne de droite.

Ensuite, recherchez le bloc « Titre » et cliquez dessus pour l'ajouter à votre page.

Ensuite, entrez le titre de votre page et mettez-le en surbrillance.

Ensuite, cliquez sur l'icône « Lien » pour ajouter un lien vers la page.

Vous pouvez choisir que le lien s'ouvre dans la même page, ou dans un nouvel onglet, en activant ou désactivant le commutateur.

Si vous souhaitez ajouter du texte sous votre titre, cliquez simplement sur l'icône « Ajouter un bloc » à nouveau et sélectionnez le bloc « Paragraphe ».

Ensuite, tapez simplement dans la zone de texte disponible.

Pour ajouter d'autres éléments à votre liste en utilisant la mise en forme que vous venez de créer, cliquez sur le bloc de colonne et sélectionnez le menu « Options » à trois points.

Ensuite, sélectionnez l'option « Dupliquer » dans la liste déroulante.

Cela créera automatiquement une copie de la colonne.

Tout ce que vous avez à faire est de suivre les mêmes étapes que ci-dessus pour modifier l'image, le titre et le texte.

Une fois que vous avez terminé de modifier la liste de vos pages, assurez-vous de cliquer sur le bouton « Mettre à jour » ou « Publier » en haut de la page.

Désormais, vos visiteurs verront une liste de pages plus attrayante avec des miniatures de publications.

Remarque : Il existe un autre bloc appelé bloc « Liste de pages » qui vous permet d'ajouter une liste de pages sans miniatures.

Cependant, la méthode manuelle ci-dessus est le seul moyen d'ajouter une liste avec des miniatures en utilisant l'éditeur de blocs.

Si vous cherchez à créer des pages entièrement personnalisées qui incluent également une liste de pages avec des miniatures, vous pouvez utiliser le plugin SeedProd pour ce faire à l'aide d'un constructeur par glisser-déposer. Pour plus de détails, consultez notre guide sur comment créer une page personnalisée dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment afficher facilement une liste de pages avec des miniatures dans WordPress. Vous voudrez peut-être aussi consulter notre sélection d'experts des meilleurs constructeurs de thèmes WordPress et notre guide sur comment ajouter le défilement infini à votre site WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.