neosting, blog, pagination

Remplacer sans plugin WP-PageNavi de wordpress avec cette puissante fonction de Kriesi modifiée et traduite en français et en HTML5


Lorsque j'ai réalisé mon nouvau thème en HTML5, je me suis aussi orienté vers la chasse aux plugins de WordPress, souvent consommateurs de mémoire, et ralentisseurs de blogs, car appelant du javascript et des feuilles de style supplémentaires.. Celui que j'ai voulu remplacer, parmi d'autres - mais j'y reviendrais sûrement - c'est l'excellent wp-pagenavi, qui, avec plus de 2 millions de téléchargements fait partie des extensions les plus populaires. Comme son nom le laisse entendre, ce plugin va créer une pagination, pour aider vos lecteurs à naviguer plus facilement vers les pages suivantes et précédentes dans vos pages d'index.

Pourtant, le remplacer reste plutôt simple, et à la portée de tous. Je vous avais présenté une première solution avec ce script, mais j'en ai trouvé un autre un peu plus configurable et tout aussi efficace. Celui que j'utilise est basé sur le script de Kriesi qui avait été modifié aussi par Veron Ang. La seule chose que j'ai modifié, à mon tour, sur cette seconde version améliorée, c'est la mise en forme pour le rendre copain avec le français et le HTML5, avec en prime une once d'accessibilité.

Le code est à déposer dans son fichier functions.php

/* 
 * Pagination de Kriesi modifiée pour le blog http://neosting.net/
 * http://design.sparklette.net/teaches/how-to-add-wordpress-pagination-without-a-plugin/
*/
function pagination($pages = '', $range = 3)
{
     $showitems = ($range * 2)+1;  
 
     global $paged;
     if(empty($paged)) $paged = 1;
 
     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   
 
     if(1 != $pages)
     {
         echo "<section class=\"pagination\"><ul><span>Page ".$paged." sur ".$pages."</span>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a title=\"Aller à la première page\" href='".get_pagenum_link(1)."'>Début</a></li>";
         if($paged > 1 && $showitems < $pages) echo "<li><a title=\"Aller à la page précédente\" href='".get_pagenum_link($paged - 1)."'>&laquo;&#8834; </a></li>";
 
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<li><span title=\"Vous êtes sur la page ".$i."\" class=\"current\">".$i."*</span></li>":"<li><a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a></li>";
             }
         }
 
         if ($paged < $pages && $showitems < $pages) echo "<li><a title=\"Aller à la page suivante\" href=\"".get_pagenum_link($paged + 1)."\">&#8835;&raquo;</a></li>";
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a title=\"Aller à la dernière page\" href='".get_pagenum_link($pages)."'>Fin</a></li>";
         echo "</ul></section>\n";
     }
}
?>

Il ne reste alors plus qu'à l'appeler dans les pages d'index, comme index.php, search.php... La fonction va simplement compter le nombre d'articles et calculer le nombre de pages à afficher en fonction de ses réglages WordPress attribués à $wp_query dans "Lecture". J'ajoute avant la fonction un reset de la boucle si, il vous prenait l'envie de créer une autre boucle supplémentaire et personnalisée à côté de la principale.

wp_reset_query();
if (function_exists("pagination")) {
    pagination();
}

Le plus intéressant au final, c'est qu'il est aussi possible de déterminer avec "post_per_page" de wordpress une nouvelle boucle et faire agir cette pagination en conséquence. Merci encore une fois à Kriesi pour l'astuce que je reporte ici :

$additional_loop = new WP_Query("cat=1,2,3&paged=$paged");
 
while ($additional_loop->have_posts()) : $additional_loop->the_post();
 <!-- le contenu de la boucle ; titre, extrait... -->
endwhile;
 
kriesi_pagination($additional_loop->max_num_pages);

Enfin, dans votre feuille de style, il ne vous reste plus qu'à personnaliser cette pagination. Le code d'origine est le suivant. Je l'ai aussi modifié, mais je reviendrai bientôt sur ce point.

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
 
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}
 
.pagination a:hover{
color:#fff;
background: #3279BB;
}
 
.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}

En prime, avec ce plugin, il est possible de faire beaucoup plus de choses, comme définir le nombre de pages à afficher, avant et après celle en cours.


Discuter sur le Chat en live et par email ou sur Google+, SeenThis

Ça pourrait vous intéresser