Johan BLEUZEN - Une pagination avancée sur Wordpress sans plugin

Une pagination avancée sur Wordpress sans plugin

26 Mars 2010

Dans ma croisade pour limiter le nombre de plugin dans mon installation WordPress, voici un petit post qui va vous permettre d’avoir une gestion avancée de la pagination. Il existe de nombreux plugins pour avoir obtenir ce comportement mais je vous propose une simple fonction PHP à insérer dans votre fichier functions.php.

Pour la démonstration, il suffit de naviguer sur mon site :).

Je ne vais pas rentrer dans le détail du code PHP et CSS. Tout ce que je vais expliquer, c’est qu’il y a un traitement à partir de l’URL actuelle pour conserver le chemin de la requête et les paramètres si il y en a. Voici le contenu de la function à placer dans votre fichier functions.php

<?php
  /** Fonction pour la pagination **/
  function pagination( $query) {
    // Nombre d'elements a afficher avant et après la page courante
    $NB_TO_DISPLAY = 4;
  
    $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 parametres de l'URL
    $sep = strrpos($baseURL, '?');
    if($sep != FALSE){
      // On supprime le caractere avant qui est un '/' 
      $baseURL = substr($baseURL, 0, ($sep-1));
    }
    
    // Recuperation des parametres pour les re-afficher dans les liens
    $qs = $_SERVER["QUERY_STRING"] ? "?".$_SERVER["QUERY_STRING"] : "";
    $hasQs = false;
    
    if($qs != "")
      $hasQs = true;
  
    $page = $query->query_vars["paged"];
    if ( !$page ){
      $page = 1;
    }
  
    // Generation et affichage uniquement si il y a plusieurs pages
    if ( $query->found_posts > $query->query_vars["posts_per_page"] ) {
      // Calcul des pages a afficher
      $minPage = $page - $NB_TO_DISPLAY;
      if($minPage <= 0){
        $minPage = 1;
      }
      $maxPage = $minPage + ($NB_TO_DISPLAY * 2);
      if($maxPage > $query->max_num_pages){
        $maxPage = $query->max_num_pages;
      }
  
      $html =  '<ul id="pagination">';
      //$html .= "<li>Page ".$page." sur ".$query->max_num_pages."</li>";
  
      if($page > 1){
        $previous = $page -1;
        $html .= "<li><a href='".$baseURL."/page/".$previous;
        if($hasQs)
          $html .= $qs;
        $html .= "'>&laquo; Précédente</a></li>";
      } 
      if($minPage > 1){
                $html .= "<li><a href='".$baseURL."/page/1";
                if($hasQs)
                  $html .= $qs;
                $html .= "'>1</a></li>";
      }
      if($minPage > 2){      
                      $html .= "<li>...</li>";
                    } 
  
      // Boucle dans les pages
      for ( $i=$minPage; $i <= $maxPage; $i++ ) {
        // Detection de la page active dans la liste des liens
        if ( $i == $page ) {
          $html .= '<li class="activePage">'.$i.'</li>';
        } else {
          $html .= '<li><a href="'.$baseURL.'/page/'.$i;
          if($hasQs)
            $html .= $qs;
          $html .= '">'.$i.'</a></li>';
        }
      }

      if($maxPage < $query->max_num_pages){
      	if($maxPage < $query->max_num_pages -1)
	        $html .= "<li>...</li>";
        $html .= '<li><a href="'.$baseURL.'/page/'.$query->max_num_pages;
        if($hasQs)
          $html .= $qs;
        $html .='">'.$query->max_num_pages.'</a></li>';
      }	
      if($page < $query->max_num_pages){
        $html .= '<li><a href="'.$baseURL.'/page/'.($page+1);
        if($hasQs)
          $html .= $qs;
        $html .= '">Suivante &raquo;</a></li>';
      }
      $html .= '</ul>';
  
      // Affichage de la liste des liens
  	echo $html;
    }
  }
?>

Ensuite pour obtenir le même résultat que le plugin, il faut ajouter un petit peu de CSS pour que les liens s’affichent les uns à coté des autres :

``` css/** Pagination links **/ #pagination{ float: right; margin: 0 auto; list-style: none; padding: 0; font-size: 11px; }

#pagination li{ float: left; margin: 0 2px; background-color: #f5f5f5; border: 1px solid #ccc; padding: 3px 5px; }

#pagination li a{ display: block; }

#pagination li.activePage{ border: none; background: none; }```

Et enfin, il faut modifier un peu le template de votre thème pour appeler la fonction que l’on vient de créer. Juste après la fin de la boucle standard, ajouter les lignes suivantes :

  <?php
    pagination( $wp_query);
  ?>

L’argument $wp-query est très important puisque c’est lui qui va fournir l’information de la page actuellement visualiser et le nombre de page maximum.

Avec cela ce snippet de code, vous devriez avoir une pagination aussi jolie que la plupart des plugins mais sans avoir à utiliser de plugin. La fonction gère les tags, les catégories et les résultats de recherche. J’ai comparé le résultat du script au comportement de l’excellent plugin WP-Pagenavi et je n’ai pas trouvé d’incohérence notable. Si jamais vous trouvez une erreur, n’hésitez pas à m’en informer et je corrigerai le script.

EDIT 10 décembre 2010 : Le script PHP a été entièrement mis à jour avec une version qui fonctionne mieux. Je l’ai testé sur 2 blogs et c’est le code que j’ai extrait de ma configuration de ce blog. Je conserve les anciens commentaires, mais attention à la date des commentaires pour ne pas avoir d’informations dépréciées…

Script original : Blog de Steve Taylor [EN]