Verwendung von Shortcodes zum Einbetten von Veranstaltungskalendern auf Ihrer WordPress-Website

In WordPress ist ein Shortcode ein kleines Stück Code, mit dem Sie dynamische Inhalte zu Ihren Seiten, Beiträgen und Widgets hinzufügen können. Shortcodes werden durch eckige Klammern [ ] dargestellt und werden verwendet, um verschiedene Arten von Inhalten wie Bilder, Audio, Video, Formulare und mehr einzubetten.

Wenn Sie FooEvents verwenden, um Ihre Veranstaltungen und Buchungen zu verwalten, möchten Sie vielleicht Veranstaltungen als Kalender auf Ihrer Website anzeigen (siehe Demo). Dies lässt sich leicht mit der Funktion FooEvents-Kalender Plugin und Shortcodes. In diesem Beitrag werden wir die FooEvents-Kalender-Shortcodes verwenden, um WordPress-Veranstaltungskalender schnell in Beiträge und Seiten einzubetten. Diese Shortcodes können auch zur Anzeige von Kalendern mit den meisten Page Buildern verwendet werden, wie z.B. dem integrierten WordPress-Blöcke, Elementor, Biber-Bauer und Divi.

FooEvents bietet zwei Möglichkeiten zur Erstellung von Veranstaltungen auf Ihrer WordPress-Website. Die erste Möglichkeit ist das Hinzufügen von Ereignisdetails zu einem Standard-WordPress-Beitrag oder einer Seite mit der FooEvents-Kalender Plugin. Dies geschieht bei der Bearbeitung des Beitrags oder der Seite. Das FooEvents-Kalender-Plugin fügt dann unten auf der Seite ein Formular für die grundlegenden Veranstaltungseinstellungen hinzu, in dem Sie das Datum und die Uhrzeit der Veranstaltung festlegen können.

Die zweite und anspruchsvollere Option ist die Verwendung der FooEvents für WooCommerce Plugin und Erweiterungen, um Ihren WooCommerce-Produkten Event-, Buchungs- und Ticketing-Funktionen hinzuzufügen.

Um zu veranschaulichen, wie die verschiedenen Ereignisse im Kalender angezeigt werden, habe ich die folgenden drei Ereignisse mit FooEvents eingerichtet:

Eintägige Konferenz die sich am April 28, 2023 von 9 Uhr bis 17 Uhr
Mehrtägige Konferenz die sich am 14.-16. April 2023 von 9 Uhr bis 17 Uhr (siehe die FooEvents Mehrtägig Plugin)
Buchbare Dienstleistung oder Veranstaltung die sich am verschiedene Tage im April 2023 auf drei verschiedene Zeitfenster (siehe die FooEvents Buchung Plugin)

Pssst: Wenn Sie neu bei FooEvents sind und einen Blick unter die Haube werfen möchten, Zugang zu einer Admin-Demo-Umgebung beantragen wo Sie alle aktuellen FooEvents-Plugins über das WordPress-Dashboard testen können.

Als nächstes habe ich eine neue WordPress-Seite (oder einen Beitrag) erstellt und einen Shortcode-Block mit dem folgenden Shortcode hinzugefügt:

[fooevents_calendar]

Nach der Veröffentlichung der Seite wird der folgende Kalender im Frontend angezeigt.

Anpassen des Veranstaltungskalenders

Nachdem wir den Kalender nun eingebettet haben, können wir ihn nach unseren Wünschen und Anforderungen anpassen. Dies geschieht durch Hinzufügen verschiedener Eigenschaften zum Shortcode.

Kalenderstarttag ändern

Stellen Sie die Kalenderspalten so ein, dass sie an einem Montag oder Sonntag beginnen.

[fooevents_calendar firstDay="0"] 0 = Sonntag, 1 = Montag usw.

Bestimmten Monat anzeigen

Legen Sie das Standarddatum fest, das der Kalender beim ersten Laden anzeigen soll. Dies ist nützlich, wenn Ihre Veranstaltung erst zu einem späteren Zeitpunkt beginnt.

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

Nach Kategorie filtern

Erstellen Sie Kalender für verschiedene Gruppen von Veranstaltungen. Dies ist nur für WooCommerce-Veranstaltungen möglich. Ordnen Sie einfach die relevanten Ereignisse einer WooCommerce-Kategorie zu und geben Sie den Slug der Kategorie mit der Option einschließen_katze Eigentum.

[fooevents_calendar include_cat="featured"]

Geben Sie die Anzahl der anzuzeigenden Ereignisse an

Begrenzen Sie die Anzahl der Ereignisse, die im Kalender angezeigt werden sollen. Standardmäßig werden alle Ereignisse angezeigt, die innerhalb des Monats stattfinden.

[fooevents_calendar num=10]

Anzeige von mehreren Kalendern pro Seite

Sie können mehrere Kalender pro Seite einbetten. Stellen Sie dazu einfach sicher, dass jeder Shortcode eine eindeutige Kalender-ID angibt.

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

Einstellen des Zeitformats

Passen Sie das Zeitformat mithilfe der unterstützten FullCalendar-Datumsformate an: https://fullcalendar.io/docs/v1/formatDate

[fooevents_calendar timeFormat="H.mm"]

Wochenenden ausblenden

[fooevents_calendar weekends="false"]

Anzeige-Modi

Der FooEvents-Kalender verfügt über verschiedene Anzeigemodi und kann über die defaultView Eigentum.

Listenansicht anzeigen (Tag)

[fooevents_calendar defaultView="listDay"]

Listenansicht anzeigen (Woche)

[fooevents_calendar defaultView="listWeek"]

Listenansicht anzeigen (Monat)

[fooevents_calendar defaultView="listMonth"]

Listenansicht anzeigen (Jahr)

[fooevents_calendar defaultView="listYear"]

Bestimmte Ereignisse anzeigen

Zeigen Sie mehrere Ereignisse an, indem Sie die ID des Produkts, des Beitrags oder der Seite angeben. Sie können ein einzelnes Ereignis oder mehrere Ereignisse anzeigen, indem Sie eine durch Komma getrennte Liste von IDs eingeben.

[fooevents_calendar post="123,456"]

Kalenderfarben

Sie können das von Ihrem Kalender verwendete Thema global ändern, indem Sie die Option Kalenderthema in den FooEvents-Haupteinstellungen festlegen.

Gehen Sie zu Ihrem WordPress-Verwaltungsdashboard > FooEvents-Einstellungen
Klicken Sie auf das Kalender Registerkarte
Wählen Sie eine Thema Kalender Option (Standard, Hell, Flach, Minimalistisch oder Dunkel)
Speichern Sie Ihre Änderungen!

Seitenersteller

WordPress-Seitenerstellungsprogramme sind Plugins, mit denen Benutzer benutzerdefinierte Layouts für ihre WordPress-Seiten und -Beiträge ohne Programmierkenntnisse erstellen und gestalten können. Da Shortcodes zu den Standardfunktionen von WordPress gehören, unterstützen die meisten WordPress-Seitenerstellungsprogramme Shortcodes. Das folgende Beispiel zeigt, wie Sie Elementor um den Kurzcode FooEvent Calendar auszugeben.