Comment ajouter des liens Suivant / Précédent dans WordPress (Guide ultime)

Avez-vous déjà lu un article de blog et souhaité un moyen simple de passer au suivant ?

C'est là que les liens suivant/précédent sont utiles. Ces liens de navigation simples maintiennent l'engagement des lecteurs en les guidant vers plus de contenu sur votre site sans qu'ils aient à le chercher.

Par défaut, WordPress inclut des liens vers les articles suivants et précédents, mais selon votre thème, ils peuvent ne pas être visibles ou stylisés comme vous le souhaitez.

Cependant, pas besoin de s'inquiéter, nous avons ce qu'il vous faut ! Après avoir testé différentes méthodes, nous avons trouvé quelques moyens fiables d'ajouter et de personnaliser ces liens.

Dans ce guide, nous vous montrerons comment ajouter facilement des liens suivant/précédent dans WordPress, que vous souhaitiez le faire avec un plugin ou un peu de code personnalisé.

Que sont les liens suivant / précédent dans WordPress ?

Les liens suivant et précédent sont des liens de navigation dynamiques intégrés aux thèmes WordPress. Ils permettent aux utilisateurs de se déplacer facilement entre les articles, les aidant à découvrir plus de contenu sans clics supplémentaires.

Par défaut, les articles de blog WordPress sont affichés dans un ordre chronologique inversé (les articles les plus récents d'abord).

Cela signifie que l'article suivant est celui publié après l'article actuel qu'un utilisateur consulte, et l'article précédent est celui qui a été publié avant l'article actuel.

Les liens suivant/précédent permettent aux utilisateurs de naviguer facilement entre les articles individuels et les pages d'archives de blog. Cela vous aide également à obtenir plus de vues de page sur votre blog.

La plupart des thèmes WordPress sont livrés avec des liens vers les articles suivants et précédents intégrés, qui s'affichent automatiquement en bas de chaque article. Cependant, certains thèmes ne les affichent pas, ou vous pouvez vouloir personnaliser où et comment ils apparaissent sur votre site WordPress.

Cela dit, examinons comment ajouter facilement des liens suivant et précédent dans WordPress. Vous pouvez suivre les liens ci-dessous pour accéder à la section de votre choix :

• Ajout de liens suivant / précédent à WordPress à l'aide d'un plugin (méthode la plus simple)
• Ajout de liens suivant / précédent à l'aide de code personnalisé
• Mise en forme des liens suivant / précédent dans WordPress
• Ajout de liens suivant / précédent pour les articles avec miniatures
• Ajout de liens suivant / précédent aux pages WordPress
• Bonus : Suppression des liens suivant et précédent dans WordPress

Ajout de liens suivant / précédent à WordPress à l'aide d'un plugin (méthode la plus simple)

Cette méthode est facile et recommandée pour les débutants qui ne sont pas à l'aise avec l'ajout de code à leur site web.

Tout d'abord, vous devez installer et activer le plugin CBX Next Previous Article. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, visitez la page Paramètres » CBX Suivant Précédent. À partir de là, vous pouvez choisir où vous souhaitez afficher les liens suivant et précédent sur votre site.

Le plugin vous permet d'afficher les flèches de lien Suivant et Précédent sur les articles uniques, les pages, les pages d'archives, et plus encore.

Pour ce faire, faites défiler jusqu'à la section « Paramètres d'affichage des archives » et sélectionnez « Oui » pour les zones où vous souhaitez afficher ces liens.

Pour rendre vos liens suivant et précédent plus pertinents, vous pouvez également choisir d'afficher les articles suivants et précédents de la même catégorie ou étiquette.

Maintenant, faites défiler jusqu'à la section « Paramètres d'affichage des articles uniques ». Vous verrez que les articles et les pages sont déjà sélectionnés comme types d'articles par défaut où vos flèches apparaîtront.

Si vous ne souhaitez afficher qu'une seule flèche pour l'article précédent ou suivant, sélectionnez simplement l'option « Précédent » ou « Suivant » dans le paramètre « Afficher l'article ».

Cependant, si vous souhaitez afficher les deux flèches, choisissez l'option « Oui » dans le paramètre « Afficher les deux flèches ».

La version gratuite du plugin vous permet uniquement d'afficher des flèches pour les articles suivants et précédents. Vous pouvez passer à la version pro pour débloquer d'autres options d'affichage, telles que les pop-ups qui apparaissent en glissant.

Après cela, vous pouvez sélectionner un style de flèche dans le menu déroulant de la section « Paramètres de style des flèches ».

Une fois que vous aurez fait cela, vous verrez un aperçu des flèches ci-dessous. Ensuite, cliquez sur le bouton « Enregistrer les paramètres ».

Si vous choisissez d'afficher les articles suivants/précédents de la même taxonomie, vous devrez passer à l'onglet Naviguer par taxonomie.

À partir de là, choisissez la taxonomie que vous souhaitez utiliser pour sélectionner les liens suivant et précédent. Ensuite, cliquez simplement sur le bouton « Enregistrer les paramètres ».

Facultativement, le plugin vous permet également de suivre les clics à l'aide de Google Analytics. Pour utiliser cette fonctionnalité, vous devrez d'abord installer Google Analytics dans WordPress.

Après cela, passez à l'onglet Google Analytics dans les paramètres du plugin et activez les options de suivi des clics.

Vous pouvez ensuite laisser le reste des paramètres tels quels ou les configurer selon vos préférences. Une fois que vous avez terminé, cliquez simplement sur le bouton « Enregistrer les paramètres » pour enregistrer vos modifications.

Vous pouvez maintenant visiter votre site Web WordPress pour voir les liens suivant/précédent en action.

Cette méthode est plus simple, mais elle ne vous offre pas beaucoup de flexibilité. Par exemple, la version gratuite du plugin n'affiche pas le titre de l'article suivant ou précédent.

Ajout de liens suivant / précédent à l'aide de code personnalisé

Si vous recherchez une méthode plus flexible et personnalisable pour ajouter des liens de navigation, alors cette méthode est faite pour vous. Pour ajouter les liens suivant/précédent, vous devrez modifier les fichiers de votre thème WordPress.

Cela peut être très risqué, car la moindre erreur peut rendre votre site inaccessible.

C'est là qu'WPCode intervient. C'est le meilleur plugin d'extraits de code WordPress car il vous permet d'ajouter en toute sécurité du code personnalisé sans risquer de casser votre site web.

Pour plus de détails, consultez notre avis sur WPCode.

Tout d'abord, vous devez installer et activer le plugin WPCode. Pour plus de détails, consultez notre tutoriel sur la façon d'installer un plugin WordPress.

Après l'activation, visitez la page Extraits de code » +Ajouter un extrait depuis le tableau de bord WordPress. Ici, cliquez sur le bouton « + Ajouter un extrait personnalisé » sous l'option « Ajouter votre code personnalisé (Nouvel extrait) ».

Cela vous dirigera vers la page « Créer un extrait personnalisé », où vous pourrez commencer par ajouter un titre à votre code.

Ensuite, choisissez « Extrait PHP » comme type de code dans le menu déroulant à droite.

Ensuite, ajoutez le code personnalisé suivant dans la zone « Aperçu du code » :

<?php the_post_navigation(); ?> 

Après cela, faites défiler jusqu'à la section « Insertion » et choisissez le mode « Insertion automatique ».

Votre code sera automatiquement exécuté sur votre site après activation.

Ensuite, ouvrez le menu déroulant « Emplacement » et basculez vers l'onglet « Spécifique à la page ».

Ensuite, choisissez « Insérer après l'article » comme emplacement de votre code. Vos liens d'article précédent/suivant seront maintenant affichés à la fin de chaque article.

Cependant, si vous avez une autre position en tête, vous pouvez sélectionner cette option.

Enfin, faites défiler vers le haut et basculez le commutateur « Inactif » sur « Actif ».

Ensuite, cliquez sur le bouton « Enregistrer l'extrait » pour sauvegarder vos modifications.

Vous pouvez maintenant visiter votre site WordPress pour voir les liens Suivant / Précédent en action.

Ici, vous remarquerez que le code personnalisé que vous avez ajouté n'affiche que les liens vers les articles suivants et précédents avec le titre de l'article comme texte d'ancre.

Il ne met pas en évidence qu'il s'agit des liens vers les articles suivants et précédents.

Si vous souhaitez modifier cela, vous pouvez ajouter le code personnalisé suivant dans la boîte « Aperçu du code » à la place :

<?php the_post_navigation( array(
 'prev_text'  => __( 'Previous Article: %title' ),
 'next_text'  => __( 'Next Article: %title' ),
 ) );
?>

Une fois que vous avez enregistré vos modifications dans WPCode, visitez simplement votre site web.

Voici à quoi cela ressemblait sur notre site de test :

Vous pouvez également utiliser des caractères spéciaux et des flèches avec les titres des articles suivants et précédents.

Remplacez simplement le code par le suivant :

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 ) );
?>

Voici à quoi ressemblait ce code sur notre site Web de test :

Maintenant, disons que vous souhaitez rendre les liens suivant et précédent plus pertinents par rapport à l'article que l'utilisateur consulte actuellement.

Vous pouvez le faire en affichant les liens suivant et précédent de la même catégorie ou des mêmes balises :

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 'in_same_term' => true, 
 'taxonomy'	=> __( 'category' ),
 ) );
?>

Ce code indique à WordPress d'afficher les articles suivants et précédents de la même catégorie. Vous pouvez modifier le paramètre taxonomy pour utiliser les balises ou toute autre taxonomie personnalisée si nécessaire.

Mise en forme des liens suivant / précédent dans WordPress

Maintenant que nous avons appris à ajouter des liens Suivant / Précédent dans WordPress, examinons comment les styliser correctement.

Par défaut, WordPress ajoute automatiquement plusieurs classes CSS par défaut aux liens de navigation des articles. Vous pouvez utiliser ces classes CSS dans WPCode pour styliser ces liens.

Tout d'abord, accédez à la page Extraits de code » Ajouter un extrait depuis la barre latérale d'administration de WordPress. Ensuite, cliquez sur le bouton « + Ajouter un extrait personnalisé » sous l'option « Ajoutez votre code personnalisé (Nouvel extrait) ».

Une fois sur la page « Créer un extrait personnalisé », ajoutez un titre pour votre code.

Ensuite, choisissez « Extrait CSS » comme type de code dans le menu déroulant.

Après cela, vous pouvez ajouter le code CSS suivant dans votre boîte « Aperçu du code ».

Ce CSS de base affiche simplement les liens suivant et précédent côte à côte, mais sur les côtés opposés de la même ligne :

.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

Vous pouvez également faire ressortir vos liens de navigation en ajoutant une couleur de fond, un effet de survol, et plus encore.

Voici un exemple de code CSS que vous pouvez utiliser comme point de départ :

.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}

Maintenant, faites défiler vers le bas jusqu'à la section « Insertion » et choisissez le mode « Insertion automatique ».

Votre code personnalisé sera automatiquement exécuté lors de l'activation.

Allez-y et basculez le commutateur « Inactif » sur « Actif ».

Après cela, cliquez sur le bouton « Enregistrer le fragment » pour stocker vos paramètres.

Visitez maintenant votre site WordPress pour voir les liens stylisés de vos articles.

Vous remarquerez que le texte du lien a maintenant une couleur de fond et un effet de survol pour rendre les liens suivant et précédent plus visibles.

Ajout de liens suivant / précédent pour les articles avec miniatures

Si vous souhaitez rendre vos liens suivant/précédent plus visibles, vous pouvez afficher des miniatures de publication avec les liens. Les images sont le moyen le plus simple d'attirer l'attention de l'utilisateur et de rendre ces liens plus attrayants.

Pour ce faire, vous pourriez ajouter du code personnalisé à votre fichier functions.php, mais gardez à l'esprit que la moindre erreur peut casser votre site Web. C'est pourquoi nous vous recommandons d'utiliser WPCode pour cela également à la place.

Après l'activation du plugin, accédez à la page Extraits de code » +Ajouter un extrait et cliquez sur le bouton « + Ajouter un extrait personnalisé » sous l'option « Ajouter votre code personnalisé (Nouvel extrait) ».

Une fois que vous êtes sur la page « Créer un extrait personnalisé », vous devez ajouter un titre à votre code.

Ensuite, choisissez « Extrait PHP » comme type de code dans le menu déroulant à droite.

Après cela, ajoutez le code personnalisé suivant dans la zone « Aperçu du code » :

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

Ce code crée simplement une fonction qui affiche les articles suivants et précédents avec des images mises en avant ou des miniatures d'articles.

Une fois que vous avez entré l'extrait, vous pouvez activer le commutateur sur « Actif » et cliquer sur le bouton « Enregistrer l'extrait ».

Ensuite, vous devez revenir à la page Extraits de code » + Ajouter un extrait et cliquer sur le bouton « Utiliser l'extrait » sous l'option « Ajouter votre code personnalisé ».

Une fois la page « Créer un extrait personnalisé » ouverte, copiez le code suivant et collez-le dans la boîte « Aperçu du code » :

<?php wpb_posts_nav(); ?>

Ce code détermine où vous souhaitez afficher les liens.

Assurez-vous de sélectionner « Extrait PHP » dans le menu déroulant « Type de code », également.

Ensuite, faites défiler vers le bas jusqu'à la section « Insertion » et choisissez le mode « Insertion automatique » pour l'exécution automatique du code.

Vous pouvez également développer la section « Emplacement » et passer à l’onglet « Spécifique à la page ». À partir de là, sélectionnez l’option « Insérer après l’article » afin que les miniatures apparaissent correctement à côté des liens.

Enfin, vous pouvez activer le bouton « Actif » et cliquer sur le bouton « Enregistrer le snippet ».

Vous pouvez maintenant visiter votre site Web pour voir les liens en action.

Vous remarquerez peut-être que ces liens ne sont pas très esthétiques.

Vous pouvez y remédier en ajoutant du CSS personnalisé avec WPCode pour les styliser.

.wpb-posts-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 100px auto;
}
 
.wpb-posts-nav a {
    display: grid;
    grid-gap: 20px;
    align-items: center;
}
 
.wpb-posts-nav h4,
.wpb-posts-nav strong {
    margin: 0;
}
 
.wpb-posts-nav a svg {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}
 
.wpb-posts-nav > div:nth-child(1) a {
    grid-template-columns: 100px 1fr;
    text-align: left;
}
 
.wpb-posts-nav > div:nth-child(2) a {
    grid-template-columns: 1fr 100px;
    text-align: right;
}
 
.wpb-posts-nav__thumbnail {
    display: block;
    margin: 0;
}
 
.wpb-posts-nav__thumbnail img {
    border-radius: 10px;
}

Vous pouvez maintenant enregistrer vos modifications et visiter votre site Web pour afficher les liens suivant et précédent avec des miniatures.

Voici à quoi cela ressemblait sur notre site de test :

Pour plus de détails, consultez notre guide sur comment ajouter des miniatures aux liens d’articles précédents et suivants dans WordPress.

Ajout de liens suivant / précédent aux pages WordPress

Normalement, les liens de navigation d’articles sont utilisés pour les articles de blog dans WordPress. C’est parce que ces éléments sont publiés dans un ordre chronologique inverse.

D’autre part, les pages WordPress ne sont généralement pas publiées dans un ordre chronologique. Pour plus de détails, consultez notre guide sur la différence entre les articles et les pages dans WordPress.

Cependant, certains utilisateurs peuvent vouloir afficher la navigation de page pour aider les visiteurs à trouver facilement la page suivante. La bonne nouvelle est que le code que nous avons utilisé précédemment avec WPCode affiche les liens précédent et suivant pour les pages.

Si vous souhaitez afficher ces liens sur les pages et les articles, vous n’aurez pas besoin d’apporter de modifications supplémentaires.

Cependant, si vous souhaitez uniquement afficher les liens précédent/suivant pour les pages, rendez-vous sur la page Extraits de code » + Ajouter un extrait .

Ici, sélectionnez l'option « Ajouter votre code personnalisé (Nouvel extrait) ».

Une fois sur la page « Créer un extrait personnalisé », ajoutez un titre pour votre extrait.

Ensuite, choisissez « Extrait PHP » comme type de code dans le menu déroulant.

Ensuite, ajoutez le code personnalisé suivant dans la boîte « Aperçu du code ».

C'est le même code que vous pouvez utiliser pour ajouter des liens précédent/suivant pour les articles :

<?php the_post_navigation( array(
  'prev_text'   => __( '← %title' ),
  'next_text'   => __( '%title →' ),
   ) );
?>

Après cela, faites défiler jusqu'à la section « Insertion » et choisissez le mode « Insertion automatique » pour une exécution automatique du code.

Vous pouvez également configurer la position de vos liens à partir du menu déroulant « Emplacement ». Par exemple, si vous choisissez « Insérer après l'article », vos liens apparaîtront à la fin de chaque page.

Si vous avez une autre position en tête, sélectionnez simplement l'option appropriée dans le menu déroulant.

Ensuite, faites défiler jusqu'à la section « Logique conditionnelle intelligente » et activez le commutateur « Activer la logique ».

Après cela, choisissez « Afficher » dans le menu déroulant « Conditions » et cliquez sur le bouton « + Ajouter un nouveau groupe ».

Cela ouvrira de nouveaux paramètres où vous devrez définir les conditions d'apparition de l'extrait de code.

Puisque nous voulons afficher les liens précédent/suivant uniquement sur les pages, ouvrez le premier menu déroulant et basculez vers l'onglet « Où (page) » dans la colonne de gauche.

Ensuite, sélectionnez « Type d'article » parmi les options, choisissez « Est » dans le menu déroulant du milieu, et sélectionnez « Pages » dans le menu déroulant final.

Enfin, faites défiler vers le haut et basculez le commutateur « Inactif » sur « Actif » et cliquez sur le bouton « Enregistrer l'extrait » . Vous avez maintenant ajouté avec succès les liens précédent/suivant à vos pages.

Voici à quoi cela ressemblait sur notre site de démonstration :

Bonus : Suppression des liens suivant et précédent dans WordPress

Certains utilisateurs peuvent vouloir supprimer les liens suivant et précédent dans WordPress.

Par exemple, certains utilisateurs peuvent trouver que ces liens sont moins utiles. Certains pourraient vouloir afficher des articles similaires ou des articles populaires à la place.

Il existe deux méthodes pour supprimer les liens suivant et précédent dans WordPress.

Méthode 1. Supprimer le code dans votre thème WordPress

Pour supprimer les liens suivant et précédent dans WordPress, vous devrez supprimer le code responsable de l'affichage de ces liens dans votre thème WordPress.

Le problème avec cette approche est qu'à chaque mise à jour de votre thème, le code supprimé réapparaîtra s'il faisait partie du thème d'origine.

Pour éviter cela, vous devrez créer un thème enfant.

Ensuite, vous devez trouver le code responsable de l'affichage des liens suivant et précédent dans votre thème parent.

Généralement, il se trouve dans les modèles single.php ou content-single.php.

En gros, vous rechercherez le code qui inclut la fonction suivante :

<?php the_post_navigation() ?> 

Ce code peut avoir un format et des paramètres légèrement différents.

Par exemple, sur notre site de test, le thème a utilisé ce code pour afficher les liens :

the_post_navigation(
				array(
					'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
					'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
				)
			);

Si vous utilisez un thème enfant, vous devez dupliquer ce modèle particulier dans votre thème enfant, puis supprimer les lignes utilisées pour afficher les liens suivant ou précédent.

Si vous préférez simplement le supprimer dans votre thème parent, vous pouvez le faire aussi.

La suppression du code empêchera WordPress d'afficher les liens suivant et précédent.

Méthode 2. Masquer les liens des articles suivants et précédents

Cette méthode ne supprime pas réellement les liens suivant et précédent. Au lieu de cela, elle les rend simplement invisibles aux lecteurs humains.

Ajoutez simplement le CSS personnalisé suivant à votre thème WordPress :

nav.navigation.post-navigation {
    display: none;
}

N'oubliez pas de sauvegarder vos modifications.

Ensuite, visitez votre site Web pour voir les liens de navigation disparaître.

Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement des liens suivant et précédent dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment utiliser les blocs de modèles WordPress et notre liste de conseils essentiels pour utiliser les shortcodes dans 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.