Vous avez déjà cliqué sur un lien et atterri exactement là où vous vouliez, au milieu d'une page ? C'est un lien d'ancrage en action. Il vous amène directement à la partie qui compte, sans avoir à faire défiler.
Lorsque j'ai commencé à créer des articles de blog et des tutoriels plus longs dans WordPress, j'ai rapidement vu le besoin de liens d'ancrage. Les lecteurs survolaient, abandonnaient ou manquaient complètement des sections. L'ajout d'une simple table des matières avec des liens d'ancrage a changé cela. Cela a facilité la navigation et a aidé certains articles à afficher des liens « aller à » directement dans les résultats Google.
Dans ce guide, je vais vous montrer exactement comment créer des liens d'ancrage dans WordPress. Vous apprendrez comment ils fonctionnent, où les ajouter et comment ils peuvent aider au référencement et à l'expérience utilisateur.
Table des matières
- Anchor Link Methods Compared
- How Do I Add Anchor Links in the WordPress Block Editor?
- Can I Create Anchor Links in the Classic WordPress Editor?
- Comment ajouter manuellement des liens d'ancrage en HTML
- Comment ajouter automatiquement des liens d'ancrage avec un plugin WordPress
- Ajouter des liens d'ancrage aux pages de destination
Comparaison des méthodes de liens d'ancrage
Voici un aperçu rapide des différentes façons d'ajouter des liens d'ancrage dans WordPress, en fonction de votre éditeur ou de votre configuration.
| Méthode | Idéal pour | Besoin de code ? | Besoin d'un plugin ? |
|---|---|---|---|
| Éditeur de blocs | Sites WordPress modernes | Non | Non |
| Éditeur classique | Anciennes installations WordPress | HTML de base | Non |
| HTML manuel | Mises en page personnalisées, pages de destination | Oui | Non |
| Plugin (par ex. Easy TOC) | Tables des matières automatiques | Non | Oui |
| Constructeur SeedProd | Pages de destination et thèmes | Non | Non |
Qu'est-ce qu'un lien d'ancrage dans WordPress ?
Un lien d'ancrage est un type de lien interne qui permet aux utilisateurs de sauter vers une section spécifique de la même page. Il utilise un dièse (#) suivi d'un ID pour cibler cet endroit dans le HTML.
Comme vous pouvez le voir dans l'exemple ci-dessus, cliquer sur un lien d'ancrage vous amène instantanément à ce sujet sur la page.
Quand utiliser des liens d'ancrage ?
Il ne faut que quelques secondes aux utilisateurs pour décider de rester ou de quitter votre site Web. C'est à vous d'utiliser ces quelques secondes pour les convaincre de rester et d'interagir avec votre contenu.
La meilleure façon de garder les lecteurs engagés est de les aider à trouver rapidement les informations dont ils ont besoin. Vous pouvez le faire en créant des liens d'ancrage afin que les utilisateurs puissent sauter le reste de votre contenu et aller directement aux sections qui les intéressent. C'est un excellent moyen d'améliorer l'expérience utilisateur et de gagner plus de lecteurs.
Comme nous l'avons mentionné précédemment, les liens d'ancrage peuvent également améliorer votre référencement WordPress. Google affiche souvent les liens d'ancrage dans les résultats de recherche comme un lien « aller à » afin que les lecteurs puissent accéder directement à une section particulière à partir de la page de résultats.
Parfois, Google affiche également plusieurs liens d'une seule page comme liens « aller à ». Ces liens augmentent prouvé le taux de clics dans les résultats de recherche, ce qui signifie plus de trafic pour votre site Web.
Alors, comment créer un lien pour sauter vers une partie spécifique d'une page dans WordPress ? Découvrons-le !
Comment ajouter des liens d'ancrage dans l'éditeur de blocs WordPress ?
La création de liens d'ancrage dans l'éditeur de blocs WordPress est assez simple. Vous n'avez besoin que de 2 choses pour que vos liens d'ancrage fonctionnent :
- Créez un lien avec le signe # juste avant le texte d'ancrage
- Ajoutez l'attribut ID au texte vers lequel vous souhaitez que l'utilisateur saute
Suivez les instructions ci-dessous pour apprendre à le faire vous-même.
Étape 1 : Créez votre lien d'ancrage
La première étape consiste à surligner le texte auquel vous souhaitez ajouter votre lien d'ancrage. Cliquez ensuite sur l'icône d'insertion de lien dans l'éditeur de blocs WordPress.
Cliquer sur l'icône affiche la fenêtre contextuelle d'insertion de lien où, habituellement, vous ajouteriez un lien vers une page ou rechercheriez une page à lier.
Pourtant, pour les liens d'ancrage, vous devez entrer le signe # et les mots-clés de la section vers laquelle vous souhaitez que les utilisateurs sautent.
Les mots-clés que vous utilisez doivent :
- Être liés à la section vers laquelle vous faites un lien
- Ne pas être trop longs ou compliqués
- Utiliser la capitalisation pour rendre le texte d'ancrage plus lisible
- Inclure des tirets pour séparer les mots et les rendre plus faciles à lire
Une fois que vous avez entré les mots-clés de votre lien d'ancrage, appuyez sur Entrée pour créer le lien. Vous pouvez ensuite voir le lien que vous avez créé dans l'éditeur WordPress, mais cliquer dessus ne fera rien.
C'est parce qu'il n'y a pas d'ID connecté au lien d'ancrage, que votre navigateur recherche lorsque vous cliquez sur le lien.
Vous pouvez résoudre ce problème en ajoutant l'attribut ID à la zone de contenu vers laquelle vous souhaitez créer un lien, ce que nous allons explorer ensuite.
Étape 2 : Ajoutez l'attribut ID au texte lié
Dans votre éditeur de contenu WordPress, faites défiler jusqu'au contenu vers lequel vous souhaitez que les utilisateurs sautent lorsqu'ils cliquent sur votre lien d'ancrage. La section dont vous avez besoin est souvent un titre ou le début d'un nouveau paragraphe.
Maintenant, cliquez sur le bloc contenant la section vers laquelle vous souhaitez créer un lien et accédez aux Paramètres du bloc sur le côté droit de votre page.
Dans les paramètres du bloc, développez l'onglet Avancé et entrez les mêmes mots-clés que ceux que vous avez utilisés pour votre lien texte d'ancrage dans la boîte d'ancrage HTML. La seule différence est que vous n'aurez pas besoin du signe # au début.
Lorsque vous enregistrez votre article et que vous le prévisualisez, vous pouvez voir votre lien d'ancrage en action. Cliquez simplement dessus pour sauter vers le contenu que vous avez lié précédemment.
Si la zone de contenu vers laquelle vous souhaitez créer un lien n'est pas un titre mais un paragraphe ordinaire ou un morceau de texte, le processus est un peu différent.
Dans ce cas, cliquez sur le bloc pour afficher les paramètres du bloc et cliquez sur le menu à trois points pour révéler plus d'options.
À partir de là, sélectionnez l'option Modifier en HTML, ce qui vous permet de modifier tout le HTML de ce bloc de contenu entier.
Maintenant, vous devez trouver la balise HTML pour les informations que vous souhaitez pointer. Par exemple, recherchez <p> s'il s'agit d'un paragraphe, ou <table> s'il s'agit d'une table, etc.
Une fois que vous avez trouvé la balise, ajoutez vos mots-clés d'ancrage en tant qu'attribut id, similaire à l'exemple ci-dessous :
<p id="bali-hiking-adventures">
Après avoir ajouté vos mots-clés, vous pourriez voir un avis expliquant que le bloc contient du contenu invalide ou inattendu.
Cliquez donc sur le bouton Convertir en HTML pour enregistrer vos modifications.
Puis-je créer des liens d'ancrage dans l'éditeur classique de WordPress ?
Si vous utilisez toujours l’éditeur classique de WordPress, l’ajout d’un lien d’ancrage est légèrement différent. Suivez les étapes ci-dessous pour apprendre à créer des liens d’ancrage dans l’éditeur de contenu visuel classique de WordPress.
Étape 1 : Créez votre lien d'ancrage
Tout d’abord, mettez en surbrillance le texte auquel vous souhaitez créer un lien, puis cliquez sur le bouton Insérer un lien en haut de votre éditeur de contenu.
Ensuite, ajoutez vos mots-clés d’ancrage avec le préfixe #, suivi du texte auquel vous souhaitez lier.
Étape 2 : Ajoutez l'attribut ID au texte lié
L’étape suivante consiste à indiquer aux navigateurs la section du contenu vers laquelle vous souhaitez que les utilisateurs sautent lorsqu’ils cliquent sur le lien d’ancrage.
Pour ce faire, passez en mode Texte dans l’éditeur classique de WordPress, puis faites défiler jusqu’à la section que vous souhaitez afficher.
Ensuite, trouvez la balise HTML que votre lien d’ancrage doit cibler. Par exemple, <h2>, <h3>, <p>, etc.
Ajoutez maintenant l’attribut ID avec les mots-clés de vos liens d’ancrage sans le préfixe #. Voici un exemple de ce à quoi cela ressemblerait :
<h2 id="bali-hiking-adventures">
Vous pouvez maintenant enregistrer vos modifications et prévisualiser votre contenu pour voir le lien d’ancrage fonctionner.
Comment ajouter manuellement des liens d'ancrage en HTML
Si vous utilisez habituellement le mode Texte pour rédiger du contenu dans l’éditeur classique de WordPress, voici comment créer manuellement un lien d’ancrage en HTML.
Tout d’abord, créez un lien d’ancrage avec le préfixe # en utilisant la balise <a href=” “>, similaire à l’exemple ci-dessous :
<a href="#bali-hiking-adventures">Bali Hiking Adventures</a>
Faites ensuite défiler jusqu’à la section de contenu que vous souhaitez afficher lorsque les utilisateurs cliquent sur votre lien. Habituellement, la section est une balise H2 ou H3, mais il peut également s’agir d’un autre élément HTML, comme une simple balise de paragraphe <p>.
Une fois que vous avez trouvé la balise HTML, ajoutez l’attribut ID et le texte d’ancrage sans le préfixe # comme ceci :
<h2 id="bali-hiking-adventures">Bali Hiking Adventures</h2>
Vous pouvez maintenant enregistrer vos modifications et prévisualiser votre contenu pour tester votre lien d’ancrage.
Comment ajouter automatiquement des liens d'ancrage avec un plugin WordPress
Si vous publiez régulièrement des articles longs, vous pouvez gagner du temps en ajoutant automatiquement des liens d’ancrage à différentes rubriques de votre contenu et en créant une table des matières avec un plugin WordPress. Cela permet aux utilisateurs de trouver plus facilement les informations dont ils ont besoin et élimine la nécessité de créer chaque lien d’ancrage manuellement.
Pour ce faire, téléchargez le plugin Easy Table of Contents et installez-le et activez-le sur votre site Web WordPress. Si vous avez besoin d’aide pour cela, suivez ces instructions pour l’installation d’un plugin WordPress.
Le plugin utilise les rubriques de votre contenu pour deviner les sections auxquelles il faut lier, et vous pouvez entièrement personnaliser les paramètres en fonction de vos besoins.
Une fois que vous avez installé et activé le plugin, accédez à Paramètres » Table des matières pour configurer vos paramètres.
Activez ensuite le plugin pour les types de publication auxquels vous souhaitez ajouter des liens d’ancrage et désélectionnez les zones où vous ne souhaitez pas afficher de table des matières.
Vous pouvez également activer l’option d’insertion automatique. Cela permet au plugin de créer automatiquement une table des matières pour tous les types de contenu sélectionnés, y compris le contenu plus ancien.
Si vous souhaitez uniquement créer automatiquement une table des matières pour des articles spécifiques, laissez cette option désélectionnée.
Ensuite, faites défiler la page pour choisir où vous souhaitez afficher votre table des matières et quand vous souhaitez la déclencher.
Par exemple, vous pouvez afficher votre table des matières avant ou après votre premier titre et lorsqu'un certain nombre de titres sont présents dans votre article.
Plus bas sur la page, vous pouvez choisir un thème pour correspondre à la marque de votre site et examiner des paramètres plus avancés.
N'oubliez pas de cliquer sur le bouton Enregistrer les modifications pour conserver vos paramètres.
Si vous activez l'option d'insertion automatique, vous pouvez prévisualiser un article avec le bon nombre de titres pour voir votre table des matières en action.
Cependant, si vous souhaitez générer une table des matières manuellement, vous devrez modifier chaque article individuellement.
Pour ce faire, rendez-vous sur l'écran de modification de votre contenu et faites défiler jusqu'à l'onglet Table des matières sous l'éditeur.
À partir de là, cochez la case « insérer la table des matières » et sélectionnez les titres que vous souhaitez inclure comme liens d'ancrage.
Vous pouvez maintenant enregistrer vos modifications et prévisualiser votre article. Le plugin Easy Table of Contents affichera automatiquement une liste de liens d'ancrage comme table des matières.
Ajouter des liens d'ancrage aux pages de destination
Nous avons couvert plusieurs méthodes pour ajouter des liens d'ancrage à votre site WordPress, mais que faire si vous créez une page de destination ?
Heureusement, SeedProd, le meilleur constructeur de thèmes et de pages de destination WordPress, vous permet de créer facilement des liens d'ancrage.
Dans son éditeur visuel par glisser-déposer, vous pouvez utiliser le bloc pratique de liens d'ancrage pour lier une partie de votre page de destination à une autre. Si vous utilisez SeedProd pour créer un thème WordPress personnalisé, vous pouvez utiliser la même méthode que celle que nous allons vous montrer pour créer des liens d'ancrage n'importe où dans votre thème.
Faites simplement glisser le bloc Lien d'ancrage vers la partie de la page où vous souhaitez sauter et entrez un nom.
Ensuite, sélectionnez le texte de votre page de destination que vous souhaitez lier, ajoutez le nom du lien d'ancrage avec un hashtag au début, et cliquez sur enregistrer.
Maintenant, lorsque vous prévisualisez votre page et testez le lien, il sautera automatiquement à la bonne section.
Vous pouvez suivre ce guide étape par étape pour créer une page de destination dans WordPress si vous avez besoin d'aide pour commencer.
Et voilà !
Vous savez maintenant comment créer un lien d'ancrage dans WordPress. Ces petits liens peuvent sembler insignifiants, mais ils peuvent faire une grande différence. Meilleure expérience utilisateur, navigation plus rapide et même des liens « sauter vers » supplémentaires dans Google.
Besoin de plus de moyens pour améliorer l'utilisabilité et le référencement de votre site ? Consultez ces guides pratiques :
- Meilleurs plugins WordPress pour relooker votre site
- Meilleurs plugins de vote pour WordPress dont vous avez besoin
- Meilleurs outils sans code pour les sites Web WordPress
- Meilleurs plugins de mode maintenance pour WordPress
- Meilleurs plugins de bannière WordPress pour augmenter les prospects
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
J'ai un lien dans le pied de page (template), disons qu'il s'appelle « contact ». Cliquer dessus doit charger la page « à propos » et faire défiler jusqu'à la section contact. Comment faire ?
Salut Max. Pour ce faire, vous devriez lier la page « à propos » et ajouter l'ancre à l'URL du lien /about/#contact. J'espère que cela vous aide !
Bonjour ! J'ai ajouté le lien d'ancre et créé l'attribut id correctement (vérifié deux et trois fois), mais mon lien ne fonctionne tout simplement pas – il ne m'emmène nulle part. Je ne trouve aucun article sur les propositions de ce qui pourrait clocher ? Qu'est-ce que ça peut être ? Je vous jure que tout est configuré comme il faut. Est-ce qu'un plugin ou quelque chose dans mon thème pourrait l'empêcher ? Merci !
Bonjour Tuija,
Votre version de WordPress est-elle mise à jour vers la dernière version ? Vous pouvez également essayer de vous assurer que tous vos plugins et thèmes sont à jour. Si cela ne fonctionne pas, essayez de désactiver vos plugins et de les activer un par un pour voir s'il y a un conflit.
Bonjour
Je cherche une solution pour que l'ancre fonctionne avec le menu. La première page fonctionne et fait défiler vers l'endroit approprié. Cependant, lorsque je clique sur le lien avec l'ID d'ancre depuis, disons, la page Contactez-moi, cela ne fonctionne pas. J'ai constaté qu'il affiche MON_DOMAINE.com/contactez-moi/#ID_ancre au lieu de MON_DOMAINE.com/#ID_ancre
J'ai remplacé le menu par une URL complète telle que MON_DOMAINE.com/#ID_ancre. Cela a fonctionné, mais les boutons avec cette URL affichent toujours la couleur Active que j'ai définie pour les boutons actifs. De plus, sur le menu mobile, le menu lui-même ne se ferme pas.
L'URL complète fonctionne, mais comment résoudre le problème des boutons actifs et du menu qui ne se ferme pas sur mobile ?
Quelqu'un a-t-il une solution ? Merci
Bonjour Andrew, pouvez-vous contacter notre équipe de support https://www.seedprod.com/contact/ pour obtenir de l'aide sur ce problème, s'il vous plaît ? Ils sont beaucoup mieux équipés pour répondre aux questions plus techniques.