Une pagination WordPress personnalisée sans plugin

Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci

Cette « solution » dans la catégorie Les tutoriels du site va faire un peu tâche, car je ne vais pas réellement expliquer tout le fonctionnement du code. D’où le rangement de l’article dans la catégorie Ressources. Vous allez me dire que ça fait le deuxième présenté ainsi, et… oui en effet.
Mais l’avantage du blog, c’est que si vous ne comprenez pas tout le contenu de l’article, vous pouvez toujours me demander des explications en guise de commentaires (et moi ça me fait gagner un peu de temps).

L’idée

WordPress propose une gestion de la pagination assez basique avec un lien « précédent » et un lien « suivant ».
C’est déjà ça me direz-vous.
Cependant, une pagination un peu plus évoluée permet tout de même une meilleure navigation sur un site.

En naviguant sur quelques bons blogs (cf. sources et liens utiles de cet article), j’ai trouvé des codes intéressants mais pas toujours adaptés à ce que je souhaitais obtenir.
D’ailleurs, même ce code n’est pas encore assez bien, je souhaiterais pouvoir limiter le nombre de liens affichés. En effet, vous imaginez un blog avec plus de 30 pages d’articles, si tous les liens devaient s’afficher, ça serait un peu envahissant.

Le code

Je vous invite à placer ce code à la suite de votre fichier functions.php qui doit normalement se trouver à la racine de votre thème WordPress. Si ce n’est pas le cas, créez simplement le fichier.

function pagination($query) {  
	
	$baseURL="http://".$_SERVER['HTTP_HOST'];
	if($_SERVER['REQUEST_URI'] != "/"){
		$baseURL = $baseURL.$_SERVER['REQUEST_URI'];
	}
 
	// Suppression de '/page' de l'URL
	$sep = strrpos($baseURL, '/page/');
	if($sep != FALSE){
		$baseURL = substr($baseURL, 0, $sep);
	}
 
  // Suppression des paramètres de l'URL
	$sep = strrpos($baseURL, '?');
	if($sep != FALSE){
	// On supprime le caractère avant qui est un '/'
		$baseURL = substr($baseURL, 0, ($sep-1));
	}	
	
	$page = $query->query_vars["paged"];  
	if ( !$page ) $page = 1;  
	$qs = $_SERVER["QUERY_STRING"] ? "?".$_SERVER["QUERY_STRING"] : "";  
	
	// Nécessaire uniquement si on a plus de posts que de posts par page admis 
	if ( $query->found_posts > $query->query_vars["posts_per_page"] ) {  
		echo '<ul class="pagination">'; 
		// lien précédent si besoin
		if ( $page > 1 ) { 
			echo '<li class="next_prev prev"><a title="Revenir à la page précédente (vous êtes à la page '.$page.')" href="'.$baseURL.'/page/'.($page-1).'/'.$qs.'">« précédente</a></li>'; 
		} 
		// la boucle pour les pages
		for ( $i=1; $i <= $query->max_num_pages; $i++ ) { 
			// ajout de la classe active pour la page en cours de visualisation
			if ( $i == $page ) { 
				echo '<li class="active"><a href="#pagination" title="Vous êtes sur cette page '.$i.'">'.$i.'</a></li>'; 
			} else { 
				echo '<li><a title="Rejoindre la page '.$i.'" href="'.$baseURL.'/page/'.$i.'/'.$qs.'">'.$i.'</a></li>'; 
			} 
		} 
		// le lien next si besoin
		if ( $page < $query->max_num_pages ) { 
			echo '<li class="next_prev next"><a title="Passer à la page suivante (vous êtes à la page '.$page.')" href="'.$baseURL.'/page/'.($page+1).'/'.$qs.'">suivante »</a></li>'; 
		} 
		echo '</ul>';  
	}  
}

Une image présentant une paginationCe code considère que vous avez déjà utilisé l’url-rewriting de WordPress pour « enjoliver » vos permaliens. Si ce n’est pas le cas, je vous invite à le faire dans vos réglages de blog (Admin > Réglages > Permaliens) et à choisir la forme qui vous semble la plus adaptée à vos besoins (personnellement j’utilise /%category%/%postname%, mais nous nous écartons du sujet).

Une fois que cette fonction est enregistrée, il vous suffit de l’appeler à l’emplacement même où vous souhaitez voir apparaître la pagination :

<?php 
   pagination($wp_query);
?>

$wp_query permet d’obtenir des informations qui définissent une requête en cours. C’est elle qui va nous permettre de savoir sur quelle page on se trouve, et combien de pages il y a en tout.
À ne pas omettre donc !

Suggestions d’amélioration

Des améliorations sont envisageables pour éviter la surabondance de liens de pagination. L’une d’elles serait de planquer les liens en trop avec JavaScript (les cacher et les faire défiler ?).
Une autre serait de limiter le nombre de liens affichés dans la pagination en affichant par exemple la première, la dernière, et les deux pages (p+1 et p-1) avoisinant la page active (affichée).

J’y travaille et vous livre cela dès que j’ai un résultat probant ;)

Amusez-vous bien !

Vous voulez encourager l'auteur ?

Don PayPalflattr this!

Laissez-moi un petit mail pour que je puisse vous remercier.

11 commentaires sur “Une pagination WordPress personnalisée sans plugin”

  1. Nico dit :
    3 novembre 2010

    Bonsoir,

    Je viens de tester votre astuce pour la pagination. Tout s’insère correctement dans mon thème, à part que les liens me renvoi systématiquement sur la page 1, je demande à aller sur la page 2, cela me renvoit la page 1 etc.

    Une idée ?
    d’autre part, avez vous le css qui va avec ?

    D’avance merci.

    mon site pour voir l’erreur : cbfc.fr

    • Geoffrey dit :
      3 novembre 2010

      Bonjour Nico,

      Navré, votre commentaire a filé tout droit dans les indésirables, je viens de l’en sortir (le pauvre !).

      Avez-vous remarqué des problèmes avec la pagination par défaut de WordPress ?
      Serait-il possible de l’activer afin d’accéder aux autres articles de la page d’accueil ?

      Concernant les CSS, il s’agit principalement de mettre les éléments de liste en ligne, le reste tient de votre charte graphique.
      Difficile de vous proposer des styles passe-partout, mais si vous souhaitez une base n’hésitez pas à la préciser.

      Merci

      PS : je suis en train d’optimiser le script pour éviter l’affichage d’un trop gros nombre de liens

  2. Renaud dit :
    7 juin 2012

    Bonjour,

    Savez-vous ou coller le code pour appeler la fonction dans le cas d’une pagination pour les categories. Lorsque que je rentre dans une categorie il n’y a pas de lien de pagination … et j’essaye de le rajouter sans succes.

    • Geoffrey dit :
      7 juin 2012

      Bonjour Renaud,

      Tout dépend de votre installation actuelle. Si vous avez un fichier archive.php servant de template pour l’affichage des différents types d’archive (les catégories pouvant en faire partie), il faut placer l’appel de la fonction après le « endwhile; »
      Pour que l’affichage de la pagination soit effective, il faut que le nombre de posts publics soit supérieur au nombre de posts par page à afficher.
      En en sachant davantage sur votre installation actuelle, je pourrais peut-être mieux vous aider.

  3. Renaud dit :
    7 juin 2012

    C’etait bien dans le fichier archive.php

    Merci beaucoup, ca faisait un petit moment que je cherchais sans trouver .. Et merci de la réponse extremement rapide.

    Autre question de novice : vous parlez d’une base CSS possible ? Je veux bien de l’aide la dessus, au moins pour mettre en ligne sans les pastilles.

  4. Geoffrey dit :
    7 juin 2012

    Pas de souci ^^

    Pour mettre les liens sur une seule ligne, il faut commencer par changer l’affichage des éléments de liste :

    .pagination li { display:inline; }

    Puis, espacer légèrement chaque lien :

    .pagination a {
       display:inline-block;
       margin: 0 .4em;
    }

    Voilà pour la base :)

  5. Renaud dit :
    9 juin 2012

    Merci !

    On vient de me signaler un probleme :

    Lorsque je sui sur la page 1, et que je vais sur la 2eme tout va bien le lien de la page 2 est : …/page/2/
    Par contre lorsque je suis en page2 et que je veux allez à la page 3 ou revenir en page 1 voila le liens appelé : … /page/2/page/1/ et … /page/2/page/3/

    Plutot que de juste changer le numero de page dans le lien, il y a l’ajout dans le lien d’un /page/n/

  6. Geoffrey dit :
    10 juin 2012

    Hello,

    C’est bizarre, c’est celle que j’utilise sur ce blog, je n’ai jamais eu le problème, mais tu n’es pas la père personne qui me signaler un souci d’écriture de ce genre.
    Il faudrait contrôler la valeur des variables lors que la retouche de l’url, mais c’est trop long à déboguer à distance (et je ne vais pas te demander un accès à ton espace d’admin).

    Sans tout supprimer de ton côté, tu peux toujours essayer la solution de mon confrère chez GeekPress :
    http://www.geekpress.fr/wordpress/tutoriel/pagination-wordpress-sans-plugin-52/

    Au plaisir.

  7. Nicolas dit :
    2 novembre 2013

    Merci beaucoup ma pagination fonctionne super bien maintenant !!! :)

  8. Julie dit :
    23 janvier 2014

    Merci pour ce tuto qui fonctionne à merveille :)
    Je serais interessé par de la personnalisation, comme limiter le nombre de pages affichées par exemple, si c’est toujours d’actualité ? :)

    • Geoffrey dit :
      23 janvier 2014

      Hello,
      Hélas je ne peux te proposer de personnalisation car je suis beaucoup trop occupé.
      Si jamais tu en as le cœur tu peux toujours décortiquer le plugin Simple Pagination de notre GeekPress national : Simple pagination
      Bon courage et merci pour ton commentaire !

Laisser un commentaire

Certains codes HTML ne sont pas échappés automatiquement. Pour afficher du code dans votre commentaire, merci d'échapper vos chevrons en utilisant "&lt;" et "&gt;" en lieu et place de "<"" et ">".

Il est difficile de proposer un support pour tous les articles de ce blog. En ne fournissant pas un moyen de consulter votre code bogué, vous vous assurez de ne pas avoir de réponse adaptée. Utilisez CodePen.io à défaut d'une page web.

 
Le studio web