ajouter une ancre dans wordpress
Wordpress

Comment Créer une Ancre dans WordPress ou Faire un Lien vers un Endroit Précis de la Page ?

Si vous avez l’habitude comme moi d’écrire des articles longs, alors vous aurez certainement besoin un jour de créer une ancre dans WordPress.

Et maintenant vous allez me demander mais c’est quoi une ancre WordPress.

Pour faire court, cela revient à faire un lien vers un endroit précis de la page.

C’est quoi une ancre ?

L’expression « Liens d’ancrage html » dans le Web moderne fait généralement référence à la création d’un lien vers une section spécifique d’une page, mais ce n’est pas tout à fait exact.

Un lien d’ancrage est un type de lien sur la page qui vous amène à un endroit spécifique sur cette même page. Il permet aux utilisateurs d’accéder rapidement à la section qui les intéresse le plus.

Les liens d’ancrage sont couramment utilisés dans les articles plus longs comme table des matières ou menu, ce qui permet aux utilisateurs de passer rapidement aux sections qu’ils souhaitent lire.

Pourquoi créer une ancre ?

Un utilisateur moyen passe moins de quelques secondes avant de décider s’il souhaite rester ou quitter votre site Web. Vous n’avez que ces quelques secondes pour convaincre les utilisateurs de rester.

La meilleure façon d’y parvenir est de les aider à voir rapidement les informations qu’ils recherchent.

Les liens d’ancrage facilitent la tâche en permettant aux utilisateurs de sauter le reste du contenu et d’accéder directement à la partie qui les intéresse. Cela améliore l’expérience utilisateur et vous aide à gagner de nouveaux clients / lecteurs.

Comment créer une ancre dans WordPress manuellement ?

Si vous souhaitez simplement ajouter une ancre dans WordPress dans votre article, vous pouvez facilement le faire manuellement.

Fondamentalement, vous devez ajouter deux choses pour qu’un texte d’ancrage fonctionne comme prévu.

  • Créez un lien d’ancrage avec un signe # avant le texte d’ancrage.
  • Ajoutez l’attribut id au texte où vous voulez que l’utilisateur soit emmené.

Commençons par la partie lien d’ancrage.

Étape 1. Création d’un lien ancre dans WordPress

Vous devez d’abord sélectionner le texte que vous souhaitez lier, puis cliquer sur le bouton Insérer un lien dans l’éditeur WordPress Gutenberg.

comment créer une ancre wordpress
Sélectionner le texte et ajoutez un lien ancre

Cela fera apparaître la fenêtre contextuelle d’insertion de lien où vous ajoutez généralement l’URL ou recherchez un article ou une page à lier.

Cependant, pour un lien d’ancre, il vous suffit d’utiliser le hashtag # comme préfixe et de saisir les mots-clés de la section à laquelle vous souhaitez que l’utilisateur accède.

faire un lien vers un endroit précis de la page
Créer le lien ancre en ajoutant un # devant

Après cela, cliquez sur le bouton Entrée pour créer le lien.

Quelques conseils utiles pour choisir le texte à utiliser comme lien # d’ancre :

  • Utilisez les mots-clés liés à la section vers laquelle vous créez un lien.
  • Ne rendez pas votre lien d’ancrage inutilement long ou complexe.
  • Utilisez des tirets pour séparer les mots et les rendre plus lisibles.
  • Vous pouvez utiliser des majuscules dans le texte d’ancrage pour le rendre plus lisible. Par exemple: #Creer-Une-Ancre-Wordpress.

Une fois le lien ajouté, vous pourrez voir le lien que vous avez créé dans l’éditeur. Cependant, cliquer sur le lien ne fera rien.

C’est parce que les navigateurs ne peuvent pas trouver le lien d’ancrage en tant qu’ID.

Corrigeons ce problème en pointant les navigateurs vers la zone, la section ou le texte que vous souhaitez afficher lorsque les utilisateurs cliquent sur le lien d’ancrage.

Étape 2. Ajoutez l’attribut ID à la section liée

Dans l’éditeur de contenu, faites défiler jusqu’à la section vers laquelle vous souhaitez que l’utilisateur accède lorsqu’il clique sur le lien d’ancre. Habituellement, c’est un titre pour une nouvelle section.

Ensuite, cliquez pour sélectionner le bloc, puis dans les paramètres du bloc, cliquez sur l’onglet Avancé pour le développer. Vous pouvez simplement cliquer sur l’onglet «Avancé» sous les paramètres du bloc d’en-tête.

Ajoutez l’ancre html

Après cela, vous devez ajouter le même texte que celui que vous avez ajouté comme lien d’ancrage sous le champ « Ancre HTML ». Assurez-vous d’ajouter le texte sans le préfixe #.

Vous pouvez maintenant enregistrer votre message et voir votre lien d’ancrage en action en cliquant sur l’onglet d’aperçu.

Que faire si la section que vous souhaitez afficher n’est pas un titre mais simplement un paragraphe normal ou tout autre bloc ?

Dans ce cas, vous devez cliquer sur le menu à trois points des paramètres de bloc et sélectionner «Modifier en HTML».

ajouter un attribut id manuellement en html
Mettez-vous dans le bloc concerné > Cliquez sur les 3 petits points > Sélectionnez « Modifier en html »

Cela vous permettra de modifier le code HTML de ce bloc particulier. Vous devez rechercher la balise HTML de l’élément vers lequel vous souhaitez pointer. Par exemple, <p> s’il s’agit d’un paragraphe, ou <table> s’il s’agit d’un tableau, et ainsi de suite.

lien d'ancrage en html
Code HTML du paragraphe sans attribut

Maintenant, vous devez ajouter votre ancre en tant qu’attribut ID à cette balise, comme avec le code suivant :

lien d'ancrage en html
Ajouter l’attribut id comme ci-dessus

Vous verrez maintenant un message indiquant que ce bloc contient du contenu inattendu ou non valide. Vous devez cliquer sur « Convertir en HTML » pour conserver les modifications que vous avez apportées.

ajouter une ancre wordpress

Maintenant, dans les 2 cas, vous devriez pouvoir cliquer sur votre lien et cela vous amènera directement au titre ou paragraphe voulu.

Comment créer une ancre dans WordPress avec un plugin ?

Sinon il existe une manière beaucoup plus simple de créer systématiquement et automatiquement des liens d’ancres dans WordPress.

Cette méthode convient aux blogueurs qui publient régulièrement des articles longs et doivent créer une table des matières avec des liens d’ancrage.

Pour cela vous pouvez utiliser un plugin WordPress qui crée automatiquement un menu avec des ancres.

Vous avez dû remarquer que j’avais une table des matières au-dessus de mes articles longs, comme ceci :

Exemple de table des matières au-dessus d’un article

La première chose à faire est d’installer et d’activer le plugin Easy Table of Contents.

Ce plugin vous permet de générer automatiquement une table des matières avec des liens d’ancre. Il utilise des en-têtes pour deviner les sections de contenu et vous pouvez le personnaliser entièrement pour répondre à vos besoins.

Lors de l’activation, accédez simplement à la page des Paramètres « Table des matières » pour configurer les paramètres du plugin.

réglages du plugin Easy Table of Contents
Allez dans les paramètres de réglages du plugin Easy Table of Contents
Réglages du plugin Easy Table of Contents

Tout d’abord, vous devez l’activer pour les types de publication auxquels vous souhaitez ajouter une table des matières.

Par défaut, le plugin est activé pour les pages, mais vous pouvez également l’activer pour vos articles.

Vous pouvez également activer l’option d’insertion automatique. Cela permet au plugin de générer automatiquement la table des matières pour tous les articles, y compris les articles plus anciens qui correspondent aux critères.

Si vous souhaitez uniquement générer automatiquement une table des matières pour des articles spécifiques, vous pouvez laisser cette option décochée.

Ensuite, faites défiler un peu vers le bas pour sélectionner où vous souhaitez afficher la table des matières et quand vous voulez qu’elle soit déclenchée.

réglages du plugin Easy table of Contents

Vous pouvez consulter d’autres paramètres avancés sur la page et les modifier si nécessaire.

N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour enregistrer vos paramètres.

Maintenant le plugin affichera automatiquement une table des matières avant le premier titre de l’article.

Vous avez également beaucoup d’options de personnalisation de la mise en forme de la table des matières à votre disposition (couleurs, typographies, encadrement, etc.), que je vous laisse découvrir.

Si vous éprouvez des difficultés sur la personnalisation de l’apparence de votre table des matières, vous pouvez me laissez un message en commentaires pour me posez des questions ou me demander un article dédié sur le sujet 😉

Si vous souhaitez générer ou désactiver manuellement une table des matières pour des articles spécifiques, vous devez aller dans l’article en question et le modifier.

Dans WordPress, sur l’écran de modification des articles, faites défiler tout en bas, jusqu’à l’onglet «Table of Contents» sous l’éditeur. Le mien se trouve sous l’onglet Yoast SEO par exemple.

faire un lien vers un endroit précis de la page
Onglet de réglages à la fin d’un article

À cet endroit, vous pouvez cocher l’option «Désactiver l’insertion automatique de la table des matières». Ou sélectionner les titres que vous souhaitez inclure comme liens d’ancre si vous souhaitez une configuration différente de la configuration générale.

Vous pouvez maintenant enregistrer vos modifications et prévisualiser votre article. Le plugin affichera automatiquement une liste de liens d’ancre comme sommaire de votre article.

J’espère que cet article vous a aidé à apprendre comment facilement faire un lien vers un endroit précis de votre article.

S’il y a des points qui ne sont pas clairs, n’hésitez pas à me poser des questions en commentaires. Je me ferai un plaisir de vous aider 😊

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *