Ajouter une icĂŽne aux liens externes dans WordPress

Ajouter une icĂŽne aux liens externes dans WordPress
7 mn de lecture

Vous vous demandez peut-ĂȘtre pourquoi et comment ajouter une icĂŽne aux liens externes de votre site WordPress.

Il n’y a pas longtemps, je me suis Ă©galement posĂ© la question. En effet, sur un blog, on utilise une combinaison de liens internes et externes. Alors, je me suis dit que ce serait probablement bien de trouver un truc pour les diffĂ©rencier visuellement.

Puis, je me suis souvenue de sites comme WikipĂ©dia ou autres qui ajoutent une icĂŽne aprĂšs le lien sortant. Vous savez… l’icĂŽne qui se compose d’une flĂšche pointant vers l’extĂ©rieur et d’une forme.

Ni une, ni deux, j’ai voulu l’implĂ©menter sur mon blog afin que les lecteurs sachent que ces liens sont diffĂ©rents et Ă  quoi ils peuvent s’attendre lorsqu’ils cliquent dessus.

Vous avez envie de faire la mĂȘme chose ?

Alors, découvrez dans cet article pourquoi et comment ajouter une icÎne aux liens externes de votre site sans extension.

Pourquoi ajouter un signe distinctif aux liens externes de votre site ?

Lorsque vous écrivez un article sur votre site, vous incluez évidemment des liens externes. Ces liens sortants servent par exemple à donner des références ou encore à indiquer des outils à tester.

Bien entendu, vous les avez choisis avec soin et vous recommandez Ă  vos lecteurs de les consulter.

Oui, mais voilĂ , si les visiteurs viennent sur votre site, c’est parce qu’ils le considĂšrent comme un site de confiance. Et, force est de constater qu’avec les risques de sĂ©curitĂ© potentiels, personne n’aime ĂȘtre redirigĂ© vers un autre site sans avertissement.

Le problĂšme est que les liens internes et externes d’un site WordPress ont la mĂȘme apparence. De ce fait, rien n’indique au lecteur qu’il va sortir de votre site en cliquant sur un lien externe.

Bien sĂ»r, il peut passer sa souris sur le lien, puis, vĂ©rifier dans le coin infĂ©rieur gauche de son Ă©cran s’il reste bien sur le mĂȘme domaine. Mais bon, vous en conviendrez, c’est quelque peu fastidieux.

Affichage de l'URL du lien au survol de la souris

Ou bien, vous pouvez l’avertir en Ă©crivant entre parenthĂšses qu’il s’agit d’un lien externe, mais lĂ , ce sera chronophage pour vous.

La meilleure solution pour diffĂ©rencier les liens internes des liens externes est selon moi d’ajouter une petite icĂŽne bien reconnaissable comme le fait WikipĂ©dia pour ses rĂ©fĂ©rences. Ainsi, en ajoutant un signe distinctif Ă  vos liens externes, vous indiquerez Ă  vos lecteurs qu’ils vont sortir de votre site et accĂ©der Ă  un autre.

Passons à présent au tutoriel qui vous guidera pour ajouter cette icÎne aux liens externes de votre site WordPress sans extension.

Comment ajouter une icĂŽne aux liens externes dans WordPress sans extension

Afin d’afficher automatiquement une icĂŽne aux liens externes Ă  votre site, il suffit d’inclure un code dans votre site WordPress.

Pour les fĂ©ru(e)s d’optimisation comme moi, sachez que ce code n’ajoutera pas de temps de chargement notable Ă  votre site.

Il est Ă  noter aussi qu’il s’agit d’une icĂŽne en SVG issue des Dashicons de WordPress. Elle est sous licence GPL et donc libre de droits et sans attribution nĂ©cessaire.

IcĂŽne SVG Dashicons External

Si vous avez créé un thÚme enfant, ajoutez le code ci-dessous dans le fichier functions.php de votre thÚme enfant.

Sinon, utilisez une extension telle que Code Snippets pour le faire.

Voici le code Ă  inclure :

/** Ajouter une icĂŽne aux liens externes */
function cs_external_link_icon() {

    wp_register_script('external-link-icon', false);
    wp_enqueue_script('external-link-icon');

    wp_add_inline_script('external-link-icon', "
    function externalLinkIcon() {
      var icon = '<svg xmlns=\"https://www.w3.org/2000/svg\" xmlns:xlink=\"https://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 20 20\">' +
        '<path d=\"M9 3h8v8l-2-1V6.92l-5.6 5.59l-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z\" fill=\"currentColor\"/>' +
        '</svg>';
      // Indiquer Ă  quels liens externes ajouter une icĂŽne
      if (!document.querySelector('.entry-content')) return;
      var links = document.querySelector('.entry-content').querySelectorAll('a');
      [...links].forEach(function (link) {
        if (
          link.host !== window.location.host &&
          link.href.substr(0, 4) !== 'tel:' &&
          link.href.substr(0, 7) !== 'mailto:'
        ) {
          link.innerHTML += ' ' + icon;
        }
      });
    }
    window.addEventListener('load', externalLinkIcon, false);
  ");

}

add_action('wp_enqueue_scripts', 'cs_external_link_icon');

Ce code ajoutera une icĂŽne de la mĂȘme couleur que le lien Ă  tous vos liens externes exceptĂ©s les liens pour les emails ou le tĂ©lĂ©phone.

Voici le résultat :

Lien externe avec icĂŽne

Explication pour modification du code

Si vous souhaitez modifier la largeur (width) et la hauteur (height) de l’icĂŽne, indiquez une autre valeur que 1 ici :

width=\"1em\" height=\"1em\"

💡 N’oubliez pas que pour saisir une dĂ©cimale, il faut mettre un point et non pas une virgule.

AprĂšs, si vous voulez changer la taille ou l’emplacement de l’icĂŽne SVG, il vous faut modifier les valeurs de la viewBox :

viewBox=\"0 0 20 20\"

En sachant que :

  • Le premier 0 correspond Ă  min-x qui est utilisĂ© pour bouger le SVG sur un axe horizontal (gauche et droite).
  • Le deuxiĂšme 0 correspond Ă  min-y qui sert Ă  dĂ©placer le SVG sur un axe vertical (haut et bas).
  • Le premier 20 dĂ©finit la largeur de la viewBox (width) et le deuxiĂšme sa hauteur (height).

Enfin, si vous prĂ©fĂ©rez que l’icĂŽne soit d’une autre couleur que celle du lien, il vous faut remplacer “currentColor” par le code couleur souhaitĂ©. Par exemple, indiquez #000000 ou black et votre icĂŽne aura la couleur noire.

fill=\"currentColor\"

fill=\"#000000\"
fill=\"black\"

Rendre les liens internes et externes accessibles

Pour conclure, je dirai qu’inclure des liens externes de qualitĂ© pour Ă©tayer des informations est quasi obligatoire en SEO.

Et aussi que leur ajouter une icĂŽne pour les diffĂ©rencier des liens internes Ă  votre site est une excellente initiative. En effet, cela peut servir Ă  amĂ©liorer l’expĂ©rience utilisateur.

D’ailleurs, vous retrouverez cette recommandation dans la rĂšgle n° 137 des bonnes pratiques Ă  appliquer pour la qualitĂ© des sites web d’Opquast qui indique que les liens internes et externes doivent ĂȘtre diffĂ©renciĂ©s…

NĂ©anmoins, j’aimerais attirer votre attention sur le fait qu’un lien, qu’il soit externe ou interne, se doit d’ĂȘtre accessible. En effet, si la couleur du texte se confond avec celle de l’arriĂšre-plan, il ne sera pas lisible par tous.

Alors, vĂ©rifiez toujours l’accessibilitĂ© de votre texte ou de vos liens !

Utilisez des outils pour tester le contraste entre la couleur du texte et son arriĂšre-plan. Et si vos textes ne sont pas accessibles, faites en sorte qu’ils le deviennent. 😉

Que pensez-vous de l’ajout d’une icĂŽne aux liens externes ? L’avez-vous fait sur votre site ?

Soumettre un commentaire 💬

guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires