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.
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 :
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é :
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 » :
« 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 :
- 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.
- 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):
Quelques clics pour afficher une belle timeline
- Affiche la date à laquelle tu es allé à Rhodes
- 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
- Inscris ton titre
- 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.
- Si tu veux rajouter un événement
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 :
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 ?
Ben… on va arranger cela Explication :
- On va s’assurer que le bon bloc est bien sélectionné
- Cliques sur General Setting
- Nous allons choisir One Siled
- Le RESULTAT
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 :
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.
Que penses-tu de ce plugin ? n’hésite pas à exprimer ton ressenti
