Comment ouvrir vos liens externes dans un nouvel onglet de façon ergonomique

Partagez si vous aimez ->

Résumons les trois étapes:

[list style= »1″]
  • 1ère étape: les liens doivent s’ouvrir de façon classique (en HTML)
  • 2ème étape: les liens externes doivent s’ouvrir dans une nouvelle fenêtre (en JavaScript)
  • 3ème étape: décorer les liens externes avec l’icône standard
[/list]

1ère étape: les liens doivent s’ouvrir de façon classique (en HTML)

Il suffit d’enlever l’attribut « target » du lien. Pour les liens du pied-de-page et des widgets, je vous conseille de le faire à la main. Par contre, n’allez pas ouvrir chacun de vos articles ou de vos pages pour les modifier manuellement. Nous allons exécuter une requête sur la base de données.

Si vous êtes sur WordPress, le code suivant fonctionnera sans problème. Si vous utilisez un autre CMS, pas de problème, il suffit d’adapter le nom de la table et du champ. [C’est vraiment trop compliqué pour vous? Allez directement à l’étape 3. => rajouter après, faire un article sur code jquery qui cible target[blank]… ]

Attention, faîtes toujours une sauvegarde de votre base de données avant toute manipulation !
UPDATE `wp_posts`
SET post_content = REPLACE(post_content,'target="_blank"','class="blank"')

-- Explication:
-- Cette réquête remplacera tous les attributs "target" définis sur "_blank", par la classe "blank".

2ème étape: les liens externes doivent s’ouvrir dans une nouvelle fenêtre (en JavaScript)

Afin de simplifier mes développements JavaScript, je m’appuie toujours sur la librairie jQuery. [+ lien vers comment intégrer la librairie jQuery à votre projet ?+ utilisez un code dans un fichier externe] Ce code nécessite de l’avoir installée au préalable.

$('a.blank').attr('target','_blank');

/* Explication : Ce code récupère tous les éléments HTML de type "a" contenant la class "blank"
et leur ajoute l'attribut "target", défini sur "_blank".*/

Le JavaScript s’exécute sur le navigateur. Ce code doit donc attendre que la page soit entièrement chargée avant de s’exécuter. Pour cela, encadrez le code avec la fonction « document.ready » de jQuery.

$(document).ready(function(){
// tout code écrit ici s'exécutera après le chargement de la page
});

Placez ce code dans un fichier JavaScript de votre site web appelé sur toutes les pages.

[si vous avez besoin de plus de détails => lien article]

3ème étape: décorer les liens externes avec l’icône standard

Il reste une ultime étape à réaliser : insérer une image. Nous pourrions le faire en CSS uniquement, mais les lecteurs d’écran n’auraient pas l’information. Les bonnes pratiques nous conseillent d’insérer une image à côté de chaque lien.

Pour cela, modifions le code JavaScript.

$(document).ready(function(){
$('a.blank')
.attr('target','_blank'
.append('<img class="external-link" title="Ce lien s\'ouvre dans un nouvel onglet" src="/external_link_green.png" alt="lien externe" />');
});

/* Explication: La dernière ligne, qui commence par ".append" est chargé d'insérer l'image après le texte. */

L’image utilisée dans cet exemple s’appelle « external_link_green.png » et se situe à la racine du site (directement dans le répertoire www).

N’oubliez pas d’envoyer l’image sur votre serveur, grâce à un logiciel FTP.

Vous pouvez télécharger ce pack que j’ai préparé pour vous, qui contient l’image standard en 5 coloris différents (pour mieux l’accorder à votre design).

Image des liens externes

Enfin, pour donner la touche finale, nous allons déplacer légèrement l’icône vers le haut. Placez ce code dans votre fichier CSS principal:

.external-link{
margin: 0 0 0 3px;
vertical-align: super;
}

Récapitulons

[list style= »1″]
  • 1ère étape: les liens doivent s’ouvrir de façon classiqueModification à la main pour les widgets « écrit en dur » et avec la requête SQL pour les contenus dynamiques
    (articles et pages).

    UPDATE `wp_posts`
    SET post_content = REPLACE(post_content,'target="_blank"','class="blank"')
    
  • 2ème étape: les liens externes doivent s’ouvrir dans une nouvelle fenêtre (en JavaScript)Utilisez ce code dans un fichier JavaScript appelé sur toutes les pages de votre site.
    $(document).ready(function(){
    $('a.blank')
    .attr('target','_blank'
    .append('<img class="external-link" title="Ce lien s\'ouvre dans un nouvel onglet" src="/external_link_green.png" alt="lien externe" />');
    });
    
  • 3ème étape: décorer les liens externes avec l’icône standardChoisissez l’image que vous voulez dans le pack fourni, notez son nom à la place de « external_link_green » dans le code JavaScript ci-dessus, et envoyez-là en FTP à la racine de votre serveur Web.
    Ajouter le code suivant dans votre fichier CSS :

    .external-link{
    margin: 0 0 0 3px;
    vertical-align: super;
    }
[/list]

Nous voici arrivé au terme de ce looong tutoriel ! J’espère ne pas en avoir trop perdu dans la bataille.

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons