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

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

Hier, nous avons abordé ensemble la question de l’ouverture des liens externes dans un nouvel onglet. Aujourd’hui, je vous propose de coder un peu pour apporter ces changements.

Résumons les trois étapes:

  • 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

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 src="/external_link_green.png" alt="lien externe" class="external-link" title="Ce lien s\'ouvre dans un nouvel onglet" />');
});

/* 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

  • 1ère étape: les liens doivent s’ouvrir de façon classique

    Modification à 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 src="/external_link_green.png" alt="lien externe" class="external-link" title="Ce lien s\'ouvre dans un nouvel onglet" />');
    });
    
  • 3ème étape: décorer les liens externes avec l’icône standard

    Choisissez 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;
    }

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

Trop compliqué pour vous?

Lundi, je vous proposerai une solution plus facile à mettre en oeuvre mais moins ergonomique. Restez à l’écoute!

Que pensez-vous de cette solution, en terme d’ergonomie? Trouvez-vous que cela facilite votre compréhension de la navigation ou ça vous embrouille encore plus?

MarieEve

CSS, JavaScript, MySql, SQL

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

8 commentaires

  1. Je vois pas bien à quoi tout ça peut servir en fait.. mais j’avoue que je suis skotché par la qualité avec laquelle tu fais les choses.

    Il faut que tu lises « traité du zen et de l’entretien des motocyclettes » tu comprendras ce que je veux dire. Ce livre changera ta vie ou te feras chier à mort comme un épisode de « plus belle la life ».. c’est toi qui voit.

    Répondre
  2. Est il nécessaire d’embarquer une librairie complète pour un target= »_blank » ? Un simple str_replace(); sur la publication du poste ne serait il pas plus simple?

    Répondre
  3. Il n’y a rien de plus frustrant qu’une ouverture de lien externe qui écrase la page où on est sans compter que ça fait surement perdre des visiteurs au site en question.

    Bonne idée également l’ajout de la petite icone, ça permet d’ajouter de la transparence envers les liens qu’on donne…

    Répondre
  4. @jon: c’est vrai qu’on premier abord, on a juste l’impression que je me complique la vie. En fait, il s’agit juste de respecter les standards pour avoir le code le plus valide possible et donc le plus accessible. Construire une page web en respectant les standards, c’est comme construire les routes d’un nouveau quartier en respectant le code de la route.Les gens s’y retrouveront mieux, leur voiture sera adaptée pour passer, ils y retrouveront leurs habitudes (rouler à droite, céder la priorité à droite…)…et au final, beaucoup de monde pourra venir dans ce quartier sans se perdre ni créer d’embouteillage. Pour le quartier comme pour le site, c’est vrai qu’il faut parfois se casser un peu la tête mais au final tout le monde est content et ça vaut le coup!

    Je note le livre, wikipédia vient de me le présenter, ça a l’air pas mal du tout!

    @faouzane: pas de problèle, tu peux te servir

    @creer_un_site_internet: non en effet, importer cette librairie n’a de sens que dans le cadre d’un projet global de site Web. Personnellement, je code le js à 95% avec jQuery, donc j’importe cette librairie dans tous mes projets. Le gain de temps de dev, de recherche et la compatibilité cross-browser assurée (+les nombreux plugins) justifient les ressources qu’elle demande (30Ko)!

    Par contre le n’aurais pas utlilisé un str_replace car alors le code aurait été le même que js soit activé ou pas.Or, comme utiliser un target= »_blank » est un peu « limite » (pas valide), je préfère le rajouter à postériori. Ainsi les utilisateurs qui ont désactivés js ont une navigation « classique ». De plus, je n’aime pas faire des modifs à la volée en php car si je veux utiliser ma bdd sur un autre périphérique (appli iphone…) je devrais recoder ces changements…

    @julien: c’est justement pour les néophytes qui ne veulent que la petite image que j’ai écrit un petit script qui ne fait que ça. Ce n’est pas une solution valide au sens HTML du terme mais c’est mieux que rien.

    Répondre
  5. Bonjour,

    Ma photo apparaît deux fois… Comme si je m’étais réinscrit une seconde fois… Est-ce possible?…
    De mon côté je pense que c’est possible mais je n’ai pas noté le mot de passe de ma première inscription.( il y aurait longtemps déjà…)
    Qu’en pensez-vous?…
    Merci,
    C.Natiez

    Répondre
    • Bonjour,

      Où est-ce que votre photo apparaît deux fois ? Je ne vois pas.

      Répondre
  6. Bonjour,MarieEve
    merci c’un bon article

    Répondre

Trackbacks/Pingbacks

  1. Ouverture des liens dans un nouvel onglet: la méthode trop facile | Les Doigts dans le Net - [...] vos utilisateurs à ouvrir un lien dans un nouvel onglet. Dans le second, vous avez découvert une façon…

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint