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 ?

En bref, les miniatures rendent instantanément vos liens de navigation plus attrayants et cliquables. Ils peuvent encourager les lecteurs à continuer à explorer votre 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 performants ou les articles de blog populaires.

Par exemple, vous pourriez avoir du contenu pilier qui génère déjà beaucoup de trafic et convertit ces lecteurs en abonnés par e-mail. L'ajout de miniatures avec des liens d'articles vous aiderait uniquement à créer 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 :

• Using Thumbnails with Previous and Next Post Links in WordPress
• Alternative : Afficher les articles populaires avec des miniatures
• Questions fréquemment posées sur les miniatures de navigation d'articles
• Liens bonus : Utiliser des images et d'autres fichiers multimédias dans WordPress

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. Si vous ne l'avez jamais fait auparavant, consultez notre guide sur comment copier et coller du code dans WordPress.

Ajout de code à l'aide de WPCode

La première étape consiste à ajouter l'extrait de code suivant à l'aide de WPCode, le meilleur plugin d'extraits de code. 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 les sites de nos marques partenaires, 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 avis complet sur WPCode pour explorer ses fonctionnalités.

Pour commencer, vous devrez installer et activer le plugin WPCode. Si vous avez besoin d'aide, vous pouvez consulter notre article sur comment installer un plugin WordPress.

Après l'activation, accédez à la page Extraits de code » + Ajouter un extrait depuis votre tableau de bord WordPress.

Ensuite, cliquez sur le bouton « Ajouter ».

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 « Utiliser l'extrait » 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 PHP ».

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;
}

Une fois que vous avez entré l'extrait, vous pouvez basculer le bouton de « Inactif » à « Actif ».

Cela devrait ressembler à ceci.

Cela permettra au code de fonctionner.

Ensuite, vous pouvez simplement cliquer sur le bouton « Mettre à jour ».

Maintenant, nous devons retourner à la page Extraits de code » + Ajouter un extrait.

Encore une fois, sous l'option « Ajouter votre code personnalisé (Nouvel extrait) », vous sélectionnerez « Utiliser l'extrait ».

Assurez-vous de sélectionner « Extrait PHP » dans la fenêtre contextuelle qui apparaît.

Après cela, vous pouvez lui donner un nom descriptif afin de pouvoir y revenir facilement plus tard.

Maintenant, vous pouvez copier le code suivant et le coller dans l'éditeur de texte WPCode.

wpb_posts_nav();

Ce code indique à WordPress où afficher la navigation avec l'image mise en avant.

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 « Actif » et cliquer sur « 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.

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 renforcera la confiance, améliorera la preuve sociale et garantira que vos visiteurs restent plus longtemps sur votre site Web.

Lorsque vous consultez la première méthode de notre guide sur comment afficher les articles par vues dans WordPress, vous découvrirez à quel point il est facile d'ajouter des articles populaires à l'aide du plugin MonsterInsights.

Chez WPBeginner, nous utilisons MonsterInsights pour surveiller de près les performances de notre site Web. Vous pouvez consulter notre critique complète 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.

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.

Puis-je modifier la taille des miniatures ?

Absolument ! Dans le premier extrait de code, recherchez les lignes contenant [ 100, 100 ]. Ces nombres représentent la largeur et la hauteur en pixels. Remplacez-les simplement par les dimensions qui conviennent le mieux au design de votre thème.

L'ajout de miniatures avec du code ralentira-t-il mon site web ?

Pas du tout. Le code est léger et conçu dans un souci de performance, vous ne devriez donc pas remarquer de ralentissement. De plus, WPCode s'assure que l'extrait ne se charge que sur les pages d'articles uniques où il est nécessaire.

Que se passe-t-il si un article n'a pas d'image mise en avant ?

Pas de souci. Si un article lié n'a pas d'image mise en avant, le code affichera simplement le lien texte à la place. Cela dit, définir une image mise en avant pour chaque article aide à garder votre site soigné et cohérent.

Est-il préférable d'afficher les liens précédent/suivant ou une section d'articles populaires ?

Cela dépend de votre objectif. Les liens précédent et suivant sont parfaits pour guider les lecteurs à travers le contenu connexe dans l'ordre.

Mais si vous souhaitez que les internautes continuent à parcourir vos articles les plus lus, une section articles populaires (en utilisant un outil comme MonsterInsights) peut faire des merveilles.

Liens bonus : Utiliser des images et d'autres fichiers multimédias dans WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment utiliser les miniatures avec les liens des 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 une image d'arrière-plan dans WordPress
• Comment ajouter des miniatures vidéo en vedette dans WordPress
• Comment ajouter un widget de lecteur de musique audio dans WordPress
• Comment ajouter l'indexation et la recherche de PDF 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 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.