Ajouter un bouton suivant et précédent (Next-previous) à votre blog

Dans cet article on va vous montrer comment ajouter à votre site des boutons suivant et précédant (next and previous ) qui redirigent vers l’article de la même catégorie .Ces boutons permettent aux utilisateurs d’accéder aux nouveaux messages de la page en cours. C’est l’une des fonctionnalités les plus utilisées dans WordPress .

Maintenant, nous allons passer en revue les étapes à suivre pour ajouter deux boutons (Précédent / Suivant) dans toutes les pages de votre blog.

Voici le résultat final (si vous n’utiliser pas les icônes Font-awesome) :

Remarque : Il est toujours préférable de faire une sauvegarde de votre thème avant toute manipulation.

Maintenant voyons voir étape par étape comment créer ces deux boutons:

Ajouter des boutons « suivant et précédent » à votre blog

Ouvrez le fichier style.css de votre thème WordPress et collez y le code ci-dessous:

.arrowLeft a {
position: fixed;
z-index: 100;
left: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
 
.arrowLeft a:hover {
left: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}
 
.arrowRight a {
position: fixed;
z-index: 100;
right: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
 
.arrowRight a:hover {
right: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}
 
.arrowNav a {
background: #225773;
color: #fff;
text-decoration: none;
font-size: 16px;
}

Maintenant Ouvrez le fichier functions.php votre thème et placez le code ci-dessous à la fin du fichier:

function wpcours_post_navigation(){
?>


<div class="arrowNav">
	

<div class="arrowLeft">
		<?php previous_post_link('%link', '<<', FALSE); ?>
	</div>


	

<div class="arrowRight">
		<?php next_post_link('%link', '>>', FALSE); ?>
	</div>


</div>


<?php
}
 
add_action('wp_footer', 'wpcours_post_navigation');

Si vous utilisez les icônes Font-awesome et vous aimez un design attrayant (pour moi je ne l’utilise pas sur mon site car j’aime pas affecter le temps de chargement de mon site) utiliser ce code :

function wpcours_post_navigation(){
?>
	

<div class="arrowNav">
		

<div class="arrowLeft">
			<?php previous_post_link('%link', '<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>', FALSE); ?>
		</div>


		

<div class="arrowRight">
			<?php next_post_link('%link', '<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>', FALSE); ?>
		</div>


	</div>


<?php
}
add_action('wp_footer', 'wpcours_post_navigation');

Une fois que vous avez effectué les modifications ci-dessus, nettoyez simplement le cache de votre blog, si vous utiliser un plugin de cache, et vous allez voir des flèches de navigation (suivant et précédent) sur votre site.

J’espère que ce petit tutoriel vous aidera à ajouter des boutons de navigation « suivant et précédent » à votre site facilement et sans plugin.