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

La pagination et la navigation entre articles

Lecture : 4 minutes • 14

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.

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.

Par 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
single.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 !

14

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.

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

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

  3. 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 !

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

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

    1. 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’ );

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

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

  6. 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…

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

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

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

Laisser un commentaire