10 Insérer un lien

Présentation

Vous voilà presque arrivé au bout de vos peines, à la fin de ce chapitre vous saurez tout ce qui est nécessaire pour faire un article.

Tout bon article devrait proposer un lien vers des compléments d’informations à offrir aux internautes. Ces informations peuvent être sur d’autres sites internet, ou d’autres pages de notre site, et pourquoi pas vers l’un des réseaux sociaux. Ce dernier aspect sera expliqué plus tard, car il est déjà en partie réalisé, pour le Facebook des Compagnons et aussi celui du château.

Insérer un lien sur une image

Ce sous-titre est volontairement générique car, que le lien soit proposé sur une image ou une partie de texte, l’interface est toujours la même.

Vous êtes donc connecté en édition de votre article. Supposons que vous désirez faire un lien qui s’active lorsque l’internaute clique sur une image. Rendez-vous donc dans l’éditeur. Après avoir sélectionné l’image, vous devez cliquer sur l’icône des liens (l’espèce de trombone au-dessus de la flèche rouge) :

Le résultat de cette action peut proposer l’écran suivant :

Si c’est le cas, je vous propose de cliquer sur la petite phrase en face de la flèche rouge, pour obtenir l’écran complet montré ci-dessous (qui peut vous être proposé d’office) :

Il y a six options à vérifier, notées de 1 à 6, que je vais présenter :

  1. Dans le champ « Adresse web », vous entrez directement l’adresse d’un site vers lequel vous proposez à l’internaute de se connecter. Si vous ne vous en souvenez pas, vous pouvez toujours ouvrir un nouvel onglet dans votre navigateur. Vous connecter sur le site vers lequel vous désirez offrit le lien, et copiez l’adresse affichée dans la barre d’adresse du navigateur (sélectionnez la totalité de l’adresse avec la souris {ou touches Ctrl + a}). Copiez cette adresse (bouton droite de la souris cliqué, puis fonction copier, {ou encore touches Ctrl + C}). Retournez maintenant dan ce champ noté « 1 » et collez cette adresse (bouton droite de la souris cliqué, puis fonction coller, {ou encore touches Ctrl + V}).
  2. Dans ce champ, une mention qui représente l’adresse que vous venez de saisir est automatiquement affichée. Si cela ne vous convient pas, vous pouvez saisir autre chose.
  3. Cochez cette case, toujours pour faciliter la vie des internautes.
  4. Si vous désirez faire un lien vers un contenu qui existe déjà sur le site, vous pouvez le saisir ou le rechercher avec le champ « Recherche ».
  5. L’ascenseur permet de faire défiler la liste si plusieurs résultats vous sont proposés, même sans recherche.
  6. Validez avec le bouton bleu « Ajouter un lien ».

Vous en avez terminé avec votre lien.

Vous pouvez en insérer plusieurs dans votre article. Vous pouvez également vérifier votre travail avec le bouton « Aperçu ». Enfin, si tout vous convient, terminez avec le bouton « Mettre en relecture ».

Insérer un lien sur un texte.

Pour insérer un lien dans du texte, rien de plus facile !

Vous être donc dans l’édition de votre texte. Sélectionnez avec la souris la partie du texte qui fera l’objet du lien (positionnez le curseur au début devant le premier mot, appuyez sur le bouton gauche, restez appuyé pour définir la quantité de texte, relâchez le bouton). Sélectionnez l’icône des liens (le trombone), le reste est absolument identique à ce que vous avez précédemment fait pour une image.

Le résultat sera que cette partie de texte est maintenant soulignée, et présentée avec une autre couleur. Vous pouvez vérifier que le lien fonctionne.

Les internautes ont maintenant pris l’habitude des liens signalés en caractères bleus soulignés, et ce n’est peut-être pas le résultat de votre manipulation. Vous pouvez remédier à cela, sans détruire le lien. Dans la barre d’éditions, sélectionnez l’icône qui représente le A avec le petit triangle à côté (première image), vous obtiendrez une palette de couleurs (seconde image) :

 Il vous suffit de cliquer sur une couleur. Notez que vous pouvez toujours revenir à la couleur par défaut en cliquant sur la petite croix.

Vous pouvez aussi définir une couleur personnalisée en cliquant sur « Personnalisée… », mais ce n’est pas obligatoire.

Une petit boîte s’ouvre alors qui vous permet de choisir votre nouvelle couleur, tandis que la fenêtre de l’éditeur passe en grisé :

Il vous faut alors positionner le curseur de la barre verticale dans une région de couleur, ce qui a pour effet de changer le fond des couleurs et d’y insérer une petite cible. La couleur résultante est montrée dans le rectangle situé en bas, tandis que sa valeur en composantes R-V-B (rouge vert bleu) est indiquée. (Vous pouvez aussi les saisir directement dans les cases appropriées si vous les connaissez.) Validez en cliquant le bouton bleu OK.

Validez votre travail avec le bouton « Mettre en relecture ».

Pour aller plus loin

Une dernière chose avant de se quitter : vers le début de ce didacticiel consacré à l’écriture d’un article, j’avais parlé des balises HTML. Sans entrer dans ce système de codage, je vous propose une dernière amélioration.

Lorsque le nombre d’articles d’un blog devient important, même si son organisation prévoit une présentation en catégories il peut être intéressant de ne proposer aux internautes qu’un extrait de l’article significatif de son contenu. Ceci permet de visiter rapidement les articles proposés, sans devoir les lire tous en entier. Dans ce cas, à la fin de l’extrait une petite mention propose aux internautes de « lire la suite », ce qui peut être fait en cliquant sur cette mention. Dans WordPress, il existe une fonction qui permet cette présentation, au moyen d’une balise HTML spécialisée. Cette balise se trouve sur la partie haute de la fenêtre de l’éditeur (flèche rouge) :

Si vous cliquez dessus, votre article sera automatiquement séparé en deux parties à l’emplacement du curseur, au moyen d’une ligne grisée comme ceci :

L’internaute se verra alors proposé cette petite mention : (suite…). En cliquant dessus, la totalité d l’article deviendra visible.

L’idéal est donc de toujours commencer un article avec un paragraphe significatif de son contenu. Ce paragraphe pourra aussi être repris pour la description dans les champs de référencement. Cela permet de rassembler tous les avantages d’un bon référencement, et de faciliter le repérage par les internautes qui visitent le site.

Pour ce faire, positionnez le curseur à la fin de ce paragraphe, cliquez sur la balise « suite », et le tour est joué !

Vous en avez terminé avec les liens, et aussi avec votre article.

Accès au site officiel

Nous avons vu au chapitre 5 comment se connecter au site clone. Pour se connecter sur le site officiel, la démarche est exactement la même, seule l’adresse change (https://compagnonsbethune.fr).

Connectez-vous sur le site officiel. En fin des menus de droite, sous le menu « Compagnons » vous trouvez deux options : « Connexion » et « Espace privé ». Cliquez sur « Connexion » et vous obtiendrez directement cette boîte de dialogue :

Vous devez saisir le couple d’identifiants qui vous a été communiqué, ce qui vous permet d’accéder directement sur le tableau de bord.

Si vous cliquez sur « Espace privé », vous obtiendrez une page spéciale du site contenant une autre boîte de dialogue :

Entrez vos identifiants, et vous pourrez alors pénétrer dans l’espace privé du site. Dans cet espace, observez qu’une ligne supérieure est ajoutée. Vous la connaissez déjà, c’est celle qui vous permet d’accéder dans le tableau de bord de gestion.

En fait, tous les compagnons qui peuvent se connecter dans cet espace ont aussi accès au tableau de bord. Cependant, ils sont simplement enregistrés comme « Abonné », et ils ne peuvent faire autre chose que compléter ou modifier leur profil.