Comment mettre en avant les liens externes dans WordPress comme sur Wikipedia ?

Cet article est une traduction d’un snippet publié par wpmudev.com : How to Style External Links in WordPress Like Wikipedia

Comment Wikipedia design les lien ?

Au cas où vous ne vous rappeliez plus comment sont fait les liens sur Wikipedia, voici un petit exemple :

Liens externes dans Wikipedia

Vous remarquerez qu’une petite icône (avec une flèche) se trouve à côté de certains des liens présents dans la section « Références » de la page WordPress. Ces liens signifient que, lorsque vous cliquez dessus, vous sera redirigé vers une page externe à Wikipedia.

Styliser les liens externes avec du texte

Pour commencer, nous allons voir comment styler vos liens externes avec un simple petit texte explicite.
Si vous n’utilisez pas déjà un thème enfant (child theme), créez en un et ajoutez ensuite le CSS suivant à votre feuille de style :

a[href^="http://"]:not([href*="b-website.com"]):after,
a[href^="https://"]:not([href*="b-website.com"]):after {
  content: "(LIEN EXTERNE)";
  padding-left:5px;
}

En complément de l’article original, je vous conseille fortement d’ajouter la class .entry ou .content qui correspondent normalement au corps de vos contenus. Vous évitez ainsi les éventuels problèmes de design si vous avez des liens externes dans vos menus, pied de page, widget, etc. Il est donc plus judicieux de faire comme ceci

.entry a[href^="http://"]:not([href*="b-website.com"]):after,
.entry a[href^="https://"]:not([href*="b-website.com"]):after {
  content: "(LIEN EXTERNE)";
  padding-left:5px;
}

Assurez vous de remplacer b-website.com par le nom de domaine de votre site.
Ce code permet tout simplement de regarder tous les liens de vos contenus qui ne contiennent pas votre nom de domaine, et d’y ajouter le cas échéant la mention LIEN EXTERNE.

Vous obtenez alors quelque chose comme ceci :

Vous en conviendrez, ça n’est pas très sexy, c’est pourquoi nous allons passer à la seconde étape.

Styliser les liens externes avec une icône

Nous allons maintenant ajouter une icône à la fin de nos liens plutôt qu’un texte disgracieux.

Vous devez tout dabord trouver une icône qui correspondent à vos besoins. Tout comme l’auteur de l’article originale, j’utilise personnellement Flat Icons. Vous devez donc télécharger l’icône png de votre choix et la placer dans le répertoir de votre thème enfant.

Une fois que c’est fait, remplacez le CSS que nous venons de voir dans la partie précédente par celui-ci :

a[href^="http://"]:not([href*="b-website.com"]):after,
a[href^="https://"]:not([href*="b-website.com"]):after {
  content: "" url('/images/external-icon.png');
  padding-left:5px;
}

Assurez vous de remplacer b-website.com par le nom de domaine de votre site et vérifier que le chemin votre image est correct.

Toujours pour compléter l’article original, je vous conseil de préciser la class .entry ou .content voir même de préciser le target et plutôt que d’appeler  une image, je vous conseil d’utiliser une image encodée en BASE 64 (vous pouvez récupérer le code BASE 64 des images directement depuis Flat Icons), on évite ainsi une requête HTTP inutile pour un fichier minuscule.

.entry > p a[target="_blank"][href^="http://"]:not([href*="b-website.com"]):after, 
.entry > p a[target="_blank"][href^="https://"]:not([href*="b-website.com"]):after,
.entry > ul > li > a[target="_blank"][href^="http://"]:not([href*="b-website.com"]):after, 
.entry > ul > li > a[target="_blank"][href^="https://"]:not([href*="b-website.com"]):after {
	content: "";
	display: inline-block;
	padding-left: 5px;
	margin-left: 5px;
	width: 7px;
	height: 11px;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAACySURBVHjafNAxagJhEAXgL8s2gRzA1spaAjmAoCDYBDzD1kIOkdrKJrXkAIIHsBNtBUEiCMKCJJBqy6T5F34W/30wxTDvzbw3D0VRaEEXX1FfZZjiG7tGrXDGLBI85nhHH5fEld+4yVC1kF/xgS0WkLf4H+ATB0xwwzFLkF9ChivGgQzze4Ie1vjBCB0M4wxNlNiHzaew4Lke5omvjFLBsshGW/gyFrxhg79EPWFZC/4HAJkNJ+ROVdV2AAAAAElFTkSuQmCC');
}

Vous obtenez alors quelque chose comme ceci :

Voilà, c’est terminé. Simple non ?