You are currently viewing Cool Timeline : Créer une ligne chronologique sur WordPress
Cool timeline créer une ligne chronologique sur WordPress

Cool Timeline : Créer une ligne chronologique sur WordPress

  • Auteur/autrice de la publication :
  • Post category:Plugin
  • Commentaires de la publication :0 commentaire

La timeline est utilisée par un grand nombre de réseaux sociaux. C’est une façon rapide et esthétique de voir rapidement des événements d’ordre chronologique. Avec le plugin Cool timeline nous allons pouvoir créer une ligne ascendante ou descendante, autrement dit : l’événement plus récent au moins récent ou inversement. Je souhaite aussi te rendre vigilant sur des petits pièges SEO de l’extension, nous allons voir tout cela ensemble en exemple. Sur cet article, j’utiliserai uniquement la version gratuite du plugin.

Je te donne quelques idées, pour utiliser cette extension : un CV en ligne, dans le cadre d’un ou plusieurs voyages, déterminer des objectifs, un festival sur plusieurs jours…
Concrètement, qu’est-ce que j’entends par timeline (en anglais : time = temps ; line = ligne) :
Un exemple d'une page en timeline
Un exemple d'une page en timeline

Installation du plugin Cool Timeline

Commence à installer le plugin, pour se faire va dans l’onglet extensions puis Ajouter. Dans le champ de recherche, tape cool timeline par Cool Plugin :

Plugin Cool Timeline
Plugin Cool Timeline

L’extension à 20 000 installations sur mon exemple (ça va, mais ce n’est pas fou fou), il est compatible avec mon WordPress et a été mis à jour il y a une semaine. Visiblement, le plugin est apprécié, puisqu’il a 4.5 étoiles sur 5 : ce sont 237 personnes qui ont voté ce plugin.

Cela augmente notre confiance envers ce plugin. Ça tombe bien, nous allons l’installer et l’activer.

Préparation de l’environnement avant de créer la timeline

Une fois le plugin installé et activé, nous allons créer une page « mes derniers voyages », un article « Rhodes », et un article « Inde du sud ». Tu peux créer davantage d’articles ou même utiliser une autre thématique que les voyages si cela t’inspire plus (j’avais déjà utilisé le voyage comme exemple pour créer une map de voyage). Ce qui est important, c’est qu’il y a un ordre chronologique et un événement associé :

L'exemple de la page Rhodes
L'exemple de la page Rhodes

Utilisation de l’extension

Je te donne rendez-vous sur la page « mes derniers voyages », à l’endroit de ton éditeur Gutenberg. Nous allons ajouter un bloc, et taper dans la zone de recherche « cool ». Il y a deux choix qui s’offre à toi, sélectionne « Cool Timeline – instant builder » :

Utiliser le plugin Cool Timeline sur Gutenberg
Utiliser le plugin Cool Timeline sur Gutenberg

« Pourquoi tu me dis d’utiliser cool timeline – Instant Builder et non Cool timeline Shortcode ? »

Pour deux raisons, je ne te préconise pas Cool timeline Shortcode :

  1. Tu vas pouvoir créer une seule timeline, si tu souhaites en créer une 2 ème, elle sera une copie de la première.
  2. Sur la timeline, tu auras par exemple le début de ton articleRhodes, si l’internaute veut lire la suite il cliquera surlire la suite, et sera dirigé vers ton article complet surRhodes. Le problème, le plugin va mettre ton article dans un sous dossier appelé cool_timeline, ce qui n’est pas bon pour le référencement (SEO). Il est préférable pour ton SEO que le nom de ton article, soit le plus proche possible, de ton nom de domaine (comme sur la deuxième image plus bas):
Une URL trop longue
Une URL trop longue
Une URL de la bonne taille
Une URL de la bonne taille

Quelques clics pour afficher une belle timeline

  1. Affiche la date à laquelle tu es allé à Rhodes
  2. Téléverse ta plus belle photo de ton voyage à Rhodes : tu pourras également utiliser la même photo en tête d’image de ton article sur Rhodes
  3. Inscris ton titre
  4. Décris brièvement ton article sur Rhodes, et place un lien lire la suite à la fin de cette partie qui dirigera le lecteur vers ton article Rhodes.
  5. Si tu veux rajouter un événement
Description de la création d'une timeline
Description de la création d'une timeline

Le résultat est assez rapide et joli.

Un autre piège SEO

Le plugin génère automatiquement un titre H3 pour chaque événement. Pour respecter les normes SEO, je te conseille de positionner au-dessus du bloc cool timeline – Instant Builder un titre H2 suivi d’un ou deux paragraphes :

Ajout d'un titre H2 et d'un paragraphe
Ajout d'un titre H2 et d'un paragraphe

Dommage que le plugin génère automatiquement un titre H3. J’aurais bien voulu choisir entre une balise H2, H3, H4, un paragraphe ou une balise div.

Optimisation pour rendre la lecture plus agréable

Le plugin aligne le texte des événements de gauche à droite. Si celui-ci est trop long, la lecture ne sera pas agréable : ce n’est pas le but pas vrai ?

Le texte est aligné à droite : lecture désagréable
Le texte est aligné à droite : lecture désagréable

Ben… on va arranger cela Explication :

  1. On va s’assurer que le bon bloc est bien sélectionné
  2. Cliques sur General Setting
  3. Nous allons choisir One Siled
  4. Le RESULTAT
Aligner le texte à gauche
Aligner le texte à gauche

L’inconvénient ou l’avantage, c’est que la timeline paraît plus longue.

Réglage de la police et la couleur

Sur le menu de droit, il est également possible de régler la taille de la police :

Réglage de la police du plugin Cool Timeline
Réglage de la police du plugin Cool Timeline

Par défaut ce n’est pas trop mal, je ne sais pas ce que tu en penses ?

Plus bas, il y a le sous module couleur, là tu vas pouvoir modifier la couleur de la barre si tu n’aimes pas le rose rouge. Dans ce même module, tu pourras également modifier la couleur du texte. Sur le lienCouleur personnalisée tu as la possibilité d’intégrer une couleur hexadécimale.

La partie CSS

Si le mot CSS ne t’évoque rien, ce n’est pas grave. Pour ceux qui utilisent le CSS, et qui souhaitent aller plus loin, tu pourras ajouter une class. Pour se faire, sur ton menu de droite, cliques sur le module Cool Timeline – Instant Builder, puis sur le sous module avancé, là tu auras ton champ class.

Ce qu’il faut retenir

Nous avons vu l’extension « Cool Timeline », avec ses pièges SEO, ses possibilités multiples, et comment l’utiliser.

Le plugin a été bien pensé, l’utiliser est plutôt agréable.

Si le texte d’un événement est long, il est certainement préférable d’aligner le texte à gauche, ce qui est faisable avec l’extension Cool Timeline.

Le plus important est de ne pas tomber dans les deux pièges qui ne favorisent pas le référencement naturel du plugin.

Le résultat de notre super page
Le résultat de notre super page

Que penses-tu de ce plugin ? n’hésite pas à exprimer ton ressenti

Si vous avez aimé l'article, vous êtes libre de le partager :-)

Laisser un commentaire