{"id":13177,"date":"2023-01-03T21:06:22","date_gmt":"2023-01-03T20:06:22","guid":{"rendered":"https:\/\/burorader.com\/comment-ajouter-un-lien-dancrage\/"},"modified":"2025-07-13T14:15:35","modified_gmt":"2025-07-13T12:15:35","slug":"comment-ajouter-un-lien-d-ancrage","status":"publish","type":"post","link":"https:\/\/burorader.com\/fr\/comment-ajouter-un-lien-d-ancrage\/","title":{"rendered":"Comment ajouter un lien d&rsquo;ancrage"},"content":{"rendered":"<p>Dans ce blog, vous pourrez lire ce qu&rsquo;est un lien d&rsquo;ancrage, pourquoi vous pouvez l&rsquo;utiliser et comment ajouter un lien d&rsquo;ancrage de diff\u00e9rentes mani\u00e8res.<\/p>\n<h2>Qu&rsquo;est-ce qu&rsquo;un lien d&rsquo;ancrage ?<\/h2>\n<p>Un lien d&rsquo;ancrage est un lien qui pointe vers un endroit de la m\u00eame page ou m\u00eame d&rsquo;une autre page. Tr\u00e8s utile lorsque vous avez une page avec beaucoup de texte ou avec une table des mati\u00e8res. Mais vous pouvez \u00e9galement cr\u00e9er un lien vers un formulaire ou un bouton, par exemple.<\/p>\n<h2>Pourquoi utiliser un lien d&rsquo;ancrage ?<\/h2>\n<p class=\"no-space\">Pourquoi utiliser un lien d&rsquo;ancrage ? Les liens d&rsquo;ancrage ont un certain nombre d&rsquo;<strong>avantages<\/strong> :<\/p>\n<ul>\n<li>Pour les pages contenant beaucoup de texte, les liens d&rsquo;ancrage offrent une meilleure <strong>exp\u00e9rience utilisateur<\/strong> et favorisent <strong>l&rsquo;accessibilit\u00e9<\/strong> d&rsquo;un site web. Les lecteurs peuvent aller directement \u00e0 la section qui les int\u00e9resse.<\/li>\n<li>Les liens d&rsquo;ancrage sont \u00e9galement tr\u00e8s utiles lorsque vous souhaitez \u00e9tablir un lien vers une partie particuli\u00e8re de votre page \u00e0 partir des m\u00e9dias sociaux ou dans un e-mail ou une newsletter, par exemple.<\/li>\n<li>Lorsque vous utilisez des liens d&rsquo;ancrage sous forme de table des mati\u00e8res, ils sont affich\u00e9s dans les r\u00e9sultats de recherche de Google. Pour cela, voir l&rsquo;exemple ci-dessous du r\u00e9sultat de la recherche de la page Wikip\u00e9dia de Barack Obama.<\/li>\n<li>Vous pouvez \u00e9galement utiliser un lien d&rsquo;ancrage pour revenir au d\u00e9but de la page.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/burorader.com\/wp-content\/uploads\/2020\/12\/anchor-link.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8279 size-full\" src=\"https:\/\/burorader.com\/wp-content\/uploads\/2020\/12\/anchor-link.jpg\" alt=\"Lien d'ancrage dans les r\u00e9sultats de recherche\" width=\"438\" height=\"109\" \/><\/a><\/p>\n<h2>Inconv\u00e9nient possible de l&rsquo;utilisation des liens d&rsquo;ancrage<\/h2>\n<p class=\"no-space\">M\u00eame si les liens d&rsquo;ancrage peuvent \u00eatre utiles, ils pr\u00e9sentent un inconv\u00e9nient : les lecteurs qui vont directement \u00e0 ce qu&rsquo;ils veulent lire ne lisent pas le reste de la page et peuvent donc manquer des informations. En disant \u00e7a, les avantages l&#8217;emportent g\u00e9n\u00e9ralement sur cet inconv\u00e9nient.<\/p>\n<h2>Ajouter un lien d&rsquo;ancrage<\/h2>\n<p>Il existe plusieurs fa\u00e7ons de cr\u00e9er un lien d&rsquo;ancrage : via votre \u00e9diteur de texte, manuellement via des balises html dans l&rsquo;\u00e9diteur de texte &#8211; vous ajoutez donc du code vous-m\u00eame &#8211; via un plugin, ou via une extension Chrome.<\/p>\n<h2>Ajouter un lien d&rsquo;ancrage avec Gutenberg<\/h2>\n<p>Lorsque vous travaillez avec Gutenberg (l&rsquo;\u00e9diteur de texte de WordPress 5), vous pouvez facilement ajouter le lien d&rsquo;ancrage. Ici, vous mettez en \u00e9vidence l&rsquo;en-t\u00eate et dans le bloc avanc\u00e9 de la colonne de droite, vous pouvez ensuite ajouter le lien d&rsquo;ancrage.<\/p>\n<h2>Ajouter manuellement un lien d&rsquo;ancrage<\/h2>\n<p>Mettez l&rsquo;\u00e9diteur de texte sur \u00ab Texte \u00bb au lieu de \u00ab Visuel \u00bb et recherchez l&rsquo;\u00e9l\u00e9ment <strong>vers lequel vous voulez cr\u00e9er un lien<\/strong>. A ce texte (ou bouton ou formulaire), ajoutez un id. Cela semble compliqu\u00e9 mais voici un exemple de lien d&rsquo;ancre vers un en-t\u00eate : &lt;h2 id=\u00a0\u00bbceci-est-un-lien-d-ancrage\u00a0\u00bb&gt;Le texte de l&rsquo;en-t\u00eate&lt;\/h2&gt;.<\/p>\n<p>Le lien d&rsquo;ancrage a maintenant \u00e9t\u00e9 cr\u00e9\u00e9 et vous pouvez maintenant commencer \u00e0 <strong>cr\u00e9er le lien<\/strong>. Remettez l&rsquo;\u00e9diteur de texte en mode \u00ab visuel \u00bb et s\u00e9lectionnez le texte \u00e0 partir duquel vous souhaitez cr\u00e9er un lien. Vous cliquez sur cr\u00e9er un lien et tapez (ou copiez) l&rsquo;URL de la page contenant le lien d&rsquo;ancrage, imm\u00e9diatement suivi d&rsquo;un hashtag (#) et de l&rsquo;id (ceci-est-un-lien-d-ancrage) et enregistrez le tout. Et c&rsquo;est tout ! Remarque : utilisez un identifiant unique pour chaque lien d&rsquo;ancrage !<\/p>\n<h2>Facilement ajouter un lien d&rsquo;ancrage dans Divi<\/h2>\n<p>Au bas de mes articles de blog, il y a toujours une ligne de texte contenant l&rsquo;option d&rsquo;abonnement \u00e0 ma newsletter. Ce formulaire de souscription se trouve au bas de ma page d&rsquo;accueil. J&rsquo;ai donn\u00e9 \u00e0 la section contenant le formulaire d&rsquo;abonnement l&rsquo;id <em>inscriptionnewsletter<\/em>. Vous trouverez cette option dans l&rsquo;onglet \u00ab Avanc\u00e9 \u00bb.<\/p>\n<p><a href=\"https:\/\/burorader.com\/wp-content\/uploads\/2023\/01\/lien-d-ancrage-dans-section-divi.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10299 size-full\" src=\"https:\/\/burorader.com\/wp-content\/uploads\/2023\/01\/lien-d-ancrage-dans-section-divi.jpg\" alt=\"Saisir le lien d'ancrage dans la section Divi\" width=\"454\" height=\"449\" \/><\/a><\/p>\n<p>Ensuite, vous devrez ajouter l&rsquo;URL du lien d&rsquo;ancrage &#8211; dans mon cas https:\/\/burorader.com\/fr\/#inscriptionnewsletter &#8211; dans votre texte. Vous pouvez voir ci-dessous comment j&rsquo;ai ajout\u00e9 le lien d&rsquo;ancrage au bas de la page de ce blog.<\/p>\n<p><a href=\"https:\/\/burorader.com\/wp-content\/uploads\/2023\/01\/lien-d-ancrage-dans-un-texte-de-Divi.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10297\" src=\"https:\/\/burorader.com\/wp-content\/uploads\/2023\/01\/lien-d-ancrage-dans-un-texte-de-Divi.jpg\" alt=\"Entrez un lien d'ancrage dans un texte de Divi\" width=\"887\" height=\"89\" \/><\/a><\/p>\n<h2>Exemple de lien d&rsquo;ancrage \u00e0 partir d&rsquo;un bouton<\/h2>\n<p>Vous pouvez \u00e9galement ajouter un lien d&rsquo;ancrage \u00e0 un bouton. Sur la page d&rsquo;accueil du <a href=\"https:\/\/reve-provencal.com\" target=\"_blank\" rel=\"noopener\">R\u00eave Proven\u00e7al<\/a>, sous les options de contact en bas de la page, il y a un bouton pour la demande de r\u00e9servation. Ce formulaire se trouve sur la page <strong>Tarifs et disponibilit\u00e9s<\/strong>.<\/p>\n<h2>Avec un plugin<\/h2>\n<p class=\"no-space\">Il existe plusieurs plugins avec lesquels vous pouvez facilement ajouter des liens d&rsquo;ancrage, mais en principe, cela peut \u00eatre fait sans plugin :<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/tinymce-advanced\/\" target=\"_blank\" rel=\"noopener noreferrer\">TinyMCE Advanced<\/a> \u2013 qui vous permet d&rsquo;ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires \u00e0 votre \u00e9diteur de texte et qui inclut la cr\u00e9ation de liens d&rsquo;ancrage<\/li>\n<li>Pour utiliser des liens d&rsquo;ancrage dans les tables des mati\u00e8res, vous pouvez utiliser le plugin <a href=\"https:\/\/wordpress.org\/plugins\/easy-table-of-contents\/\" target=\"_blank\" rel=\"noopener noreferrer\">Easy Table of Contents<\/a><\/li>\n<li>Et pour cr\u00e9er des liens vers les en-t\u00eates, vous pouvez activer le plugin <a href=\"https:\/\/wordpress.org\/plugins\/wp-anchor-header\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Anchor Header<\/a><\/li>\n<\/ul>\n<p><em>Je publie r\u00e9guli\u00e8rement des blogs et des Conseils &amp; astuces. Voulez-vous \u00eatre tenu au courant de ces conseils et de mon blog ? <a href=\"https:\/\/burorader.com\/fr\/#inscriptionnewsletter\">Inscrivez-vous ici<\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans ce blog, vous pourrez lire ce qu&rsquo;est un lien d&rsquo;ancrage, pourquoi vous pouvez l&rsquo;utiliser et comment ajouter un lien d&rsquo;ancrage de diff\u00e9rentes mani\u00e8res. Qu&rsquo;est-ce qu&rsquo;un lien d&rsquo;ancrage ? Un lien d&rsquo;ancrage est un lien qui pointe vers un endroit de la m\u00eame page ou m\u00eame d&rsquo;une autre page. Tr\u00e8s utile lorsque vous avez une [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13182,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[347],"tags":[266,256],"class_list":["post-13177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-informations-utiles-wordpress","tag-accessibilite","tag-divi-fr"],"_links":{"self":[{"href":"https:\/\/burorader.com\/fr\/wp-json\/wp\/v2\/posts\/13177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/burorader.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/burorader.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/burorader.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/burorader.com\/fr\/wp-json\/wp\/v2\/comments?post=13177"}],"version-history":[{"count":10,"href":"https:\/\/burorader.com\/fr\/wp-json\/wp\/v2\/posts\/13177\/revisions"}],"predecessor-version":[{"id":14030,"href":"https:\/\/burorader.com\/fr\/wp-json\/wp\/v2\/posts\/13177\/revisions\/14030"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/burorader.com\/fr\/wp-json\/wp\/v2\/media\/13182"}],"wp:attachment":[{"href":"https:\/\/burorader.com\/fr\/wp-json\/wp\/v2\/media?parent=13177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/burorader.com\/fr\/wp-json\/wp\/v2\/categories?post=13177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/burorader.com\/fr\/wp-json\/wp\/v2\/tags?post=13177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}