Ajouter une ancre dans un article WordPress

Cet article a été publié il y a 9 ans 4 mois 27 jours, il est donc possible qu’il ne soit plus à jour. Les informations proposées sont donc peut-être expirées.

Pour le billet « Retour vers le futur » que je suis en train d’écrire, j’ai décidé de créer un sommaire, afin que vous puissiez atteindre les chapitres qui vous intéressent plus facilement (le billet est assez long). Pour ce faire, en HTML, et donc dans WordPress, on utilise les ancres, vous allez voir, c’est assez simple !

Les ancres… C’est à peu près une des premières utilisations de la balise <a> que j’ai apprise en 1999 avec mes premières pages HTML en cours d’informatique au lycée. Elles permettent de se rendre directement à un endroit d’une page, pratique si celle-ci est longue, car ça évite de devoir tout faire défiler. Cette balise, on l’utilise plus couramment pour faire des liens vers d’autres pages, mais rien n’interdit de pointer vers la même page.

En l’occurrence, je prépare un très long billet pour lequel je souhaite mettre en place un sommaire, qui permettra de lire dans n’importe quel ordre, et pourquoi pas en plusieurs fois, les différents chapitres. WordPress dispose d’un très bon éditeur, mais sur le coup je n’ai pas trouvé comment faire ça en deux clics. Alors on a ressorti les bonnes vieilles méthodes, qui on le verra ne sont pas très compliquées.

L’exemple du titre de chapitre

Ce titre contient une ancre. Les plus curieux observeront tout de suite le code source de la page (Ctrl+U dans Firefox, souvenez-vous), les autres vont lire la suite de l’article pour comprendre. Bref, techniquement, j’ai juste appliqué le style « Titre 3 » sur le texte. Ensuite, on bascule en mode édition « Texte » avec l’onglet qui va bien dans l’éditeur :

Le titre, avant l’ajout de l’ancre

On voit bien la ligne avec le titre de chapitre, entre balise <h3></h3>. Eh bien, on va ajouter l’ancre avec le code suivant :

Voilà, on a ajouté la balise <a>, qui possède un attribut name, qui a pour valeur « chapitre ». On aurait pu directement mettre du texte entre les deux balises <a> et </a>, mais le texte serait alors apparu comme un lien. Hors, le lien, c’est l’étape d’après. Là, on veut juste créer l’ancre, la destination en quelque sorte.

On peut repasser ensuite en mode visuel (avec l’onglet). On constate alors la présence de cette ancre par un petit sigle juste avant notre titre :

On peut maintenant créer le lien permettant de pointer dessus. Et pour ça, pas besoin de code HTML, on peut utiliser le bouton de l’éditeur qui va bien. Une fois le texte de votre lien créé, voilà ce qu’il faut saisir :

En guise de lien, on met donc un « # » suivi du nom de l’ancre qu’on a créé juste avant. Et pour le titre du lien, vous mettez ce que vous voulez, de préférence quelque chose de compréhensible, c’est une question d’accessibilité (pour les personnes utilisant un lecteur vocal notamment). Et on évite de cocher la case demandant d’ouvrir la page dans une nouvelle fenêtre, car c’est inutile, puisqu’on cherche juste à atteindre une autre partie de la même page.

Vous pouvez observer le résultat de cet exemple en cliquant ici. Le texte devrait alors se positionner dans le navigateur de sorte que le titre soit en haut. Tada !

Un sommaire ? Ben avec les ancres, c’est simple

Pour faire un sommaire, rien de plus simple. Personnellement, j’ai opté pour une ancre « Top », en début de sommaire, puis une ancre par titre de chapitre. Ensuite, le sommaire consiste en une liste de liens pointant vers les différentes ancres/chapitres du texte. À la fin de chaque chapitre, j’ai inclus un lien pour revenir au sommaire, pointant sur la balise « Top ». Et voilà !

L’alternative WP Edit

J’utilisais au début Ultimate TinyMCE, mais j’ai découvert, après avoir essayé d’ajouter un bouton ancre dans ma barre d’outils, qu’il ne fonctionnait plus pour WordPress 3.9 et suivants, et a été remplacé par WP Edit. Et miracle, ce coup-ci , après avoir importé les réglages d’Ultimate TinyMCE, j’ai un bouton Ancre d’ajouté à la barre d’outils, permettant de se passer d’édition de code (vous pouvez l’ajouter par « drag-and-drop » dans les paramètres du plugin) ! Perso, j’en resterais à ça, mon côté vieux jeu certainement (mon premier site web avait été entièrement écrit avec… le bloc-notes windows).

Ce n’est pas que pour WordPress !

Cette technique utilise des balises HTML, en l’occurrence une balise HTML, <a>, ce qui fait que cette technique fonctionne avec à peu près tous les sites qui permettent de saisir du code HTML, ainsi que plusieurs moteurs de blogs, comme PluXml que ToEvenStay a évoqué en commentaire du billet anniversaire du blog.