Avec l’utilisation de mobile, il devient difficile de mettre des liens ouvrant vers d’autres onglets dans un site. En effet, sur un mobile, il n’est pas simple d’aller dans un autre onglet. Les sites américains les plus en pointe indiquent donc par un symbole les liens qui ouvriront dans un autre onglet. J’ai voulu faire la même chose.
La situation initiale
Lorsqu’on définit un lien dans WordPress, la fenêtre qui s’affiche permet de définir si l’on veut, ou non, que le lien s’ouvre dans une nouvelle fenêtre ou onglet.
Mais que la case soit cochée ou non, rien ne l’indiquait à l’internaute.
La solution (CSS)
Dans style.css, indiquer la différence entre un lien qui s’affichera dans le même onglet (élément de type <a>) et un lien qui s’ouvrira dans un autre onglet (élément de type <a target= »_blank »>) :
.entry-content a[target="_blank"]::after {
content: "\f08e"; /* external-link */
display: inline-block;
font-family: FontAwesome;
font-size: 90%;
color: #660bab;
text-decoration: underline;
width: 17px;
text-align: right;
}
Ici le symbole provient de la bibliothèque d’icones font awesome, il faut avoir chargé le css correspondant pour que celà fonctionne (voir ici).
Et maintenant, si je coche la case qui ouvre le lien dans un nouvel onglet, l’internaute a l’information. Il peut décider de ne pas cliquer sur le lien.
Mais…
Ca fonctionne parfaitement pour des liens textes, mais lorsqu’une image a un lien, le petit symbole s’affichait également… Et là, c’est très compliqué de définir un style spécifique pour un lien dont l’enfant est une image. J’ai dû recourir à une fonction jQuery. L’explication est ici.
