Bootstrap – Ajout d’une table des matières navigable

Vous désirez écrire un article ayant plusieurs chapitres et pour faciliter sa lecture vous désirez y ajouter une table des matières permettant en cliquant sur un chapitre de se positionner dessus.

Cette article va vous apporter une solution en utilisant un peu d’HTML et des classes Bootstrap (l’article démontrant la solution proposée).


Table des matières


Prérequis

Votre thème WordPress doit être compatible Bootstrap !


Notion de lien et d’ancre en HTML

En HTML un lien (Url) désigne une chaîne de caractères utilisée pour adresser les ressources d’internet (page d’un site web, document, etc.).

Exemple classique d’URL : un texte pointant sur une adresse web – texte : monsite  – adresse : https://cdm-it.epfl.ch = monsite

Ces Url peuvent également adresser un emplacement spécifique à l’intérieur d’une page web pour autant que l’on puisse identifier cet emplacement.
Cet emplacement doit être une balise HTML du genre <h1>, <p>, <hr /> etc. auquel nous lui assignerons un identifiant (ancre)

id="[nom de l'ancre]"

Nous pourrons ensuite créer notre URL pointant vers cet emplacement.

Exemple d’URL pointant sur ce chapitre (l’identifiant « notion » précédé d’un # = #notion ayant été ajouté dans la balise du trait juste au-dessus du chapitre) Notion de lien et d’ancre en HTML

Un peu compliquer ? Les chapitres suivant vont fournir des explications pas-pas pour la création d’une tables des matières.


Division des chapitres

Pour diviser les chapitres on va utiliser une ligne horizontale. Ce qui sera bien pratique par la suite pour lui assigner une ancre.

En HTML, une ligne horizontale s’écrit avec la balise <hr /> mais dans notre cas nous nous contenterons d’insérer ces lignes grâce au menu de notre éditeur (menu -> Insérer -> Ligne horizontale).

InsertLigne

 


Insertion des ancres

Pour insérer nos ancres on va passer en mode « Texte »

Remarque : l’insertion d’ancre via l’éditeur ne fonctionne pas sur les balise <hr /> des lignes horizontales.

En haut de l’éditeur cliquez sur l’onglet [Texte]

ModeText

Descendez dans votre texte jusqu’à la balise HTML <hr /> situé au-dessus de votre premier chapitre et ajoutez-lui un identifiant.

Exemple <hr id= »notion » />

Répéter l’opération sur les autres balises situées justes au-dessus de vos chapitres.

Attention un identifiant doit toujours être unique !


Constitution de la table des matières

Pour constituer notre table des matières on va utiliser la notion de « Linked Items » Bootstrap.

Passez en mode « Texte » en cliquant sur l’onglet [Texte] en haut de l’éditeur.

ModeTexte

A l’emplacement où vous désirez insérer votre table des matières

  • Insérez le texte « Table des matières » ou , « <h3>Table des matières</h3> » (<h3> étant la balise HTML de mise en forme « Titre 3 »).
  • Pressez la touche [Entrée] (clavier français) ou ToucheEnter pour les autres claviers.
  • Insérez ensuite un conteneur HTML <div> en lui assignant la classe Bootstrap « list-group ».
<div class="list-group">
</div>

Dans ce conteneur ajoutez vos balises de lien internet <a> en assignant la classe Bootstrap « list-group-Item » et en pointant sur vos ancres.

Ce qui va vous donnez quelque chose comme ça :

<div class="list-group">
 <a class="list-group-item" href="#notion">Notion de lien et d'ancre en HTML</a>
 <a class="list-group-item" href="#divchap">Division des chapitres</a>
 <a class="list-group-item" href="#ancre">Insertion des ancres</a>
 <a class="list-group-item" href="#table">Constitution de la table des matières</a>
</div>

Si vous effectuez un « aperçu » vous devriez voir quelque chose ressemblant à ça.

Menu1

Pour supprimer les interlignes en trop (WordPress étant un peu trop généreux sur ce coup), il suffit de mettre les balises <a> sur une seule ligne.

<div class="list-group">
 <a class="list-group-item" href="#notion">Notion de lien et d'ancre en HTML</a><a class="list-group-item" href="#divchap">Division des chapitres</a><a class="list-group-item" href="#ancre">Insertion des ancres</a><a class="list-group-item" href="#table">Constitution de la table des matières</a>
</div>

Comme ça c’est mieux.
Menu2


Conclusion

Si vous désirez plus d’information sur :