Ajouter une navigation numérique en aJax dans wordPress

Dans la liste des articles du blog (index.php), ou bien même dans les articles d’une catégorie (category.php) ou bien les résultats d’une recherche, wordPress affiche des liens vers les pages suivante et précédente. Cette navigation charge une nouvelle page (la précédente ou la suivante) avec les résumés d’articles correspondants. Il est possible d’afficher des liens de navigation vers différentes pages, pas seulement la précédente et la suivante, et de ne charger que le contenu sans recharger toute la page.

Pagination par N° de pages
Pagination par N° de pages

Pour cela, on peut utiliser le plugin WP-PageNavi ou le faire manuellement en ajoutant la fonction d’affichage des liens dans functions.php du thème:

Il ne reste plus qu’à remplacer le lien de navigation dans la page index.php, (ou/et category.php, archive.php …):

Et de styliser cela dans style.css:

 

À ce point, la navigation se fait par N° de page, mais chaque page est rechargée. Pour faire cela en aJax, en ne changeant que le contenu, il faut charger la nouvelle page par jQuery:

#left_area est la colonne de gauche à changer dans mon thème (Divi).

Il faut mettre cela dans un fichier javascript que l’on charge dans functions.php:

DIVI_CHILD_URI est le chemin vers mon thème (get_stylesheet_directory_uri()).

Et hop, une navigation en aJax par N° de pages.

 

Je n’ai pas encore essayé mais on peut également utiliser le hook ‘paginate-links’:

À essayer donc …

Trackbacks/Pingbacks

  1. Ajouter l'historique et un loader à la pagination ajax/jQuery dans wordPress - Murviel Info - […] Ajouter une navigation numérique en aJax dans wordPress expose les moyens d’obtenir une pagination aJax dans wordPress. Seulement il manque…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *