WordPress propose des fonctions qui vont nous permettre de naviguer vers les entrées plus anciennes des pages archives, mais aussi d’un article à l’autre en allant facilement au suivant, ou au contraire en retournant au précédent.
Sommaire du cours
Dans ce cours on va voir comment ajouter des liens afin de faciliter la navigation à notre internaute. Ici plus besoin du functions.php par contre, tout se fait directement dans les templates concernés (archive et single).
La Pagination pour les archives
La pagination est plutôt simple à gérer dans WordPress puisqu’il nous fournit pour cela des fonctions prêtes à l’emploi.
Pour ajouter une pagination simple, il vous suffit d’ajouter cette fonction dans votre fichier archive.php, après la fin de la boucle :
C’est important de mettre cette fonction hors boucle WordPress afin d’éviter des soucis de répétition. Voici un exemple :
Voici le résultat sur votre site :

Bon, le souci avec cette fonction c’est qu’elle ne nous laisse que peu de choix de mise en forme. Voici le HTML affiché :
Cela pourrait suffire, mais si vous voulez un peu plus de contrôle sur cet affichage, on va pouvoir utiliser 2 autres fonctions à notre disposition :
Et du coup, grâce à un peu de CSS on obtient facilement :

Mieux non ? Il reste encore un détail qui me chiffonne : les guillemets en guise de flèche qui ne sont pas jolis. Heureusement on peut remplacer le texte par défaut en ajoutant un paramètre aux fonctions :
Et comme bien souvent dans WordPress, une version en get_
existe dans le cas où vous voudriez récupérer le lien sans l’afficher :
Mais ce n’est pas très intéressant quand ça vous renvoie le lien <a>
déjà généré et non pas juste l’URL de la page suivante.
Une pagination numérique
Depuis la version 4.1 de WordPress, une nouvelle fonction a fait son apparition et vous permet de créer une navigation paginée :
Pensez bien là encore à mettre cette ligne en dehors de votre boucle, à la fin de celle-ci.
Voici le résultat avec un peu de CSS :

En plus des liens Précédent et Suivant on a maintenant les numéros de page adjacents, et 5 pages plus loin. Plutôt pas mal non ?
Et le HTML généré :
Il y a un <h2>
un peu gênant qu’il faudra cacher en CSS. Il est là dans un but d’accessibilité : il permet à un lecteur de site (pour les personnes malvoyantes par exemple) d’indiquer que c’est la navigation entre les articles. Le lecteur (screen reader en anglais) sait déjà que l’on est dans une navigation grâce au rôle défini dessus.
On reparlera d’accessibilité et de son importance dans le développement d’un thème un peu plus tard dans cette formation.
Pour en revenir au CSS, vous disposez de beaucoup de classes afin de personnaliser au mieux votre pagination, ce qui est plutôt agréable.
Alternative : pagination en utilisant une extension
Et si ça ne suffit pas, vous pouvez toujours opter pour une extension comme WP-PageNavi qui va vous permettre de configurer et personnaliser votre pagination. De plus, elle est fournie avec un thème CSS prédéfini afin d’aller plus vite :
Pour mettre en place la navigation c’est très simple, il suffit d’ajouter cette fonction dans votre template à la place de celles vues précédemment :
Alors, quelle méthode choisir ? En fait, ça dépend. Parfois il est suffisant et bien plus efficace de rester sur des liens « précédents / suivants » simples et d’autres fois, la navigation par numéro de pages peut être utile. À vous de choisir !
La navigation entre les articles
On va maintenant voir que l’on peut également ajouter des liens vers l’article suivant ou précédent au sein des templates single.php.
Ici aussi, on va placer ce code après la boucle WordPress.
C’est presque la même fonction. Remarquez simplement que désormais post
est écrit au singulier, et non plus au pluriel ! J’ai également ajouté %link
qui sera remplacé par le nom réel de l’article ciblé.
Voici ce que ça donne dans un article :

Afin d’en savoir plus sur toutes les fonctions que l’on vient de voir, je vous recommande comme d’habitude d’aller faire un tour sur la documentation développeurs officielle :
Pagination | Documentation WordPress
Pagination allows your user to page back and forth through multiple pages of content.
Votre site permet de simplifier de plus en plus la navigation entre les pages grâce à ces liens. C’est ce que l’on appelle le maillage interne. Votre internaute pourra alors trouver facilement ce qu’il recherche, et les moteurs de recherche comprendre plus facilement l’architecture de votre site.
Dans le prochain cours, on va ajouter les commentaires à nos articles !
LoicSEO
Le 11 avril 2019
Bonjour,
Merci pour cet article. Est-ce que vous savez s’il est possible de récupérer la liste des pages dans un tableau, afin de pouvoir gérer de A à Z le code source généré ?
Par exemple, dans le cas d’une pagination très longue, je préférerais avoir » 1,2,3, 20, 40, 60, 100″.
Mais je ne trouve pas la fonction adéquate.
Bonne journée
Maxime BJ
Le 11 avril 2019
Dans ce cas tu peux utiliser l’extension WP Page Navi qui te permet de personnaliser ça plus finement.
Si tu le fais à la main il faut simplement connaitre le nombre d’articles publiés via une WPQuery, et diviser par le nombre d’articles par page (en récupérant dans get_options) : ça te permet de connaitre le nombre total de pages existantes.
Emmanuel
Le 15 mai 2020
Bonjour Maxime
Plus j’avance dans cette formation plus je suis satisfait de ce que j’y apprends.
Ma question concerne le css, comment sera géré le coté responsive du site ? J’arrive à ce que je veux en version desktop mais pas du tout en version mobile. Faut il utiliser des
medias queries ou WordPress a ce qu’il faut dans son arsenal et attendre la suite de la formation.
Merci pour tout
Maxime BJ
Le 23 mars 2021
C’est bien le rôle du CSS en effet. Étant un pré-requis à la formation, je ne le traite pas ici. Tu peux en apprendre plus à ce sujet sur le site MDN qui est très bien fait. WordPress, lui, ne génère que la partie HTML.
Léa Diane
Le 16 mars 2023
Bonjour, merci pour cet article ! J’ai un souci de lien qui ne suit pas quand je clique sur ma deuxième page d’articles, que faire ? merci !
Maxime BJ
Le 16 mars 2023
Survole le lien et regarde vers quelle URL il cherche à pointer. Si tu es dans une page single : ça devrait être le lien de l’article suivant. Si tu es sur une page archive, ce sera plutôt page/2. Tu as quoi ?
Martin M
Le 6 avril 2023
Hello, merci pour toutes tes formations qui m’aide au quotidien au travail. Petite question sur la dernière partie de ce cours. J’aimerai relier des articles avec article précédent / suivant. Dans un contexte classique tout fonctionne avec le cours et cette fonction previous_post_link mais pour un contexte avec des catégories, j’ai du mal à voir comment relier ces articles en reliant uniquement les articles de la catégorie en question.
Bonne journée
Maxime BJ
Le 6 avril 2023
Merci ! Alors pour ton besoin spécifique, WordPress propose justement un 3è paramètre pour ça : in_same_term. Et en le passant à true, tu peux dire que tu veux le prochain article de la même catégorie.
Ça donnerait ça : next_post_link( ‘%link’, ‘Prochain article dans la catégorie’, true, », ‘category’ );
Dom
Le 22 mai 2023
Bonjour Maxime
Quel est le plugin utilisé pour afficher comme sur votre page ici la liste des titres de la page, sommaire et pourcentage défilement en bas de page ?
Vraiment très bien
Cordialement
Maxime BJ
Le 23 mai 2023
C’est du fait-maison ! Pour la barre de progression c’est un peu de JS dans le thème et le sommaire est un bloc Gutenberg que j’ai fait. Tu trouveras des blocs déjà tout fait dans des extensions WordPress pour le sommaire. Et pour les barres de progression tu peux trouver des tutos js en ligne, que tu pourras intégrer dans ton thème custom facilement.
Adam Refined
Le 2 juin 2023
Hello Maxime. Je passe ma journée sur ton site lol. Je suis à ce cours maintenant.
Je voulais juste dire ça pour etre utile de préciser pour le lecteur qui lit ton cours que d’un point de vue SEO :
– les paginations sont à éviter;
– dans le cadre d’un silo, les liens vers la page suivante/précédente sont à éviter aussi, surtout quand les articles ne parlent pas du tout du même sujet…
Maxime BJ
Le 5 juin 2023
Les pages d’archives sont importantes uniquement pour le maillage interne. Les pages et les articles sont importants pour le SEO. Il n’y a donc aucun souci pour avoir des paginations sur le site (mais pas une pagination au sein même d’un article, car c’est possible, mais à éviter).
Il n’y a pas que le SEO sur un site. C’est certes important, mais il ne doit pas être fait au détriment de l’ergonomie. Parfois ça peut être intéressant d’avoir les liens suivant/précédent, comme dans mes cours par exemple pour le fil rouge (même si les sujets qui s’enchainent ne sont pas toujours compatibles). Mais tu as raison sur le fait que c’est plus judicieux de proposer des articles « Related » qui aborderont un sujet équivalent (même catégorie ou même étiquette par exemple).
Mathieu ALLART
Le 18 octobre 2023
Bonjour, existe-t-il une plugin pour faire une navigation entre les pages ?
J’aimerais créer un bloc entre des sous-pages (pages soeurs) afin d’améliorer facilement le maillage interne ?
Page Mère
– Page Fille 1
– Page Fille 2
– Page Fille 3
Merci d’avance.
Et en bonus, le site est sous Divi….
Maxime BJ
Le 18 octobre 2023
De ce que tu me dis, si tu veux juste un sous-niveau de navigation, les menus de WordPress le gère très bien nativement. Mais si tu veux un menu généré automatiquement et contenant seulement les enfants d’une page, il faudra un peu de code. Il y a un exemple ici : https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/