Pagination en Ajax sous WordPress ou ailleurs
Tutoriel sur la pagination en Ajax
Dans cet article, je vais vous présenter la réalisation d’une pagination en Ajax sous WordPress ou sur n’importe quel autre site internet. Vous verrez, c’est tout simple.
La pagination ou navigation en Ajax permet de charger du contenu sans devoir rafraîchir la page, cela rend le site plus dynamique, attractif et réactif pour l’utilisateur. C’est vraiment un plus non négligeable.
Ce tutoriel est présenté pour WordPress mais il reste facilement applicable pour tout autre site, il suffit d’adapter les div qui encadrent le contenu et la pagination en question.
Imaginons le code suivant comme étant le résultat HTML d’un loop et d’une fonction de pagination sous WordPress. Si vous désirez plus d’informations concernant le loop et la pagination, n’hésitez pas à le demander dans les commentaires…
La partie HTML :
<section class="home-main">
<h2>Actualités</h2>
<div id="data-posts">
<article id="post-106" class="excerpt">
<a href="http://monsite.com/article-1/" title="Article 1">
<img src="https://placehold.it/140x140" alt="">
</a>
<div class="extra_wrapper">
<h3><a href="http://monsite.com/article-1/" title="Article 1">Article 1</a></h3>
<p>Contenu de l'article 1 <a class="view-article" href="http://monsite.com/article-1/">Voir l'article</a></i></p>
</div>
</article>
<article id="post-104" class="excerpt">
<a href="http://monsite.com/article-2/" title="Article 2">
<img src="https://placehold.it/140x140" alt="">
</a>
<div class="extra_wrapper">
<h3><a href="http://monsite.com/article-2/" title="Article 2">Article 2</a></h3>
<p>Contenu de l'article 2<a class="view-article" href="http://monsite.com/article-2/">Voir l'article</a></i></p>
</div>
</article>
<article id="post-91" class="excerpt">
<a href="http://monsite.com/article-3/" title="Article 3">
<img src="https://placehold.it/140x140" alt="">
</a>
<div class="extra_wrapper">
<h3><a href="http://monsite.com/article-3/" title="Article 3">Article 3</a></h3>
<p>Contenu de l'article 3<a class="view-article" href="http://monsite.com/article-3/">Voir l'article</a></i></p>
</div>
</article>
</div>
<div class="pagination">
<ul>
<li><a href="http://monsite.com/" class="page-numbers current">1</a></li>
<li><a href="http://monsite.com/page/2/" class="page-numbers">2</a></li>
<li><a href="http://monsite.com/page/3/" class="page-numbers">3</a></li>
</ul>
</div>
</section>
C’est donc une DIV avec un ID #data-posts qui reprend chaque article dans la class .excerpt. L’idée de la pagination en Ajax, consiste à réaliser une action lorsque l’on clique sur une class .page-numbers de la pagination.
Cette action, devra :
- effacer le contenu de #data-posts,
- charger le nouveau contenu grâce à l’url de la pagination,
- placer le nouveau contenu dans #data-posts.
Pour réaliser tout cela, nous allons utiliser jQuery (n’oubliez pas de le charger préalablement évidemment…)
La partie jQuery :
$('.pagination ul li:first-child a').addClass("current");
$('.page-numbers').click(function(event){
event.preventDefault()
$('.page-numbers').removeClass("current");
$(this).addClass("current");
var link = $(this).attr('href');
$('#data-posts').html('<img src="wp-content/themes/montheme/img/load.gif" class="load">');
$('#data-posts').load(link+' .excerpt');
});
Voyons ensemble chaque ligne :
-
$('.pagination ul li:first-child a').addClass('current');
Cette première ligne permet simplement d’ajouter la class “current” lors du premier chargement afin d’appliquer un style particulier à l’élément courant par défaut.
-
$('.page-numbers').click(function(event){...}
A lire de la manière suivante : “lorsque je clique sur la class .page-numbers, réalise les actions suivantes…”
-
$('.page-numbers').removeClass('current'); ET $(this).addClass('current');
Respectivement, retire la class .current de n’importe quel élément se trouvant dans .page-numbers et ajoute la class .current à l’élément sur lequel on vient de cliquer.
-
var link = $(this).attr('href');
Récupère l’URL de l’élément sur lequel on vient de cliquer.
-
$('#data-posts').html('<img src='wp-content/themes/montheme/img/load.gif'>');
Vide le contenu de #data-posts en y mettant un petit gif animé pour illustrer qu’une action est en train de se passer.
-
$('#data-posts').load(link+' .excerpt');
Charge le contenu de l’URL et lui ajoute la class .excerpt (voir le code HTML)
Voilà qui est terminé. Si vous désirez une démonstration ou si certains points ne sont pas clairs, n’hésitez pas à poster un commentaire. Je me ferais une joie d’y répondre.
