Comment ajouter des miniatures aux liens des articles précédents et suivants dans WordPress

Après tout ce travail sur un article de blog WordPress, voir les lecteurs partir après une seule page est frustrant.

Une des raisons principales ? Les liens de navigation en texte brut au bas de vos articles passent à peine inaperçus.

L'ajout d'images miniatures à ces liens de navigation peut vous aider à attirer l'attention. Les lecteurs peuvent voir instantanément ce qui arrive ensuite, ce qui les rend beaucoup plus susceptibles de rester et d'explorer votre contenu.

Nous avons testé de nombreuses méthodes et avons constaté que WPCode est le meilleur outil pour cette tâche. Il vous permet d'ajouter des extraits de code personnalisés en toute sécurité sans toucher aux fichiers de votre thème.

Dans ce guide, nous vous montrerons exactement comment ajouter des miniatures à vos liens d'articles précédents et suivants dans WordPress. C'est plus facile que vous ne le pensez ! 💡

Pourquoi afficher des miniatures avec les liens des articles précédents et suivants ?

Les miniatures rendent instantanément vos liens de navigation plus attrayants et cliquables. Elles peuvent encourager les lecteurs à continuer à explorer votre site, augmentant potentiellement le nombre de pages vues et le temps passé sur le site.

Votre blog WordPress offre des fonctionnalités utiles pour aider les visiteurs à trouver du nouveau contenu et à naviguer sur votre site.

Ces fonctionnalités incluent :

• Menus de navigation
• Une barre de recherche, et
• Un widget d'archives d'articles.

Une autre fonctionnalité de navigation utile se trouve en bas de chaque article de blog. Vous y trouverez des liens vers les articles précédents et suivants de votre site.

Ces liens favorisent l'engagement des utilisateurs car lorsque les visiteurs ont fini de lire un article de blog, ils pourraient chercher autre chose à lire. Cependant, si vous ajoutez des miniatures, les liens auront l'air plus interactifs.

C'est aussi un excellent moyen d'attirer l'attention sur vos articles de blog les plus populaires ou les plus performants.

Par exemple, vous pourriez avoir du contenu pilier qui génère déjà beaucoup de trafic et convertit ces lecteurs en abonnés à votre liste d'e-mails. L'ajout de miniatures avec des liens vers les articles ne ferait qu'aider à constituer votre liste d'e-mails et à développer votre petite entreprise.

Dans cet esprit, nous allons vous montrer comment ajouter des miniatures aux liens des articles précédents et suivants dans WordPress. Voici tous les sujets que nous aborderons dans cet article :

Commençons !

Utiliser des miniatures avec les liens des articles précédents et suivants dans WordPress

Pour ajouter des miniatures à vos liens d'articles précédents et suivants, vous devrez ajouter du code aux fichiers de votre thème WordPress.

Nous vous recommandons d'utiliser WPCode, le meilleur plugin d'extraits de code pour WordPress. Il vous permet d'ajouter du code sans casser votre site et est livré avec de nombreux modèles prêts à l'emploi, vous n'avez donc pas à écrire de code à partir de zéro.

Sur nos sites Web, nous utilisons WPCode pour créer et gérer des extraits de code personnalisés. Cela a très bien fonctionné pour nous, et vous pouvez consulter notre évaluation complète de WPCode pour explorer ses fonctionnalités.

Si vous n'avez jamais fait cela auparavant, consultez notre guide sur comment copier et coller du code dans WordPress.

Pour commencer, vous devrez installer et activer le plugin WPCode. Depuis votre espace d'administration WordPress, allez dans Plugins » Ajouter un plugin.

Sur l'écran suivant, utilisez la boîte de recherche pour trouver rapidement le plugin WPCode.

Cliquez sur « Installer maintenant » dans le résultat de la recherche, puis sur « Activer ».

Si vous avez besoin d'aide, vous pouvez consulter notre article sur comment installer un plugin WordPress.

Après l'activation, allez dans Extraits de code » + Ajouter un extrait depuis votre tableau de bord WordPress.

Vous serez redirigé vers une bibliothèque d'extraits de code, où vous pourrez choisir parmi une grande variété de modèles prédéfinis.

Pour ajouter des miniatures aux liens des articles précédents et suivants, nous allons télécharger une chaîne de code personnalisé.

Alors, cliquons sur « + Ajouter un extrait personnalisé » sous « Ajouter votre code personnalisé (Nouvel extrait) ».

Dans la fenêtre contextuelle qui apparaît, vous sélectionnerez le type de code.

Ici, vous voudrez choisir « Extrait de PHP », qui est un petit morceau de code utilisé pour étendre les fonctionnalités de WordPress.

La prochaine étape consiste à donner un nom à l'extrait de code afin que vous puissiez y revenir plus tard.

Ensuite, copiez simplement le code suivant dans l'éditeur de texte WPCode :

function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
     
    if ( $next_post || $prev_post ) : ?>
     
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
     
    <?php endif;
}

Voici à quoi cela pourrait ressembler sur votre écran :

Avant d'activer, faites défiler vers le bas jusqu'à la section « Insertion » pour vérifier les paramètres.

Ici, assurez-vous que la « Méthode d'insertion » est définie sur « Insertion automatique » et que la « Localisation » est « Exécuter partout ».

Ensuite, vous pouvez remonter et basculer le bouton de « Inactif » à « Actif ».

N'oubliez pas de cliquer sur le bouton « Enregistrer le snippet » ou « Mettre à jour » pour activer votre nouvelle fonction.

Maintenant que la fonction est créée, nous devons créer un deuxième snippet pour indiquer à WordPress exactement où l'afficher sur la page. En divisant cela en deux snippets, nous créons d'abord la fonctionnalité en toute sécurité, puis nous la plaçons facilement sans surcharger votre site ou casser votre mise en page.

Revenons à la page Snippets de code » + Ajouter un snippet.

Encore une fois, sous l'option « Ajouter votre code personnalisé (Nouveau snippet) », cliquez sur « + Ajouter un snippet personnalisé ».

Dans la fenêtre contextuelle qui apparaît, WPCode vous demandera le type de votre code.

Vous pouvez sélectionner « Snippet PHP ».

Cela ouvrira le même éditeur de texte qu'auparavant.

Donnez un nom descriptif à votre nouveau fragment de code personnalisé afin de pouvoir y revenir facilement plus tard.

Maintenant, vous pouvez copier et coller le code suivant dans l'éditeur de texte WPCode. Ce code indique à WordPress où afficher la navigation avec l'image mise en avant.

wpb_posts_nav();

Voici à quoi cela pourrait ressembler sur votre écran :

Une fois cela fait, faites défiler vers le bas jusqu'à la section « Insertion » et cliquez sur le menu déroulant à côté de « Emplacement ».

À partir de là, allez dans « Spécifique à la page » et choisissez « Insérer après l'article ». De cette façon, les miniatures apparaîtront correctement à côté des liens.

Enfin, vous pouvez activer le bouton « Actif » et cliquer sur « Enregistrer le fragment » (ou « Mettre à jour »).

Après avoir enregistré vos modifications, vous pouvez utiliser cette fonction dans le modèle où vous souhaitez afficher les liens des articles précédents et suivants avec des miniatures.

Étant donné que vous avez défini l'emplacement sur « Insérer après l'article », WPCode s'occupera automatiquement du placement pour vous. Il n'est pas nécessaire de modifier les fichiers de votre thème.

Et voilà – vous avez ajouté et configuré vos miniatures d'articles précédents et suivants !

Maintenant, lorsque vous consultez un article sur votre site Web, vous verrez que les liens précédent et suivant en bas de l'article ont maintenant des miniatures.

Alternative : Afficher les articles populaires avec des miniatures

Une autre façon d'engager vos lecteurs après qu'ils aient lu un article est d'afficher une liste d'articles populaires après chaque article. Cela permettra à vos lecteurs de voir votre meilleur contenu plutôt que simplement les articles publiés précédemment et suivants.

Vos articles populaires contiennent votre contenu le plus réussi. Les afficher à vos visiteurs aidera à augmenter vos pages vues et à stimuler l'engagement des utilisateurs.

Bien que les liens précédent et suivant soient parfaits pour une lecture chronologique, un outil comme MonsterInsights vous permet de mettre automatiquement en avant votre contenu le plus performant et celui qui génère le plus de conversions afin de maintenir l'engagement des lecteurs.

Chez WPBeginner, nous utilisons MonsterInsights pour surveiller de près les performances de notre site Web. Vous pouvez consulter notre test complet de MonsterInsights et découvrir pourquoi c'est notre outil de prédilection pour prendre des décisions basées sur les données.

Le widget d'articles populaires de MonsterInsights offre une large gamme de thèmes attrayants et de nombreuses options de personnalisation.

Vous pouvez découvrir la facilité avec laquelle vous pouvez configurer cela dans notre guide sur comment afficher les articles par nombre de vues dans WordPress.

Ou vous pouvez consulter notre guide sur comment ajouter des widgets personnalisés après les articles dans WordPress, où vous pourrez apprendre à ajouter différents types de contenu à la fin de chaque article de blog.

Questions fréquemment posées sur les miniatures de navigation d'articles

Vous avez des questions sur l'ajout de miniatures à la navigation de vos articles ? Voici certaines des choses que les lecteurs demandent souvent avant de commencer.

Liens bonus pour l'utilisation d'images et d'autres fichiers multimédias dans WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment utiliser des miniatures avec les liens vers les articles précédents et suivants dans WordPress.

Ensuite, vous pourriez également vouloir apprendre :

• Comment recadrer et modifier les miniatures d'articles WordPress
• Comment ajouter des miniatures vidéo en vedette dans WordPress
• Texte alternatif d'image vs titre d'image dans WordPress
• Comment résoudre le problème de l'image mise en avant qui ne s'affiche pas dans WordPress
• Comment optimiser les images pour les performances web sans perdre en qualité

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.