Insérer un lien dans un article WordPress

Un lien permet de déclencher l’affichage d’une page web à partir d’un simple clic sur un texte ou une image.

Associer un lien à un texte :

Sélectionner le texte auquel sera associé un lien puis cliquer sur l’icône Rédiger un article avec WordPress - icône lien ou taper au clavier simultanément sur les touches « CTRL » et « k » :

Associer un lien à du texte sélectionné dans l'éditeur
Associer un lien à du texte

Saisir (ou copier / coller) une adresse web (url) dans la fenêtre contextuelle qui apparaît puis cliquer sur l’icône « Appliquer » ( ) ou taper au clavier sur la touche « Retour chariot » (« « ) :

Saisir une adresse eb dans la zone de saisie aui apparaît
Saisir l’adresse web qui sera associée au lien
La fenêtre de saisise apparaît avec de nouveles icônes : un crayon et un symbole de lien
Lien appliqué

On peut aussi créer le lien avec un copier / coller.

Sélectionner le texte sur lequel associer un lien :

le texte sélectionné apparaît en sur un fond de couleur
sélectionner une partie de texte

Copier une adresse web (url) qui sera la destination du lien (par exemple : sélectionner l’adresse dans la barre d’adresse du navigateur puis taper simultanément sur les touches « CTRL » et « C ») :

Sélectionn de l'adresse web de destination et copie en tapant sur CTRL + C
Sélectionner l’adresse web de destination du lien et taper sur les touches CTRL et C

Revenir dans l’édition de l’article et taper simultanément sur les touches « CTRL » et « V »; WordPress fait apparaître la fenêtre contextuelle de gestion des liens avec l’adresse web pré saisie :

Affichage d'une fenêtre contextuelle contenant l'adresse web
Adresse web associée au lien par copier / coller

Cliquer en dehors du texte associé au lien. Le texte associé au lien s’affiche en souligné :

Dans la zone de saisie de l'article, le texte lié est souligné
Affichage du texte lié

Cliquer dans le texte associé au lien permet de faire apparaître dans un fond bleu la zone exacte correspondant aux caractères liés :

Les caractères faisant partie du texte lié apparaissent avec un fond de couleur
Affichage des caractères associés au lien

Côté visiteur, survoler le lien permet de faire apparaître l’adresse web de la page qui s’affichera si on clique sur le lien :

Côté visiteur, affichage de l'url associée au lien par le navigateur
Affichage de l’url associée au lien par le navigateur

Détection d’un lien incorrect

Lorsque le rédacteur valide une adresse web (url) , WordPress lance une requête pour vérifier que l’adresse existe. Si elle n’existe pas, WordPress le signale en affichant l’adresse en rouge et en encadrant le lien en pointillé :

Adresse web saisie dans la fenêtre contextuelle n'existe pas ("wikopedia" au lieu de "wikipedia")
Adresse web incorrect

Créer un lien vers un article ou une page de votre site

Lorsque le rédacteur saisit l’adresse web (url) , WordPress propose une liste d’articles et de pages publiés sur le site qui contiennent le ou les mots saisis.

  1. sélectionner le texte auquel sera attaché un lien,
  2. saisir le texte qui sera recherché dans les articles et pages du site,
  3. cliquer sur l’un des titres d’articles et de pages proposés :
La saisie d'un text dans la fenêtre contextuelle fait apparaître une liste d'articles et de pages du site
Lier vers un article du site

L’adresse de l’article ou page sélectionné devient l’adresse web associée au lien :

L'adresse web de l'article apparaît dans la zone de modification du lien
Adresse web de l’article associée au texte

Saisir une adresse web sans « http »

Saisir une adresse web (url) ne commençant pas par http et valider en cliquant sur l’icône icone-appliquer  ou taper sur la touche « Retour chariot » (« « ) :

Saisir une adresse qui ne commence pas par "http://"
Saisir une adresse sans http

Le lien saisi s’affiche dans la fenêtre contextuelle :

Cliquer sur l’icône crayon ou taper simultanément sur les touches « CTRL » et « k », permet de constater que la référence au protocole http a été ajouté en début d’adresse web :

L'affichage de l'adresse web commence par http://
« http:// » a été ajouté en début d’adresse web
Haut de page

Les options de lien

WordPress propose diverses options pour paramétrer un lien :

  • sélectionner du texte non encore associé à un lien puis cliquer sur l’icône Rédiger un article avec WordPress - icône lien ou taper simultanément sur les touches « CTRL » et « k » ,
    ou
  • cliquer en n’importe quel point d’un texte déjà associé à un lien, puis cliquer sur l’icône    ou taper simultanément sur les touches « CTRL » et « k » :
Cliquer sur l'icône en forme de crayon pour modifier un lien créé
Modifier un lien existant

Cliquer sur l’icône en forme de roue crantée ( Icône de gestion des options d'un lien ) pour faire apparaître les options proposées :

La roue crantée apparaissant dans la fenêtre contextuelle permet d'obtenir le choix des options de liens
Faire apparaître les options pour un lien

Les options s’affichent dans une fenêtre modale :

Fenêtre contextuelle de définition des options associées au lien
Options de liens
  • créer un lien vers un article ou une page déjà publié sur le site :
  1. saisir un ou plusieurs termes dans la zone de recherche
  2. sélectionner un article ou une page
  3. l’adresse de l’article apparaît dans la zone d’adresse web du lien
  4. choisir si la page liée s’affichera dans un nouvel onglet lorsqu’un visiteur cliquera sur le lien
  • créer un lien vers un autre site :
  1. saisir l’adresse web (ou la copier/coller)
  2. choisir si la page liée doit apparaître dans un autre onglet du navigateur (Firefox, Chrome, Edge…)

Cliquer sur le bouton  pour valider le nouveau paramétrage du lien, ou sur le bouton bouton annuler option du lien pour revenir à la définition des options avant affichage de la fenêtre modale.

Apparaît alors la fenêtre contextuelle avec la nouvelle adresse du lien et les icônes de modification :

Affichage de la fenêtre contextuelle de modification d'un lien existant
Affichage après modification des liens

Saisir l’adresse web

Lorsqu’on saisit l’adresse web dans la fenêtre des options, WordPress propose la liste des liens déjà créés et commençant de façon identique :

En dessous de la zone de saisie de l'adresse web, une liste de liens apparaît
Sélectionner une adresse web parmi celles proposées

Modifier le texte du lien

Modifier directement

Cliquer dans le texte du lien et le modifier (saisir du nouveau texte et / ou supprimer des caractères ) :

Dans l'éditeur, cliquer à l'intérieur du texte du lien et saisir le nouveau texte
Saisir dans le texte du lien

Modifier via la fenêtre des options

La fenêtre des options reproduit le texte associé au lien.
Modifier le texte saisi dans la fenêtre « Texte du lien » :

La zone de saisie du texe du lien se situe sous la zone de saisie de l'adrese web
Zone de saisie du texte du lien

Cliquer sur le bouton maj-options-lien, le texte du lien est modifié :

Le texte associé au lien apparapit modifié dans la zone d'édition
Texte du lien modifié
Haut de page

Créer un lien vers un point précis d’une page

Il est possible de créer un lien vers une position précise de la page associée au lien (et pas seulement en haut de page) en utilisant une ancre HTML.

Lorsqu’il s’agit de la page actuellement affichée, il suffit de saisir le caractère « # » suivi de l’identifiant de l’ancre :

Sasie du lien vers une ancre dans la même page
Lien vers une ancre dans la même page

En affichant avec l’option « Texte » on peut voir le code HTML généré :

Affichage du code HTML : ajout de l'ancre et lien vers l'ancre
HTML généré pour gérer une ancre sur la page courante

Afficher la page créée et survoler le lien pour constater que l’adresse web (url) reconstituée contient l’adresse de la page affichée suivie de la référence à l’ancre :

L'affichage du lien par le navigateur montre que l'url du lien commence par l'adresse de la page courante
Le navigateur ajoute l’adresse de la page courante à la référence à l’ancre

Le lien peut aussi être créé à partir de la fenêtre des options :

Saisir l'adresse web avec ancre dans la fenêtre d'options de liens
Création d’un lien ancré avec la fenêtre d’options

Identifiant css

La cible dans la page peut être désignée, comme on vient de le voir, par une ancre s’appuyant sur la balise HTML ‘<a>’. Elle peut aussi être désignée par une balise contenant un paramètre « id », qui est en fait un « sélecteur d’identifiant css».

Regardons le lien que nous venons d’utiliser pour pointer sur la description du sélecteur d’identifiant dans Wikipedia. Voici son adresse :

Affichage du point cible dans la page wikipedia
Lien vers l’intérieur d’une page Wikipedia

Et voici le code HTML correspondant au texte cible :

Le code HTML contient l'identifiant cible dans une balise <span>
Code html incluant un sélecteur d’identifiant

Le point cible défini dans le lien (« #S.C3.A9lecteur_d.27identifiant ») correspond au sélecteur identifiant css dans la page cible : « id=″S.C3.A9lecteur_d.27identifiant″ ».

Haut de page

Retirer un lien existant

Cliquer n’importe où dans le texte associé à un lien existant puis sur l’icône en forme de croix (suppression-lien-croix ) dans la fenêtre contextuelle :

Cliquer sur l'icône en forme de croix pour supprimer un lien existant
Enlever un lien existant à partir de la fenêtre contextuelle

Le texte redevient de la couleur standard (noire par défaut), ce qui permet de visualiser qu’il n’y a plus de lien associé :

Le texte du lien s'affiche avec des caractères non mis en forme pour signaler un lien
Lien retiré

Il est aussi possible de supprimer un lien existant en cliquant dessus, puis sur l’icône Icône "Retirer lien"  :

Utilisation de l'icône "Retirer lien"
Supprimer le lien avec l’icône « Retirer lien »

Retirer le lien pour une partie du texte

Sélectionner une partie du texte lié et cliquer sur l’icône suppression-lien-croix :

Supprimer le lien pour la partie de exte présélectionnée
Suppression partielle d’un lien

Cliquer en dehors du lien permet de constater que le lien n’est plus associé qu’à la partie du texte qui n’avait pas été sélectionnée :

La visualisation montre que le lien n'apparaît plus sr la partie de texte où on vient de le retirer
Les caractères sont différents pour ce qui reste du lien

L’icône « Retirer le lien » ( icone-retirer-lien ) aurait tout aussi bien pu être utilisée à la place de l’icône dans la fenêtre contextuelle ( suppression-lien-croix ).

Haut de page

Créer un lien à partir d’une image

Lorsqu’une image a été téléchargée dans un article ou une page WordPress, il est possible de lui associer un lien. Si le visiteur clique sur l’image, la page dont l’adresse web (url) a été spécifiée s’affiche :

La fenêtre modale permet d'associer un lien à une image et de paramétrer ce lien
Associer un lien à une image

Pour plus de précisions, on pourra consulter la partie de l’article sur les images consacrée au paramétrage des liens associés à une image.

Modifier les images dans WordPress.com

Haut de page

Liens et référencement

Les moteurs de recherche analysent les pages d’un site afin de les proposer en réponse aux demandes de recherches. Une des façons d’aider les moteurs à repérer les sujets traités sur votre site est d’utiliser le texte des liens pour préciser le contenu de la page cible.

Par exemple, plutôt que d’écrire :

Vous trouverez un article sur la version WordPress 4.5 ici

mieux vaut rédiger ainsi :

Voici un article sur la version majeure WordPress 4.5

Dans le premier cas, le moteur de recherche va associer l’expression « ici » avec toutes les pages associées à un lien sur le terme « ici ». Comment voulez-vous que le moteur de recherche s’y retrouve ?
Dans le deuxième cas, vous lui suggérez d’ajouter la page liée en réponse à des recherches comme « version WordPress  » ou « version majeure WordPress ».

Haut de page

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.