Comment utiliser les shortcodes pour intégrer des calendriers d'événements sur votre site WordPress

Dans WordPress, un shortcode est un petit morceau de code qui vous permet d'ajouter du contenu dynamique à vos pages, posts et widgets. Les shortcodes sont représentés par des crochets [ ] et sont utilisés pour intégrer différents types de contenu tels que des images, du son, des vidéos, des formulaires, etc.

Si vous utilisez FooEvents pour gérer vos événements et vos réservations, vous souhaiterez peut-être afficher les événements sous forme de calendrier sur votre site web (voir la démo). Ceci est facilement réalisable à l'aide de la fonction FooEvents Calendrier et des shortcodes. Dans cet article, nous utiliserons les shortcodes FooEvents Calendar pour intégrer rapidement les calendriers d'événements WordPress dans les articles et les pages. Ces shortcodes peuvent également être utilisés pour afficher des calendriers à l'aide de la plupart des constructeurs de pages tels que l'outil intégré Blocs WordPress, Elementor, Beaver Builder et Divi.

FooEvents propose deux façons de créer des événements sur votre site WordPress. La première option consiste à ajouter les détails de l'événement à un article ou à une page standard de WordPress à l'aide de la fonction FooEvents Calendrier plugin. Cette opération s'effectue lors de l'édition de l'article ou de la page. Le plugin FooEvents Calendar ajoutera alors un formulaire de base pour les paramètres de l'événement au bas de la page, où vous pourrez définir la date et l'heure de l'événement.

La seconde option, plus sophistiquée, consiste à utiliser la fonction FooEvents pour WooCommerce et des extensions pour ajouter des fonctionnalités d'événement, de réservation et de billetterie à vos produits WooCommerce.

Pour illustrer l'affichage des différents événements dans le calendrier, j'ai configuré les trois événements suivants à l'aide de FooEvents :

Conférence d'une journée qui a lieu le 28 avril 2023 de 9 heures à 17 heures
Conférence de plusieurs jours qui a lieu le 14-16 avril 2023 de 9 heures à 17 heures (voir le FooEvents Plusieurs jours plugin)
Service ou événement réservable qui a lieu le plusieurs jours au cours du mois d'avril 2023 sur trois créneaux horaires différents (voir le FooEvents Réservation plugin)

Pssst : Si vous êtes nouveau sur FooEvents et que vous souhaitez jeter un coup d'œil sous le capot, demander l'accès à l'environnement de démonstration de l'administrateur où vous pouvez tester tous les derniers plugins FooEvents à partir du tableau de bord WordPress.

Ensuite, j'ai créé une nouvelle page (ou un nouvel article) WordPress et j'ai ajouté un bloc de shortcodes avec le shortcode suivant :

[fooevents_calendar]

Après la publication de la page, le calendrier suivant s'affichera sur le front-end.

Personnalisation du calendrier des événements

Maintenant que nous avons intégré le calendrier, nous pouvons le personnaliser en fonction de nos préférences et de nos besoins. Pour ce faire, nous ajoutons diverses propriétés au shortcode.

Modifier le jour de début du calendrier

Réglez les colonnes du calendrier pour qu'elles commencent un lundi ou un dimanche.

[fooevents_calendar firstDay="0"] 0 = dimanche, 1 = lundi, etc.

Afficher un mois particulier

Définissez la date par défaut que le calendrier doit afficher lors de son premier chargement. Ceci est utile si votre événement ne commence qu'à une date ultérieure.

[fooevents_calendar defaultDate= "2023-09-01"]

Filtrer par catégorie

Créer des calendriers pour différents groupes d'événements. Ceci ne s'applique qu'aux événements WooCommerce. Il suffit de rattacher les événements concernés à une catégorie WooCommerce et de spécifier l'intitulé de la catégorie à l'aide de l'attribut include_cat propriété.

[fooevents_calendar include_cat="featured"]

Spécifier le nombre d'événements à afficher

Limiter le nombre d'événements à afficher sur le calendrier. Par défaut, tous les événements ayant lieu au cours du mois s'affichent.

[fooevents_calendar num=10]

Afficher plusieurs calendriers par page

Vous pouvez intégrer plusieurs calendriers par page. Pour ce faire, assurez-vous simplement que chaque code court spécifie un identifiant de calendrier unique.

[fooevents_calendar id="cal1"], [fooevents_calendar id="cal2"] etc.

Régler le format de l'heure

Personnalisez le format de l'heure en utilisant les formats de date pris en charge par FullCalendar : https://fullcalendar.io/docs/v1/formatDate

[fooevents_calendar timeFormat="H.mm"]

Cacher les week-ends

[fooevents_calendar weekends="false"]

Modes d'affichage

Le calendrier FooEvents comprend différents modes d'affichage et peut être réglé à l'aide de la touche Vue par défaut propriété.

Affichage de la liste (jour)

[fooevents_calendar defaultView="listDay"]

Affichage de la liste (semaine)

[fooevents_calendar defaultView="listWeek"]

Affichage de la liste (mois)

[fooevents_calendar defaultView="listMonth"]

Affichage de la liste (année)

[fooevents_calendar defaultView="listYear"]

Afficher des événements spécifiques

Affichez plusieurs événements en spécifiant l'identifiant du produit, de l'article ou de la page. Vous pouvez afficher un seul événement ou plusieurs événements en saisissant une liste d'identifiants séparés par des virgules.

[fooevents_calendar post="123,456"]

Couleurs du calendrier

Vous pouvez modifier globalement le thème utilisé par votre calendrier en définissant l'option Thème du calendrier dans les paramètres principaux de FooEvents.

Accédez à votre Tableau de bord de WordPress > Paramètres de FooEvents
Cliquez sur l'icône Calendrier onglet
Sélectionner un Thème du calendrier (Défaut, Clair, Plat, Minimaliste ou Foncé)
Économiser vos changements !

Constructeurs de pages

Les constructeurs de pages WordPress sont des plugins qui permettent aux utilisateurs de créer et de concevoir des mises en page personnalisées pour leurs pages et leurs articles WordPress sans aucune connaissance en matière de codage ou de programmation. Les shortcodes étant une fonctionnalité standard de WordPress, la plupart des constructeurs de pages WordPress prennent en charge les shortcodes. L'exemple suivant illustre l'utilisation de Elementor pour afficher le shortcode FooEvent Calendar.