Comment créer une chronologie d’événement dans WordPress

Une chronologie d’événements WordPress peut être un moyen visuel très efficace pour transmettre des données, conférant à votre page une touche esthétique et interactive unique. Une chronologie est le plus souvent utilisé pour afficher une séquence d’événements, il convient donc parfaitement à l’historique de votre entreprise (ou groupe ou relation), à vos jalons personnels ou aux dates de sortie du contenu. Cela peut également être utile si vous créez un site Web pour un événement – cela pourrait être une nouvelle façon d’afficher votre emploi du temps. Vous devez juste vous assurer que la méthode choisie est compatible avec votre plugin de gestion d’événements, au cas où vous en utiliseriez un.

Il existe plusieurs façons de créer une chronologie d’événements WordPress. Notre première suggestion, comme toujours, est d’utiliser un thème qui a déjà une fonctionnalité de chronologie. Si vous travaillez sur un budget ou si vous ne voulez pas changer votre thème simplement parce qu’il n’utilise pas de chronologie, vous pouvez toujours créer une chronologie. Nous allons vous montrer deux manières de procéder : avec un bloc Gutenberg et en utilisant un plugin spécialisé.

Comment créer une chronologie d’événement avec un bloc Gutenberg

Vous pouvez créer une chronologie des événements à l’aide de l’éditeur Gutenberg, mais le bloc dont vous avez besoin spécifiquement à cette fin n’est pas inclus – vous devez installer Blocs Gutenberg – Addons ultimes pour Gutenberg. Ce plugin vous donnera une multitude de nouveaux blocs avec lesquels travailler, dont le bloc de chronologie des événements, dont nous vous montrerons l’utilisation ici. Si vous ne savez pas comment installer un plugin, nous avons ce qu’il vous faut.

Une fois que vous avez installé et activé le plugin, vous pouvez créer une chronologie dans un article ou une page en cliquant sur le bouton signe plus pour ajouter un bloc et trouver le bloc de chronologie de contenu. Ce sera dans le Blocs d’extension ultimes menu, mais le moyen le plus simple de le trouver serait d’utiliser la barre de recherche.

Vous verrez maintenant une chronologie d’espace réservé. Lorsque ce bloc est sélectionné, vous verrez plusieurs menus sur le côté droit. Celui ouvert par défaut est Nombre d’objets. Nous allons l’augmenter à 6.

Le suivant est Paramètres de date. Vous pouvez choisir d’afficher ou non les dates à l’aide de la Afficher la date de publication basculer. Dans le Date Sous-menu Format, vous pouvez modifier le format de la date. Nous laisserons ces deux contrôles tels qu’ils sont, mais vous pouvez les régler selon vos préférences. Nous allons changer nos dates pour suivre dans l’ordre chronologique. Le format de la date dans le Paramètres de date champs est MM/JJ/AAAA. Au bas du menu se trouvent les paramètres que vous pouvez utiliser pour choisir différentes couleurs et modifier les options de typographie pour le texte de la date, mais nous laisserons cela par défaut.

Ensuite, nous avons le Disposition sous-menu. Ceux-ci traitent de Orientation de la ligne du temps elle-même, Alignement des flèches par rapport à la boîte d’événement, et comment la chronologie s’empile (Empiler sur), ce qui est pertinent pour la réactivité et l’apparence de la chronologie sur les tablettes et les plateformes mobiles. Nous laisserons les valeurs par défaut.

le Espacement Le sous-menu contient des options pour le comportement de chaque case de la chronologie. Vous pouvez les modifier à votre guise, mais nous trouvons l’espacement entre les cases très bien, nous ne les manipulerons donc pas. Dans le Élément de la chronologie sous-menu, vous pouvez sélectionner les paramètres de typographie pour les éléments de la chronologie. Nous laisserons le réglage principal sur H4, augmenter le Coins arrondis réglage à 10, ce qui rend nos boîtes plus douces, et le Rembourrage à 30, pour allonger un peu la chronologie. Nous ne changerons pas le Titre ou Contenu paramètres, mais vous pouvez le faire en cliquant sur le clé icône. Ces paramètres concernent l’apparence du texte à l’intérieur des cases.

Enfin, dans le Connecteur sous-menu, vous pouvez modifier les paramètres de la ligne de connexion entre les cases. Nous allons changer l’icône en chope de bière, mais ne changerons pas les autres paramètres d’icône (taille, taille de l’arrière-plan, largeur de la bordure et largeur du connecteur). le Connecteur le sous-menu contient son propre sous-menu – Paramètres de couleur. Nous allons l’utiliser pour changer la couleur du connecteur en mauve (#aa86a6) pour changer la couleur du Ligne, Frontière et Fond quand ils sont dans Concentrer, en le laissant gris clair en mode Normal. Cependant, toutes les couleurs des éléments sont personnalisables, vous pouvez donc les modifier en fonction de la conception de votre site Web. Nous ne changerons pas le Paramètres de couleur. Ce sous-menu contient les options de couleur pour vos boîtes et le texte qu’elles contiennent. Nous ne modifierons pas non plus les paramètres dans le Avancée sous-menu, car ils ne sont pas nécessaires pour cette démonstration. Nous ajouterons également du texte à nos événements, pour les étoffer. Vous pouvez simplement cliquer pour modifier n’importe quel titre et description dans n’importe quelle case.

Et la chronologie de votre événement à l’aide d’un bloc Gutenberg personnalisé est terminée !

Comment créer une chronologie d’événement à l’aide d’un plugin spécialisé

Pour cette démonstration, nous utiliserons Chronologie cool. Ce n’est qu’une de nos solutions préférées. Si vous recherchez un plugin, nous avons dressé une liste de plugins de chronologie WordPress parmi lesquels vous pouvez choisir. Vous devrez d’abord installer et activer le plugin Cool Timeline. Si vous ne savez pas comment installer et activer un plugin, nous avons également un tutoriel pour cela.

Après avoir installé et activé le plugin, nous devons maintenant le configurer. Trouvez la chronologie cool Réglages de ton Plugins écran. Dans réglages généraux, qui régissent les paramètres par défaut pour toutes les histoires que vous utiliserez Chronologie cool car, nous allons changer le Titre de la chronologie à Notre histoire, nous laisserons le Étiquette d’en-tête de titre comme H1, mais vous pouvez choisir des rubriques de H1 à H6. Nous allons définir le Nombre d’histoires à afficher à 6, tandis que nous laisserons le Longueur du contenu à 50 mots. Nous laisserons également le Description des histoires et Ordre des histoires aux valeurs par défaut de Court et DESCfin.

Nous téléchargerons également une photo gratuite en tant que Image par défaut de la chronologie et laisser le Afficher en savoir plus au Oui, la valeur par défaut. Nous allons alors Sauvegarder les modifications.

Ensuite, dans le Paramètres de style onglet, nous laisserons le Contexte du conteneur au DÉSACTIVÉ. Nous choisirons des couleurs pour Contexte de l’histoire, Cercle, Ligne, D’abord et Seconde qui correspondra mieux à notre thème général. Nous ne toucherons pas au Styles personnalisés section. Nous ne jouerons pas non plus avec le Paramètres de typographie, qui concernent les paramètres de police pour Titre principal, Titre de l’histoire et Publier un contenu, avec l’option supplémentaire de minuscule, majuscule, et en majuscule (défaut) Style du titre de l’histoire. De la même manière, Paramètres avancés ne nous intéressent pas, car, avec la version gratuite avec laquelle nous travaillons, ils n’incluent qu’un aperçu des fonctionnalités premium.

Une fois que nous avons enregistré nos paramètres, nous allons naviguer vers Histoires de la chronologie/Ajouter de nouvelles dans le menu de gauche.

Nous allons générer chaque élément de l’histoire séparément, en lui donnant un Titre, en sélectionnant un Bière icône dans le Menu d’icônes d’histoire, une date, en utilisant le Sélecteur de date, et du texte généré aléatoirement comme remplissage. Nous allons répéter cela six fois, créant six histoires. Vous pouvez également choisir un L’image sélectionnée pour chacun d’eux. Nous le laisserons clair pour cette démonstration.

Une fois que vous avez toutes vos histoires alignées, voici ce que votre Histoires de la chronologie/Toutes les histoires l’écran devrait ressembler.

Le plugin Cool Timeline fonctionne mieux pour les pages. Pour créer une page d’histoire, accédez à Pages/Ajouter un nouveau en utilisant votre menu de gauche. Assurez-vous que vous utilisez l’éditeur classique. Nous allons ajouter un titre à notre page d’histoire et utiliser notre nouveau Cool Timeline Shortcode générateur à Ajouter un code court de chronologie sympa.

Le menu chronologie apparaîtra. Nous quitterons le Mise en page de la chronologie par défaut, définissez le Dates de la chronologie à Ymd, laissez le Apparence de la chronologie comme Défaut, sélectionnez OUI pour le Icône de l’histoire, met le nombre d’histoires à 6, sélectionnez Rien pour Effet d’animation d’histoires, Résumé pour Description de l’histoire, et DESCfin pour l’ordre de l’histoire. Notez que ces paramètres remplaceront le Général paramètres dans les options de configuration du plugin. Une fois terminé, nous cliquerons d’accord.

Cela créera un shortcode là où se trouvait notre curseur dans le champ de texte principal. Et maintenant, vous avez une chronologie accrocheuse pour vos visiteurs.

En conclusion

Vous connaissez maintenant deux façons d’afficher une chronologie d’événements dans WordPress. Utile pour les histoires d’entreprise, les chronologies des réalisations personnelles, les chronologies des projets et similaires, mais nous pouvons également le voir utilisé comme une nouvelle façon d’afficher les horaires d’événements ou comme un outil éducatif montrant des événements historiques ou des stades de développement d’organismes – tout sujet qui implique une progression. Une chronologie d’événement n’est qu’un outil de visualisation de données, et avec un peu d’imagination, vous pouvez faire beaucoup de choses différentes avec. Ainsi, que vous utilisiez un plugin, un bloc Gutenberg ou une fonctionnalité de thème, les chronologies d’événements sont un outil utile pour s’y retrouver.