Souhaitez-vous ajouter des liens vers les pages suivantes et précédentes dans WordPress ?
Les liens « Suivant » et « Précédent » sont des liens dynamiques qui permettent aux utilisateurs/utilisatrices de voir la publication suivante ou précédente.
Dans cet article, nous vous afficherons comment ajouter facilement des liens suivant/précédent dans WordPress et comment en tirer le meilleur parti.
Que sont les liens suivants et précédents dans WordPress ?
Les liens Suivant / Précédent sont des liens dynamiques ajoutés par un thème WordPress qui permettent aux utilisateurs/utilisatrices de naviguer facilement vers la publication suivante ou précédente. Cela peut aider à augmenter le nombre de pages vues et à réduire votre taux de rebond.
Par défaut, les articles d’un blog WordPress s’affichent dans un ordre chronologique inverse (les articles les plus récents en premier).
Cela signifie que la publication suivante est celle qui a été publiée après la publication actuelle vue par un compte, et que la publication précédente est celle qui a été publiée avant la publication actuelle.
Les liens suivant/précédent permettent aux utilisateurs/utilisatrices de naviguer facilement entre les différents articles et les pages d’archives du blog. Ils vous aident également à augmenter le nombre de pages vues sur votre blog.
La plupart des thèmes WordPress sont dotés de liens intégrés vers les publications suivantes et précédentes, qui s’affichent automatiquement au bas de chaque publication. Cependant, certains thèmes ne les affichent pas, ou vous pouvez personnaliser l’endroit et la manière dont ils apparaissent sur votre site WordPress.
Ceci étant dit, voyons comment ajouter facilement des liens suivants et précédents dans WordPress.
Voici la liste des sujets abordés dans cet article.
- Ajout de liens suivants / précédents sur WordPress à l’aide d’une extension
- Ajouter des liens suivants / précédents à un thème WordPress
- Styliser les liens suivants / précédents dans WordPress
- Ajout de liens suivants / précédents à des pages
- Ajout de liens suivants / précédents avec des miniatures
- Retirer les liens suivants / précédents dans WordPress
Ajouter les liens suivants et précédents sur WordPress à l’aide d’une extension
Cette méthode est plus facile et recommandée pour les débutants qui ne sont pas à l’aise avec l’ajout de code à leurs sites.
Tout d’abord, vous devez installer et activer l’extension CBX Next Previous Article. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Une fois activé, vous devez vous rendre sur la page Réglages » CBX Suivant Précédent. À partir de là, vous pouvez choisir où vous souhaitez afficher les liens suivants et précédents sur votre site.
L’extension vous permet d’afficher les flèches des liens suivants et précédents sur les publications uniques, les pages, les pages d’archives, etc.
Pour rendre vos liens suivants et précédents plus pertinents, vous pouvez également choisir d’afficher les publications suivantes et précédentes de la même catégorie ou du même identifiant.
La version gratuite de l’extension vous permet uniquement d’afficher des flèches pour les articles suivants et précédents. Vous pouvez passer à la version pro pour déverrouiller d’autres options d’affichage comme la fenêtre surgissante diapositive.
Si vous choisissez d’afficher les publications suivantes et précédentes d’une même taxonomie, vous devez passer à l’onglet Naviguer par taxonomie.
À partir de là, vous devez choisir la taxonomie que vous souhaitez utiliser pour sélectionner les liens suivants et précédents.
Facultativement, l’extension vous permet également de suivre les clics à l’aide de Google Analytics. Pour utiliser cette fonctionnalité, vous devez d’abord installer Google Analytics sur WordPress.
Après cela, passez à l’onglet Google Analytics dans les Réglages du plugin et activez les options de suivi des clics.
Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton Enregistrer les Réglages pour stocker vos modifications.
Vous pouvez maintenant visiter votre site WordPress pour voir les liens suivant/précédent en action.
Cette méthode est plus simple, mais elle n’offre pas beaucoup de flexibilité. Par exemple, la version gratuite n’affiche pas le titre de la publication suivante ou précédente.
Si vous avez besoin de plus de flexibilité, continuez à lire.
Ajout de liens vers les pages suivantes et précédentes dans un thème WordPress
Pour cette méthode, vous devrez modifier les fichiers de votre thème WordPress. Si vous n’avez jamais fait cela auparavant, alors jetez un œil à notre guide sur la façon de copier et coller du code dans WordPress.
Ensuite, vous devrez vous connecter à votre site WordPress à l’aide d’un client FTP ou en utilisant l’application Gestionnaire de fichiers dans le panneau de contrôle de votre hébergeur WordPress.
Une fois connecté, vous devez naviguer jusqu’au dossier /wp-content/themes/votre-thème-courant/.
Vous devez maintenant localiser le fichier single.php. Il s’agit du fichier responsable de l’affichage des articles de publication unique sur votre site.
Certains thèmes WordPress peuvent faire référence à d’autres fichiers à l’intérieur du fichier single.php. Ces fichiers sont appelés éléments de modèle et sont situés dans le dossier template-parts de votre thème WordPress.
Pour plus de détails, consultez notre article sur les fichiers à modifier dans le thème WordPress.
Ensuite, il suffit de copier et de coller le code suivant à l’Emplacement du fichier de modèle où vous souhaitez afficher les liens suivants et précédents.
<?php the_post_navigation(); ?>
Vous pouvez maintenant enregistrer vos modifications et visiter votre site pour voir les liens suivants/précédents en action.
Le marqueur de modèle ci-dessus affichera simplement le lien vers les publications suivantes et précédentes avec le titre de la publication comme texte d’ancrage. Il n’est pas précisé qu’il s’agit des liens vers les articles suivants et précédents.
Modifions un peu la situation et fournissons aux utilisateurs/utilisatrices un peu de contexte à propos de ces liens. Pour ce faire, nous allons ajouter les paramètres disponibles pour le marqueur de modèle the_post_navigation.
Il suffit de remplacer le code ci-dessus par le suivant :
<?php the_post_navigation( array(
'prev_text' => __( 'Previous Article: %title' ),
'next_text' => __( 'Next Article: %title' ),
) );
?>
Vous pouvez maintenant enregistrer vos modifications et prévisualiser votre site.
Voici ce que cela donne sur notre site de test :
Vous pouvez également utiliser des caractères spéciaux et des flèches ainsi que des titres de publication suivante et précédente.
Il suffit de remplacer le code par le suivant :
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
Voici à quoi ressemble ce code sur notre site de test :
Supposons maintenant que vous souhaitiez que les liens suivants et précédents soient plus pertinents par rapport à l’article que l’utilisateur est en train de voir.
Vous pouvez le faire en affichant les liens suivants et précédents de la même catégorie ou des mêmes identifiants.
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'in_same_term' => true,
'taxonomy' => __( 'category' ),
) );
?>
Ce code indique à WordPress d’afficher les publications suivantes et précédentes dans la même catégorie. Vous pouvez modifier le paramètre taxonomie pour des identifiants ou toute autre taxonomie personnalisée si nécessaire.
Style des liens suivants/précédents dans WordPress
Maintenant que nous avons appris à ajouter les liens Suivant / Précédent dans WordPress, voyons comment les styliser correctement.
Par défaut, WordPress ajoute automatiquement plusieurs classes CSS aux liens de navigation des publications. Vous pouvez utiliser ces classes CSS dans votre thème WordPress pour styliser ces liens.
Voici quelques feuilles de style CSS de base que vous pouvez ajouter à votre thème.
.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%;
}
Ce CSS de base affiche simplement les liens suivants et précédents l’un à côté de l’autre, mais sur des côtés différents de la même ligne.
Vous pouvez également faire ressortir vos liens de navigation en ajoutant une couleur d’arrière-plan, un effet de survol, etc.
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;
}
Ce code met en forme le texte du lien et ajoute une couleur d’arrière-plan et un effet de survol pour mettre en évidence les liens suivants et précédents.
Ajout de liens vers les pages suivantes et précédentes de WordPress
Normalement, les liens de navigation des publications sont utilisés pour les articles de blog dans WordPress. C’est parce que ces articles sont publiés dans l’ordre chronologique inverse.
En revanche, les pages WordPress ne sont généralement pas publiées dans l’ordre chronologique. Pour plus de détails, consultez notre guide sur la différence entre les publications et les pages dans WordPress.
Toutefois, certains utilisateurs/utilisatrices peuvent avoir besoin d’afficher la navigation des pages afin que les utilisateurs/utilisatrices puissent trouver facilement la page suivante.
Heureusement, vous pouvez utiliser le même code que nous avons utilisé plus tôt pour les pages. Cependant, vous devrez ajouter le code à l’intérieur du Modèle page.php.
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
Voici ce que cela donne sur notre site de démonstration :
Ajout de liens suivants/précédents dans WordPress avec des miniatures
Vous souhaitez rendre vos liens suivants et précédents plus perceptibles ? Les images sont le moyen le plus simple d’attirer l’attention des utilisateurs/utilisatrices et de rendre ces liens plus attrayants.
Ajoutons les liens suivants et précédents avec la miniature de la publication ou l’image mise en avant à côté.
Tout d’abord, vous devez ajouter le code suivant au fichier functions.php du thème ou à une extension spécifique au site.
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 publications suivante et précédente avec des images mises en avant ou des miniatures de publication.
Ensuite, vous devez ajouter la fonction wpb_posts_nav() au fichier single.php de votre thème à l’endroit où vous souhaitez afficher les liens.
Si votre thème comporte déjà des liens vers les pages suivantes et précédentes, vous pouvez trouver la ligne qui contient la fonction_post_navigation() et la supprimer.
Ajoutez maintenant le code suivant pour afficher vos liens personnalisés suivant et précédent.
<?php wpb_posts_nav(); ?>
Après avoir ajouté le code, n’oubliez pas d’enregistrer vos modifications et de visiter votre site pour voir les liens en action.
Vous remarquerez peut-être que ces liens n’ont pas l’air très nets.
Modifions cela en ajoutant quelques feuilles de style CSS personnalisées pour les personnaliser.
.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 pour voir les liens suivants et précédents avec des miniatures.
Voici ce que cela donne sur notre site d’essai :
Pour plus de détails, vous pouvez consulter notre guide sur l ‘ajout de miniatures aux liens des publications précédentes et suivantes.
Bonus : Retirer les liens suivants et précédents dans WordPress
Certains utilisateurs/utilisatrices peuvent vouloir retirer les liens suivants et précédents dans WordPress.
Par exemple, certains utilisateurs/utilisatrices peuvent trouver que ces liens sont moins utiles. Certains voudront peut-être afficher à la place des publications similaires ou des publications populaires.
Il y a deux façons de retirer les liens suivants et précédents dans WordPress.
Méthode 1. Supprimer le code dans votre thème WordPress
Pour supprimer les liens suivants et précédents dans WordPress, vous devrez retirer le code responsable de l’affichage des liens dans votre thème WordPress.
Le problème avec cette approche est que dès que vous mettez à jour votre thème, le code supprimé revient.
Pour éviter cela, vous devrez créer un thème enfant.
Ensuite, vous devez trouver le code responsable de l’affichage des liens suivants et précédents dans votre thème parent.
Il se trouve généralement dans les modèles single.php ou content-single.php.
En fait, vous chercherez le code qui comprend 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 et supprimer les lignes utilisées pour afficher les liens suivants ou précédents.
Si vous préférez le supprimer dans votre thème parent, vous pouvez également le faire.
La suppression du code empêchera WordPress d’afficher les liens suivants et précédents.
Méthode 2. Masquer les liens vers les publications suivantes et précédentes
Cette méthode ne retire pas vraiment les liens suivants et précédents. Elle les rend simplement invisibles pour les lecteurs humains.
Il suffit d’ajouter le CSS personnalisé suivant à votre thème WordPress.
nav.navigation.post-navigation {
display: none;
}
N’oubliez pas d’enregistrer vos modifications et de visiter votre site pour voir disparaître les liens de navigation.
Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement des liens suivants et précédents dans WordPress. Vous pouvez également consulter notre guide sur la façon de choisir le meilleur logiciel de conception web, ou notre comparaison experte des meilleurs registraires de domaine.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Shanna says
I created a WP.org website and I have 4 post per page. I don’t see a next page at the bottom of my page. I have over 20 blog posts. How can I see more blog posts or go to the next page?
WPBeginner Support says
If you are using pages instead of posts, you would not see a next page option, we would recommend taking a look at our guide below for understanding how pages work compared to posts.
https://www.wpbeginner.com/beginners-guide/what-is-the-difference-between-posts-vs-pages-in-wordpress/
This guide would show how to go through posts with previous and next links.
Administrateur
Kristi Borst says
Thanks for your article. Very helpful. How would I edit the call to limit the title to xx number of characters followed by eclipse « … »? I tried using css but nothing I did worked.
WPBeginner Support says
At the moment we do not have a beginner friendly way to set that up at the moment and that would require editing the code, not the CSS. If we find a way we would recommend we will be sure to share!
Administrateur
George Okinda says
Awesome! this helped. Thanks and God bless you all in Christ Jesus
WPBeginner Support says
You’re welcome, glad our guide was helpful!
Administrateur
Jennifer says
Hello,
So, how would the code look if you wanted to use a shortcode instead of adding it to the single.php file? I am using GeneratePress and I want to add a hook to my post pages.
Would it look like this?
add_shortcode( ‘posts-nav’, ‘prev_add_next_blogs’ );
the_post_navigation(
array(
‘prev_text’ => __( ‘← %title’ ),
‘next_text’ => __( ‘%title →’ ),
‘in_same_term’ => true,
‘taxonomy’ => __( ‘category’ ),
) );
add_action( ‘init’, ‘prev_add_next_blogs’ );
This did not work for me, any help would be greatly appreciated.
Thank you
Jennifer
WPBeginner Support says
You would want to place the add_shortcode below the code for one likely reason if you have not tested so far.
Administrateur
Ciprian Popescu says
This is a good tutorial and I have just implemented it on my blog. It will definitely help with user retention and bounce rate.
The Full Site Editor will never be able to do this using HTML only. That’s why having the code in functions.php (or, even better, in another PHP file called from functions.php) will always work. The function could be coded as a shortcode (with a slight modification to return data instead of echoing it):
`add_shortcode( ‘posts-nav’, ‘wpb_posts_nav’ );`
And then adding it to every post, as a shortcode block (for the Block Editor).
WPBeginner Support says
Thank you for your feedback on an alternative option!
Administrateur
WPBeginner Support says
For what it sounds like you’re wanting, you would want to add in_same_term to the post navigation code similar to the code below:
the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'next_text' => true,
) );
Administrateur
Bipo says
Hello,
thanks for this tutorial.
While I’m trying to have thumbnail thing working with Divi (images are not shown), I would ask if it is posssible to add the category/taxonomy filter to this code too.
I mean: is it possible to show links and thumbs only when pages are in the same category?
(I’ve already added category to pages and the_post_navigation works )
Henrik Blomgren says
Hi, great tutorial. For old style WordPress.
Now if I wanted to do the image thumbnail post navigation next previous with the new thing in WordPress. The Full Site Editing?
How would I go around doing this tutorial with that?
WPBeginner Support says
Unless we hear otherwise, we would still recommend this method with the full site editor but we will certainly take a look and update the article as needed!
Administrateur
Henrik Blomgren says
Thank you very much for your reply. I forgot you still have full access to functions.php so the code will absolutely work.
Just that getting it into the single.html file is why my brain shut down. Since having to use single.php as the fallback for single posts feels a little weird.
So yes, please either update the article when time has been found or if possible please point me in the direction of how to use the function written in php in our html template.
Tina Filipčič says
Thank you. It helps a lot. I only have this problem now: the navigation is displayed on both – pages and posts. How to make it display on posts only?
WPBeginner Support says
The simplest method would be to have a template for your pages that does not use this, you can see more on our guide below about the template hierarchy:
https://www.wpbeginner.com/wp-themes/wordpress-template-hierarchy-explained/
as well as our guide below about creating a child theme:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Administrateur
Tina Filipčič says
Hello,
I solved the problem by adding this:
let page = document.querySelector(‘.page’);
page.querySelector(‘.wpb-posts-nav’).style = « display:none »