Hoe gebruik je shortcodes om evenement kalenders embedden op uw WordPress Site

In WordPress is een shortcode een klein stukje code waarmee je dynamische inhoud kunt toevoegen aan je pagina's, berichten en widgets. Shortcodes worden weergegeven door vierkante haakjes [ ] en worden gebruikt om verschillende soorten inhoud in te voegen, zoals afbeeldingen, audio, video, formulieren en meer.

Als je FooEvents gebruikt om je evenementen en boekingen te beheren, wil je misschien evenementen weergeven als een kalender op je website (demo bekijken). Dit is eenvoudig te bereiken met de FooEvents Kalender plugin en shortcodes. In deze post zullen we de FooEvents Calendar shortcodes gebruiken om snel WordPress evenement kalenders in te sluiten op berichten en pagina's. Deze shortcodes kunnen ook worden gebruikt om kalenders weer te geven met behulp van de meeste page builders, zoals de ingebouwde WordPress Blokken, Elementor, Bever bouwer en Divi.

FooEvents biedt twee manieren om evenementen te creëren op uw WordPress site. De eerste optie is om evenement details toe te voegen aan een standaard WordPress post of pagina met behulp van de FooEvents Kalender plugin. Dit doe je wanneer je het bericht of de pagina bewerkt. De FooEvents Agenda plugin zal dan een basis evenement instellingen formulier toevoegen aan de onderkant van de pagina, waar je de datum en tijd van het evenement kunt instellen.

De tweede en meer geavanceerde optie is om de FooEvents voor WooCommerce plugin en extensies om event, boeking en ticketing functionaliteit toe te voegen aan je WooCommerce producten.

Om te laten zien hoe verschillende gebeurtenissen worden weergegeven in de kalender, heb ik de volgende drie gebeurtenissen ingesteld met FooEvents:

Eendaagse Conferentie die plaatsvindt op 28 april 2023 van 9 tot 17 uur
Meerdaagse conferentie die plaatsvindt op 14-16 april 2023 van 9 tot 17 uur (zie de FooEvents Meerdaags plugin)
Boekbare dienst of evenement die plaatsvindt op verschillende dagen in april 2023 op drie verschillende tijdslots (zie de FooEvents Reservering plugin)

Pssst: Als je nieuw bent bij FooEvents en een kijkje onder de motorkap wilt nemen, toegang aanvragen tot een admin demo-omgeving waar je alle nieuwste FooEvents plugins kunt testen vanuit het WordPress dashboard.

Vervolgens maak ik een nieuwe WordPress pagina (of post) en voeg een shortcode blok toe met de volgende shortcode:

[fooevents_calendar]

Na het publiceren van de pagina wordt de volgende kalender weergegeven op de front-end.

De evenementenkalender aanpassen

Nu we de kalender hebben ingesloten, kunnen we deze aanpassen op basis van onze voorkeuren en vereisten. Dit doen we door verschillende eigenschappen toe te voegen aan de shortcode.

Begindag kalender wijzigen

Stel de kalenderkolommen zo in dat ze op maandag of zondag beginnen.

[fooevents_calendar firstDay="0"] 0 = zondag, 1 = maandag enz.

Bepaalde maand weergeven

Stel de standaarddatum in die de kalender moet weergeven wanneer hij voor het eerst wordt geladen. Dit is handig als je evenement pas op een latere datum begint.

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

Filter op categorie

Maak kalenders voor verschillende groepen evenementen. Dit geldt alleen voor WooCommerce-evenementen. Je hoeft alleen maar de relevante gebeurtenissen te taggen in een WooCommerce-categorie en de categorie-slug op te geven met de knop include_cat eigendom.

[fooevents_calendar include_cat="featured"]

Geef het aantal weer te geven gebeurtenissen op

Beperk het aantal gebeurtenissen dat wordt weergegeven op de kalender. Standaard worden alle evenementen weergegeven die binnen de maand plaatsvinden.

[fooevents_calendar num=10]

Meerdere kalenders per pagina weergeven

Je kunt meerdere kalenders per pagina opnemen. Om dit te doen, moet je er gewoon voor zorgen dat elke shortcode een unieke kalender-ID specificeert.

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

De tijdnotatie instellen

Pas de tijdnotatie aan met de ondersteunde datumnotaties van FullCalendar: https://fullcalendar.io/docs/v1/formatDate

[fooevents_calendar timeFormat="H.mm"]

Weekends verbergen

[fooevents_calendar weekends="false"]

Weergavemodi

De FooEvents kalender heeft verschillende weergavemodi en kan worden ingesteld met de standaardweergave eigendom.

Weergave lijstweergave (dag)

[fooevents_calendar defaultView="listDay"]

Lijstweergave (week) weergeven

[fooevents_calendar defaultView="listWeek"]

Lijstweergave (maand) weergeven

[fooevents_calendar defaultView="listMonth"]

Lijstweergave weergeven (jaar)

[fooevents_calendar defaultView="listYear"]

Specifieke gebeurtenissen weergeven

Toon meerdere gebeurtenissen door de ID van het product, bericht of pagina op te geven. Je kunt een enkele gebeurtenis of meerdere gebeurtenissen weergeven door een door komma's gescheiden lijst met ID's in te voeren.

[fooevents_calendar post="123,456"]

Kleuren kalender

Je kunt het thema dat wordt gebruikt door je agenda globaal aanpassen door de optie Agenda-thema in te stellen in de hoofdinstellingen van FooEvents.

Ga naar je WordPress admin dashboard > FooEvents Instellingen
Klik op de Kalender tab
Selecteer een Thema kalender optie (Standaard, Licht, Vlak, Minimalistisch of Donker)
Sla uw wijzigingen!

Pagina bouwers

WordPress page builders zijn plugins die gebruikers in staat stellen om te creëren en aangepaste lay-outs te ontwerpen voor hun WordPress pagina's en berichten zonder enige codering of programmering kennis. Omdat shortcodes zijn standaard WordPress functionaliteit, de meeste WordPress page builders ondersteunen shortcodes. Het volgende voorbeeld illustreert hoe u Elementor om de FooEvent Calendar shortcode uit te voeren.