Ancre WordPress ~ Le tutoriel simple & complet

Photo de profil de Cédric Chevillard

Besoin d’un conseil pour votre site internet ?

Expert Elementor

En tant qu'expert en Elementor, je propose mon aide pour optimiser la conception, la personnalisation et la performance de votre site web avec ce plugin.

Lorsqu’il s’agit d’améliorer l’expérience utilisateur sur votre site WordPress, la création d’ancres, ou liens d’ancrage, est une stratégie souvent négligée mais incroyablement efficace.

Les ancres permettent aux visiteurs de naviguer facilement à travers votre contenu, en les dirigeant directement vers les sections pertinentes d’une page.

Que vous gériez un blog, un site de commerce électronique ou une plateforme d’information, comprendre et utiliser les liens d’ancrage peut considérablement améliorer la navigation et l’accessibilité de votre site. Vous pouvez intégrer cette pratique dès la création de votre site internet.

Dans cet article, nous allons explorer en détail ce qu’est une ancre, les bénéfices de leur utilisation sur WordPress, et comment les créer à l’aide de différents outils et éditeurs disponibles sur ce CMS.

Que vous soyez un débutant ou un utilisateur avancé de WordPress, ces conseils pratiques vous aideront à optimiser votre site pour une meilleure expérience utilisateur et un SEO amélioré.

Qu’est ce qu’une ancre (ou lien d’ancrage) ?

Une ancre, aussi appelée lien d’ancrage, est un élément essentiel dans le monde du web.

Il s’agit d’un type de lien hypertexte qui permet aux utilisateurs de naviguer directement vers une section spécifique d’une page web.

Contrairement aux liens traditionnels qui dirigent vers une nouvelle page, les ancres mènent à une position précise sur la même page ou une autre page, facilitant ainsi une navigation fluide et rapide.

Techniquement, une ancre est définie par un identifiant unique (ID) attribué à un élément HTML sur la page. Lorsqu’un utilisateur clique sur un lien d’ancrage, le navigateur défile automatiquement jusqu’à l’élément avec cet ID.

Voici un exemple simple en HTML :

	
	<!-- Section cible avec l'ID "section1" -->
    <h2 id="section1">Titre de la Section 1</h2>
    <p>Contenu de la section 1...</p>

    <!-- Lien d'ancrage pointant vers la section cible -->
    <a href="#section1">Aller à la Section 1</a>

Dans cet exemple, cliquer sur le lien « Aller à la Section 1 » fera défiler la page jusqu’à l’élément avec l’ID « section1 ».

En parlant d’optimisation HTML, si vous souhaitez éviter les coupures de phrases sur votre site internet, j’ai rédigé un article sur les espaces insécables en HTML. N’hésitez pas à y jeter un coup d’œil pour améliorer vos textes.

Bénéfices à créer des ancres dans WordPress ?

L’intégration de liens d’ancrage dans votre site WordPress offre de nombreux avantages tant pour l’utilisateur que pour le référencement de votre site.

Amélioration de l’expérience utilisateur

  1. Navigation facilitée :
    Les liens d’ancrage permettent aux visiteurs de naviguer rapidement et facilement vers les sections spécifiques d’une page sans avoir à faire défiler manuellement de longues portions de contenu.
  2. Temps de visite prolongé :
    En rendant la navigation plus intuitive et agréable, les ancres peuvent inciter les visiteurs à passer plus de temps sur votre site. Un temps de visite prolongé est souvent un indicateur d’un contenu de qualité et d’une expérience utilisateur positive.

Optimisation du référencement (SEO)

  1. Meilleure structure de contenu :
    Les moteurs de recherche apprécient les sites bien structurés. L’utilisation d’ancres contribue à une meilleure organisation du contenu, facilitant ainsi l’indexation par les moteurs de recherche et évitant de voir du contenu exploré mais non indexé.
  2. Augmentation du nombre de liens internes :
    Les ancres créent des liens internes qui aident les moteurs de recherche à comprendre la structure et la hiérarchie de votre contenu. Cela peut également répartir l’autorité des pages de manière plus efficace à travers votre site, renforçant ainsi votre SEO global.

Accès rapide à l’information

  1. Tables des matières interactives :
    Les ancres WordPress sont idéales pour créer des tables des matières interactives. Elles permettent aux utilisateurs de cliquer sur un sujet spécifique et d’être redirigés immédiatement à la section correspondante. Par exemple, dans cet article, le sommaire utilise des ancres pour diriger vers les différentes sections.
  2. Réponses rapides dans les sections FAQ :
    Dans une page de FAQ, les liens d’ancrage permettent aux visiteurs de trouver rapidement les réponses aux questions spécifiques sans avoir à parcourir l’intégralité du contenu.

Meilleure accessibilité

  1. Compatibilité avec les lecteurs d’écran :
    Les ancres aident les utilisateurs qui utilisent des lecteurs d’écran à naviguer plus facilement à travers le contenu. Les lecteurs d’écran peuvent reconnaître les liens d’ancrage et fournir des moyens rapides pour accéder à différentes sections de la page.
  2. Navigation clavier améliorée :
    Pour les utilisateurs qui naviguent principalement avec un clavier, les ancres permettent de sauter rapidement entre les sections de la page, améliorant ainsi l’accessibilité générale du site.

Engagement et interaction accrus

  1. Interactivité du contenu :
    En utilisant des ancres, vous pouvez rendre votre contenu plus interactif et engageant. Par exemple, vous pouvez créer des boutons ou des liens qui mènent à des sections spécifiques de la page, incitant les utilisateurs à explorer davantage.
  2. Meilleure gestion des appels à l’action (CTA) :
    Les ancres peuvent être utilisées pour diriger les utilisateurs vers des appels à l’action stratégiques placés à différentes sections de votre page, augmentant ainsi les chances de conversion.

Quand et ou créer des liens d’ancrage ?

Créer des liens d’ancrage peut grandement améliorer la navigation et l’expérience utilisateur sur votre site WordPress.

Voici des situations spécifiques où il est particulièrement avantageux d’utiliser des liens d’ancrage dans WordPress :

  • Articles longs : Utilisez des ancres pour permettre aux lecteurs de sauter directement aux sections qui les intéressent dans des articles de blog ou des pages de contenu longs.
  • Pages de FAQ : Les liens d’ancrage facilitent la navigation rapide vers les réponses aux questions spécifiques, rendant la page plus conviviale.
  • Tables des matières : Pour des guides ou des manuels détaillés, une table des matières avec des ancres permet aux utilisateurs de naviguer directement vers les chapitres ou sections pertinents.
  • Sections de service ou de produit : Sur des pages décrivant différents services ou produits, les ancres permettent aux utilisateurs de trouver rapidement les informations sur un service ou produit particulier.
  • Pages de destination (landing pages) : Sur une page de destination, les ancres peuvent guider les utilisateurs vers des sections clés comme les avantages, témoignages, et appels à l’action.
  • Menus de navigation : Dans les sites one-page, les ancres dans le menu de navigation permettent de sauter directement à des sections spécifiques de la même page, améliorant ainsi la fluidité de la navigation.
  • Résumé ou avant-propos : Dans des articles scientifiques, des essais ou des rapports, les ancres peuvent être utilisées pour naviguer entre le résumé, l’introduction, les chapitres et la conclusion.
  • Tutoriels ou guides étape par étape : Pour les articles instructifs, les ancres permettent de naviguer facilement entre les différentes étapes ou sections du guide.
  • Pages d’événements : Pour des événements ou conférences, utilisez des ancres pour naviguer entre les différentes parties de la page telles que l’agenda, les orateurs, et les inscriptions.

Comment créer des ancres avec Gutenberg ?

Gutenberg, l’éditeur par défaut de WordPress, rend la création de liens d’ancrage simple et intuitive. Voici les étapes détaillées pour ajouter des ancres à votre contenu en utilisant Gutenberg :

Étape 1 : Ouvrir l’éditeur Gutenberg

  • Accédez à votre tableau de bord WordPress.
  • Créez une nouvelle page/article ou ouvrez une page/article existant avec l’éditeur Gutenberg.

Étape 2 : Sélectionner le bloc de contenu

  • Choisissez le bloc de contenu (par exemple, un titre ou un paragraphe) auquel vous souhaitez ajouter une ancre.
  • Cliquez sur le bloc pour le sélectionner.

Étape 3 : Ajouter une ancre

  1. Accéder aux paramètres du bloc :
    Dans la barre latérale droite, sous l’onglet « Bloc », vous trouverez les options de paramétrage du bloc sélectionné.
  2. Ajouter un ID HTML :
    • Faites défiler jusqu’à trouver la section « Avancé ».
    • Dans le champ « Ancre HTML » (HTML Anchor), entrez un identifiant unique pour le bloc. Par exemple, si vous souhaitez créer une ancre pour un titre de section sur les avantages, vous pourriez entrer « avantages ».
  3. Valider l’ancre :
    Assurez-vous que l’ID est unique et ne contient pas d’espaces ni de caractères spéciaux (utilisez des tirets si nécessaire, par exemple « avantages-de-l-application »).
Interface Gutenberg dans WordPress avec l'ajout d'une ancre au niveau d'un des titres.
Ici, j’ai ajouté l’ancre « mon-ancre » au titre « Mon ancre ».

Étape 4 : Créer le lien d’ancrage

  1. Sélectionner le texte pour le lien :
    Revenez à l’endroit où vous souhaitez insérer le lien qui dirigera vers votre ancre. Il peut s’agir d’un autre bloc ou d’une autre section de la même page.
  2. Insérer le lien :
    • Sélectionnez le texte que vous souhaitez transformer en lien.
    • Cliquez sur l’icône de lien dans la barre d’outils du bloc (elle ressemble à un maillon de chaîne).
    • Dans le champ URL, entrez le symbole « # » suivi de l’ID de l’ancre (par exemple, « #avantages »).
  3. Appliquer le lien :
    Cliquez sur l’icône « Appliquer » (généralement une flèche ou une coche) pour créer le lien. Puis enregistrez votre page ou article.
Interface de l'éditeur Gutenberg dans WordPress dans laquelle il y a une ancre WordPress du texte "commodo orci" vers le titre "Mon ancre"
ici, j’ai ajouté un lien vers le titre « Mon ancre » sur le texte « commodo orci » en y mettant « #mon-ancre ».

Comment créer des ancres avec le Classic Editor ?

Si vous n’êtes pas un adepte du nouvel éditeur Gutenberg et que vous préférez encore utiliser l’ancien Classic Editor, ne vous inquiétez pas, il est tout à fait possible de créer des ancres avec cet éditeur de WordPress également.

Il est également possible de faire appel à un webmaster WordPress pour vous accompagner dans la transition vers un site WordPress utilisant Gutenberg. Sinon voici un guide détaillé pour ajouter des ancres à votre contenu en utilisant le Classic Editor :

Étape 1 : Ouvrir l’éditeur Classic

  • Accédez à votre tableau de bord WordPress.
  • Créez une nouvelle page/article ou ouvrez une page/article existant avec le Classic Editor.

Étape 2 : Ajouter une ancre à une section

  1. Accéder à l’éditeur HTML :
    Cliquez sur l’onglet « Texte » en haut à droite de l’éditeur pour passer à la vue HTML.
  2. Insérer l’ancre :
    • Repérez l’endroit où vous souhaitez ajouter l’ancre. Par exemple, si vous voulez ajouter une ancre à un titre de section, localisez le code HTML de ce titre.
    • Ajoutez l’attribut id à l’élément HTML correspondant. Par exemple, pour ajouter une ancre à un titre <h2>, modifiez le code comme suit : <h2 id="avantages">Les avantages de notre produit</h2>
    • Assurez-vous que l’ID est unique et ne contient pas d’espaces ni de caractères spéciaux (utilisez des tirets si nécessaire, par exemple « avantages-produit »).
Interface du Classic Editor de WordPress avec l'ajout d'une ancre au niveau d'un des titres.
Ici, j’ai ajouté l’ancre « mon-ancre » au H2 « Mon ancre »

Étape 3 : Créer le lien d’ancrage

  1. Revenir à l’éditeur Visuel :
    • Cliquez sur l’onglet « Visuel » en haut à droite pour revenir à l’éditeur visuel.
  2. Sélectionner le texte pour le lien :
    • Sélectionnez le texte que vous souhaitez transformer en lien d’ancrage.
  3. Insérer le lien :
    • Cliquez sur l’icône de lien dans la barre d’outils (elle ressemble à un maillon de chaîne).
    • Dans le champ URL, entrez le symbole « # » suivi de l’ID de l’ancre que vous avez ajouté (par exemple, « #avantages »).
    • Cliquez sur le bouton « Ajouter un lien » pour créer le lien.
Interface du Classic Editor de WordPress dans laquelle il y a une ancre WordPress du texte "commodo orci" vers le H2 "Mon ancre"
ici, j’ai ajouté un lien vers le H2 « Mon ancre » sur le texte « commodo orci » en y mettant « #mon-ancre ».

Comment créer des ancres avec l’extension WordPress Elementor ?

Elementor est un constructeur de pages populaire pour WordPress et utilisateur par des experts Elementor, offrant une interface visuelle intuitive qui facilite la création et la gestion de contenu.

Il existe deux méthodes principales pour ajouter des ancres avec Elementor : en utilisant le module « Ancre de menu » et en ajoutant un ID directement à un élément.

Note : Pour l’exemple, je vais vous montrer comment utiliser un lien cliquable sur du texte, mais il est tout à fait possible d’obtenir le même résultat en utilisant un module bouton.

Méthode 1 : Utiliser le module « Ancre de menu »

  1. Ouvrir Elementor :
    • Accédez à votre tableau de bord WordPress.
    • Créez une nouvelle page ou éditez une page existante avec Elementor en cliquant sur le bouton « Modifier avec Elementor ».
  2. Ajouter le module Ancre de menu :
    • Dans le panneau de modules d’Elementor (à gauche), recherchez le module « Ancre de menu ».
    • Faites glisser et déposez le module « Ancre de menu » à l’endroit où vous souhaitez créer l’ancre sur votre page. Cela peut être au-dessus d’un titre, d’un paragraphe ou de tout autre élément.
  3. Configurer l’ancre :
    Dans le panneau de configuration de l’ancre, sous « Nom de l’ancre », entrez un identifiant unique. Par exemple, si vous souhaitez créer une ancre pour une section de témoignages, vous pourriez entrer « temoignages ».
Interface de l'extension WordPress Elementor avec le focus sur le module "Ancre de menu"
Ajout du module « Ancre de menu » pour créer mon ancre.
  1. Créer le lien d’ancrage :
    • Sélectionnez le texte que vous souhaitez transformer en lien.
    • Cliquez sur l’icône de lien dans la barre d’outils contextuelle qui apparaît.
    • Dans le champ URL, entrez le symbole « # » suivi du nom de l’ancre que vous avez configurée (par exemple, « #temoignages »).
    • Cliquez sur l’icône « Appliquer » pour créer le lien.
Ajout d'un lien dans le module éditeur de texte d'Elementor vers une ancre précise
Exemple de lien cliquable vers le module « Ancre de menu ».

Méthode 2 : Ajouter un ID directement à un élément

Sur le principe, c’est la même chose, sauf qu’au lieu d’insérer le module « Ancre de menu », on va directement interagir avec le module souhaité où on veut faire l’ancre.

  1. Sélectionner l’élément à ancrer :
    Cliquez sur l’élément auquel vous souhaitez ajouter une ancre (par exemple, une section, un en-tête ou une colonne).
  2. Ajouter un ID :
    • Dans le panneau de configuration de l’élément, allez dans l’onglet « Avancé ».
    • Dans le champ « ID CSS », entrez un identifiant unique pour l’élément. Par exemple, si vous souhaitez créer une ancre pour une section de services, vous pourriez entrer « services ».
Ajout d"un id CSS à un module Titre d'Elementor
Exemple de lien cliquable vers le module « Titre ».

Avez-vous un problème avec votre site WordPress créé avec Elementor, ou souhaitez-vous le faire évoluer ?

Comment créer des ancres avec le thème WordPress Divi ?

Le thème Divi de Elegant Themes est un des constructeurs de pages les plus puissants et populaires pour WordPress.

Voici comment vous pouvez créer des ancres avec Divi, en utilisant le constructeur de pages Divi.

Étape 1 : Ouvrir Divi Builder

  • Accédez à votre tableau de bord WordPress.
  • Créez une nouvelle page ou éditez une page existante avec Divi Builder en cliquant sur le bouton « Utiliser Divi Builder ».

Étape 2 : Ajouter une ancre à une section

  1. Sélectionner la section :
    • Cliquez sur la section, la rangée ou le module où vous souhaitez ajouter une ancre.
    • Cela ouvre les paramètres de cette section.
  2. Accéder aux paramètres avancés :
    • Cliquez sur l’icône de paramètres (roue dentée) pour ouvrir les paramètres de la section.
    • Allez à l’onglet « Avancé ».
  3. Ajouter un ID CSS :
    • Dans le champ « ID CSS », entrez un identifiant unique pour l’ancre. Par exemple, si vous souhaitez créer une ancre pour une section de témoignages, vous pourriez entrer « temoignages ».
    • Enregistrez les paramètres en cliquant sur le bouton de validation (coche verte).
Ajout d'une ancre sur un module de Divi
Ajout de l’ancre sur le titre à travers Divi.

Étape 3 : Créer le lien d’ancrage

  1. Sélectionner le texte pour le lien :
    Revenez à l’endroit où vous souhaitez insérer le lien qui dirigera vers votre ancre. Cela peut être dans le même module ou une autre section.
  2. Insérer le lien :
    • Sélectionnez le texte que vous souhaitez transformer en lien.
    • Cliquez sur l’icône de lien dans la barre d’outils de texte (elle ressemble à un maillon de chaîne).
    • Dans le champ URL, entrez le symbole « # » suivi de l’ID CSS que vous avez configuré (par exemple, « #temoignages »).
    • Cliquez sur le bouton « OK » pour créer le lien.
Ajout d'un lien vers une ancre à travers le thème WordPress Divi
Ajout du lien vers l’ancre créée.

Un problème avec votre WordPress avec Divi ?

Comment créer des ancres vers des autres pages/articles WordPress ?

Maintenant que vous avez compris comment créer des ancres dans la même page, vous pouvez également rediriger vers ces ancres depuis d’autres pages.

Cela améliore la navigation sur votre site, permet aux utilisateurs d’accéder rapidement aux informations pertinentes et rend votre contenu plus interactif.

C’est tout simple.

Au lieu d’utiliser seulement #mon-ancre, vous devez inclure l’URL complète de la page suivie du symbole # et de l’ID de l’ancre.

Par exemple, si vous avez une ancre avec l’ID « section-contact » sur la page https://votresite.com/page-cible, le lien complet sera : https://votresite.com/page-cible#section-contact.

En utilisant cette méthode, vous pouvez créer des liens depuis n’importe quelle page ou article de votre site WordPress vers des sections spécifiques d’autres pages, améliorant ainsi l’expérience utilisateur et la navigation globale de votre site.

Comment créer des ancres dans le menu de WordPress ?

Dernière chose à voir sur les ancres : la possibilité de les ajouter dans le menu de WordPress.

Ajouter des ancres dans votre menu de navigation permet aux utilisateurs d’accéder directement à des sections spécifiques de vos pages.

Voici comment procéder pour intégrer des ancres dans votre menu WordPress.

Étape 1 : Créer des ancres sur votre page

Avant d’ajouter des ancres dans le menu de WordPress, vous devez d’abord créer des ancres sur la page cible. Utilisez l’éditeur Gutenberg, le Classic Editor, Elementor ou Divi pour ajouter des identifiants uniques (IDs) aux sections de votre page.

Étape 2 : Ajouter des ancres au menu de navigation

  1. Accéder à la gestion des menus :
    • Connectez-vous à votre tableau de bord WordPress.
    • Allez dans « Apparence » > « Menus ».
  2. Ajouter des liens personnalisés :
    • Dans la colonne de gauche, cliquez sur « Liens personnalisés ».
    • Dans le champ « URL », entrez l’URL complète de la page suivie du symbole # et de l’ID de l’ancre. Par exemple : https://votresite.com/page-cible#section-contact.
    • Dans le champ « Texte du lien », entrez le texte que vous souhaitez voir apparaître dans le menu (par exemple, « Contactez-nous »).
    • Cliquez sur « Ajouter au menu ».
  3. Organiser le menu :
    • Faites glisser le nouvel élément de menu à l’emplacement souhaité dans la structure de votre menu.
    • Cliquez sur « Enregistrer le menu » pour sauvegarder vos modifications.

Nous venons de faire un tour complet sur tout ce que vous devez savoir sur les ancres dans WordPress.

Des bases de la création d’ancres dans une même page à l’intégration d’ancres dans le menu de navigation, vous avez maintenant toutes les clés en main pour améliorer la navigation et l’expérience utilisateur de votre site.

Si vous rencontrez des problèmes ou si vous avez des questions, n’hésitez pas à me contacter. Je suis là pour vous aider à optimiser votre site WordPress et à tirer le meilleur parti des fonctionnalités d’ancrage.

Mes autres articles

Infographie de l'article "espace insécable html"

Espace insécable en html

Aujourd’hui, nous allons explorer un sujet simple mais crucial en HTML : l’espace insécable. Que vous soyez débutant ou expert, comprendre comment utiliser les espaces...

Interface de WP Migrate, extension WordPress pour migrer un site WordPress

Migrer un site WordPress avec WP Migrate ~ Le guide ultime

Migrer un site WordPress peut sembler une tâche ardue, mais il y a de nombreuses raisons pour lesquelles vous pourriez envisager cette opération. Voici quelques-unes...

Infographie de l'article "Fil d'Arianne WordPress"

Fil d’Ariane WordPress

Vous vous êtes sûrement demandé comment ajouter un fil d’Ariane sur votre site WordPress, n’est-ce pas ? Je vais vous guider pas à pas pour...

Une question / un problème ? 👇