Formation « Développer un thème WordPress sur mesure »

La pagination et la navigation entre articles

Lecture : 4 minutes • 2

WordPress propose des fonctions qui vous 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.

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 :

PHP
archive.php

C’est important de mettre cette fonction hors boucle WordPress afin d’éviter des soucis de répétition. Voici un exemple :

PHP
archive.php

Voici le résultat sur votre site :

Les liens Page précédente et Page suivante générés automatiquement par WordPress
C’est un peu simpliste, mais ça marche !

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é :

HTML

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 :

PHP
archive.php

Et du coup, grâce à un peu de CSS on obtient facilement :

Les liens vers les pages suivante / précédente avec un peu plus de contrôle sur le CSS
C’est mieux : on a plus de contrôle avec le HTML et le CSS

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 :

PHP
archive.php

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 :

PHP
archive.php

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 :

PHP
archive.php

Pensez bien là encore à mettre cette ligne en dehors de votre boucle, à la fin de celle-ci.

Conseil

Afin de tester la navigation numérotée, j’ai volontairement réduit le nombre d’articles par page à 3 au lieu de 10. Vous pouvez en faire de même dans Réglages > Lecture.

Voici le résultat avec un peu de CSS :

La navigation numérotée permet d'afficher les numéros de page adjacents en plus des liens suivant / précédent
La navigation s’adapte toute seule en fonction de la page en cours

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é :

HTML

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 :

WP-PageNavi

WP-PageNavi

Ajoute une interface de pagination plus avancée.

Lester ‘GaMerZ’ Chan

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 :

PHP
archive.php

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.

PHP
archive.php

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 :

La navigation entre les articles
La navigation entre les articles suivants et précédents

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 :


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 !

2

Questions, réponses et commentaires

  1. 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

    1. 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.

Laisser un commentaire