Sommaire d'articles

Ajout d’un sommaire aux articles

Cet article a été réactualisé il y a 1 an jours. Il n'est pas nécessairement obsolète, mais gardez son ancienneté en tête lors de sa lecture.

Quand un article est relativement long, on peut apporter un plus pour y naviguer et avoir un aperçu de son contenu en fournissant une liste des titres et sous titres qui le compose.

Adaptation sur Pixi d’un tutoriel de développeur WP

L’application de cette fonctionnalité sur Pixiscreen me vient d’un tutoriel proposé par Willy Bahuaud : « Un sommaire pour vos articles, sans plugin » Je vous invite à suivre son tuto si cette implémentation à la « mano » vous intéresse, c’est riche d’enseignements.

Pour ma part, je ne vais m’attacher ici qu’à apporter des infos complémentaires relatives à son adaptation pour mon site.

Le principe de fonctionnement

Lors de la rédaction d’ articles nous utilisons des titres pour hiérarchiser le contenu. Le tutoriel de W. Bahuaud explique comment faire en sorte d’automatiser l’ajout d’une ancre sur ces titres en utilisant un filtre WordPress (add_filter) sur le contenu des posts qui va rechercher les différentes balises hn et placer un id (le titre lui même mais reformaté) sur ces balises. Ensuite une autre fonction permet de générer le sommaire à l’endroit souhaité dans la page.

J’aurais bien été incapable d’écrire ce code, merci à Willy de partager ça avec nous ! De quoi s’exercer à l’utilisation d’ expressions régulières, de fonctions php, de conditions, de boucles …

Fonctionnalité en plugin ou dans le thème ?

J’ai opté pour mettre cette fonctionnalité dans mon thème dans la mesure où la gestion du positionnement du sommaire et son apparence sont fortement liée à la structure html/css de mon site.

Le php

Pour ne pas surcharger le fichier functions.php, je place la gestion php du sommaire dans un dossier inc à la racine du thème, appelé dans functions.php via un require get_template_directory(). '/inc/post-summary.php';

PHP
/inc/post-summary.php

Pour les explications de code référez vous au tutoriel d’origine.

Ensuite j’ai utilisé la fonction automenu(true); dans le template single.php pour ajouter le sommaire en barre latérale restant visible quand on fait défiler le contenu de l’article. Je n’avais pas besoin d’utiliser le shortcode proposé qui permet de placer le sommaire où on le souhaite dans le contenu de l’article.

Le js

Se déplacer de façon fluide dans la page

Le clic sur un item du sommaire fait que la transition vers la portion de l’article visée est brutale, ajouter une transition fluide permet de visualiser la montée ou descente de la page.

J’ai opté pour un scroll fluide en jQuery qui prend en charge TOUTES les ancres présentes dans le site, pas seulement celles du sommaire généré. Cette fois il s’agit d’un tutoriel présent sur CSSTricks : « Smooth scrolling« , qui a l’avantage de gérer aussi le focus pour l’accessibilité.

Petite parenthèse a11y, depuis que j’utilise l’insertion de code dans mes pages à l’aide de Advanced Gutenberg Blocks, j’ai un soucis au niveau de la navigation à la tabulation. Dès que j’arrive sur une portion de code, ma tabulation est capturée là et je ne peux plus ni reculer ni avancer. Il va falloir regarder ça de plus près.
https://axesslab.com/skip-links/

On en revient au JS, l’apparence de Pixi comporte quelques contraintes, la façon dont le scroll doit fonctionner dépend de la largeur de l’écran, le positionnement du sommaire aussi. Quand l’écran est large (media query>1280px) j’ai une barre en haut de page pour le fil d’ariane (breadcrumb). Quand l’écran est plus petit, c’est tout mon header qui prend le haut de page … Un casse tête que j’ai finit par résoudre à coup de css avec du positionnement relatif, absolu, et prise en compte des media query dans le JS …

Voici ce j’ai mis en place pour le scroll :

JS

Je suis répétitive pour le coup du fait de la prise en compte de la présence de ma barre « breadcrumb » en haut de page ou non selon la taille de l’écran.

Comme toutes les ancres sont prises en charge par le code jQuery ci dessus, j’ai du quand même gérer à côte de ça le « Back to top » autrement.

JS

Highlight des liens du sommaire quand le texte est inview

Pas simple de trouver un titre concis là ! Bon, le truc c’est d’ajouter une classe css « inview » sur les liens du sommaire dont les contenus correspondant dans l’article sont réellement visibles à l’écran lors du scroll horizontal. Du coup on peut styliser avec du css ces liens dans le sommaire pour visualiser où on en est dans sa lecture d’article.

Il existe des librairies jQuery prêtes à l’emploi pour gérer ce « inview », Waypoints par exemple. Mais comme on vient de suivre un tuto pour faire un sommaire sans plugin, pour continuer dans la lancée j’ai essayé de comprendre le code qu’utilise W. Bahuaud dans son site. Comprendre ce n’est déjà pas une mince affaire, quant à l’écrire soi même … bon … je n’en suis pas là du tout ! Mais l’exercice est formateur tout de même.

Voici ce que j’ai ajouté comme script pour que cela fonctionne sur Pixi.

JS
summary-inview.js

Je vous laisse le loisir de décortiquer, comprendre pour en tirer quelque chose à vous approprier.

Le css

Il ne reste plus qu’à ajouter du css sur les classes et id du sommaire :

  • #sommaire-article
  • .title_lvl / .title_lvl2 / .title_lvl3 / .title_lvl4
  • .inview
  • Pour une question de place et de gestion de l’espace je n’affiche le sommaire que pour des résolutions d’écran supérieures à 1024px.
  • Et tout ce qui vous conviendra …

Cette partie style dépend complètement de la façon dont vous insérez le sommaire dans la page, et du « design » que vous souhaitez lui conférer, donc je m’arrête là pour ce mémo !