Advertisement
  1. Code
  2. WordPress

Anzeigen von Kursplänen und Stundenplänen mit einem WordPress-Kalender-Plugin

by
Read Time:9 minsLanguages:

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Websites müssen die Benutzer oft über bevorstehende Veranstaltungen wie Filmvorführungen, Ausstellungen und Klassen informieren. Das Auflisten des Zeitplans für bevorstehende Veranstaltungen hilft jedem, Zeit zu sparen und seine Aktivitäten zu planen. Mit einem guten Veranstaltungslistenkalender können Ihre Benutzer anstehende Veranstaltungen zusammen mit ihrem Timing, Ihrem Standort, ihrer Verfügbarkeit und ihren Preisen an einem einzigen Ort sehen. Dies hilft Ihnen, viele sich wiederholende Anfragen nicht zu beantworten zu müssen, und macht es wahrscheinlicher, dass Benutzer Tickets für die Veranstaltungen kaufen.

Die Nützlichkeit dieser Veranstaltungskalender und Planungs-Plugins macht sie sehr beliebt bei Website-Besitzer. Es gibt eine Menge von kostenlosen und bezahlten Plugins da draußen, die Ihnen helfen können, solche Zeitpläne zu erstellen und sie auf Ihrer Website zu posten. Eines der besten ist Timetable Responsive Schedule for WordPress, verfügbar auf CodeCanyon. In diesem Tutorial zeige ich Ihnen, wie Sie den Timetable Responsive Schedule verwenden, um einen wöchentlichen Zeitplan zu erstellen, der verschiedene Kurse und deren Details auflistet.

Was wir bauen werden: ein Kursplan

Das Plugin bietet viele nette Funktionen, die wir verwenden werden, wenn wir unseren eigenen Kursplan zu erstellen. Das folgende Bild zeigt das Endergebnis, das Sie am Ende dieses Tutorials haben werden.

The course timetable well be buildingThe course timetable well be buildingThe course timetable well be building

Wie durch der Name des Plugins andeutet, wird der Zeitplan, den wir erstellen, responsive sein und auf allen Geräten gut aussehen. Das Plugin bietet auch von Haus aus Buchungsfunktionalität an. Dies bedeutet, dass Benutzer sich für verschiedene Kurse registrieren können, indem sie auf eine Schaltfläche im Zeitplan selbst klicken.

Grundlagen des Plugins Timetable Responsive Schedule

In diesem Abschnitt werden wir einfach einige der Grundlagen behandeln, die Ihnen helfen zu verstehen, wie das Plugin funktioniert.

Nach der Installation des Plugins, Werden Sie feststellen, dass es vier neue Menüoptionen in Ihrem WordPress Admin Dashboard: Zeitplan (Timetable), Zeitplanbuchungen (Timetable Bookings), Zeitplanspalten (Timetable Columns), Veranstaltungen (Events).

Die Menüoption Timetable Columns wird verwendet, um den Inhalt anzugeben, der im Kopf unserer Tabelle angezeigt wird. Es kann alles sein, was Sie mögen. Sie können z. B. Spalten für Monate, Tage, Datumsangaben oder Orte erstellen.

Die Menüoption Events enthält verschiedene Einstellungen, mit denen Sie Ereignisse einrichten und erstellen können. Es gibt eine Option, um verschiedene Kategorien zu erstellen, um Ereignisse zusammen zu gruppieren. Genau wie die Zeitplan-Spalten können auch die Ereigniskategorien unterschiedliche Werte mit beliebigen Namen haben. Wenn die Ereignisse z. B. an verschiedenen Orten stattfinden, können Sie sie mit Standorten kategorisieren. Wenn der Zeitplan für Filme ist, die derzeit in verschiedenen Kinos gezeigt werden, könnte die Kategorie das Filmgenre sein.

Es gibt keinen richtigen oder falschen Weg, Zeitplanspalten oder Ereigniskategorien festzulegen. Wichtig ist, die Veranstaltungen organisiert zu gruppieren, was es den Menschen erleichtert, schnell Informationen über Veranstaltungen zu finden, die ihnen gefallen.

Im Moment müssen wir nur über diese beiden Menüoptionen Bescheid wissen, um unsere Veranstaltungen zu erstellen und sie zu kategorisieren. Wir werden die verbleibenden Optionen später besprechen.

Erstellen des Kursplans

Nachdem wir uns mit den Grundlagen vertraut gemacht haben, können wir nun mit der Erstellung unseres responsiven Zeitplans beginnen.

Zuerst erstellen wir sieben Spalten – eine für jeden Wochentag. Gehen Sie dazu einfach zu Timetable Columns > Neu hinzufügen. Sie müssen nur den Titel der Spalte ausfüllen und auf Veröffentlichen klicken. Dadurch wird der Wochentag zur Liste der Spalten hinzugefügt. Tun Sie dies für alle sieben Tage der Woche, um sieben verschiedene Spalten zu erhalten.

Timetable ColumnsTimetable ColumnsTimetable Columns

Jetzt ist es an der Zeit, einige Kategorien für unsere Kurse zu definieren. Wir werden die Themen und Kategorien für unsere Kurse verwenden. Beispielsweise fallen sowohl Algebra- als auch Statistikkurse unter die Kategorie Mathematik. In ähnlicher Weise werden die Französische Revolution und der Zweite Weltkrieg in die Kategorie Geschichte in unserem Zeitplan fallen.

Event CategoriesEvent CategoriesEvent Categories

Denken Sie daran, dass Sie ihre eigenen Kategorien erstellen können, je nachdem, wie Sie die Kurse organisieren möchten. Wie ich bereits sagte, gibt es hier kein absolutes Richtig oder Falsch. Ziel ist es, die Informationen leichter auffindbar zu machen.

Schließlich können wir mit der Erstellung des Kursplans beginnen, der auf der Website angezeigt wird. Gehen Sie einfach zu Events > Add New und beginnen Sie, alle Details auszufüllen. Einige Informationen, die Sie ausfüllen, werden nur angezeigt, wenn die Benutzer auf den Ereignislink klicken, um mehr darüber zu lesen. Weitere Informationen werden im Zeitplan selbst erscheinen.

Sie können zunächst den Titel und die Beschreibung des Kurses ausfüllen. Der Titel erscheint an vielen Stellen wie der QuickInfo, dem Kursplan sowie auf der Kursdetailsseite. Versuchen Sie, es kurz zu halten. Die Beschreibung wird nur auf der Detailseite angezeigt.

Event Title DescriptionEvent Title DescriptionEvent Title Description

Es gibt ein paar Optionen unter der Beschreibung wie den Untertitel und die Hintergrund- und Textfarben. Der Untertitel erscheint nur auf der Detailseite und befindet sich direkt unter dem Titel. In unserem Fall verwenden wir ihn, um den Namen des Lehrers anzugeben, der diesen Kurs unterrichten wird.

Event OptionsEvent OptionsEvent Options

Wenn Sie nicht möchten, dass Personen auf den Ereignistitel klicken und zur Detailseite wechseln, legen Sie den Wert Zeitplanereignis-URL deaktivieren auf Ja fest. Wir lassen es als Nein für unser Tutorial.

Nun legen wir einen Wert für die Felder im Abschnitt Eventstunden fest. Hier geben wir einfach die grundlegenden Details der Veranstaltung zusammen mit dem genauen Zeitpunkt der Veranstaltung an.

Event HoursEvent HoursEvent Hours

Wählen Sie einen der Wochentage aus dem Dropdown-Menü neben der Spalte Zeitplan aus. Es werden alle Spalten angezeigt, die Sie zuvor erstellt haben. Die Werte Start- und Endzeit geben an, wann die Klassen für den Kurs beginnen und enden. Sie müssen sie im 24-Stunden-Format angeben, ohne am Ende AM und PM hinzuzufügen. Das bedeutet, dass 9:00 Uhr AM als 09:00 Uhr und 2:00 Uhr PM als 14:00 Uhr angegeben werden muss. Das endgültige Format, in dem das Datum im Stundenplan angezeigt wird, kann jedoch weiterhin so eingestellt werden, dass andere Formate angezeigt werden.

Sie müssen nicht beide Beschreibungsfelder ausfüllen. Der Text in Beschreibung 1 wird vor dem Ereignistitel angezeigt. Der Text in Description 2 wird nach dem Ereignistitel angezeigt. Der Text in Tooltip wird als QuickInfo angezeigt, wenn Benutzer mit der Maus auf das Ereignis zeigen.

Legen Sie die Anzahl der verfügbaren Slots auf die maximale Anzahl von Kursteilnehmern fest, die eine Klasse aufnehmen dürfen. Benutzer können sich für eine Klasse registrieren, solange die Gesamtzahl der registrierten Schüler unter dem angegebenen Grenzwert liegt.

Klicken Sie auf die Schaltfläche Hinzufügen, sobald Sie alle Details ausgefüllt haben. Dadurch wird die Veranstaltung zu unserem Zeitplan hinzugefügt. Nachdem Sie alle Vorkommen des Ereignisses hinzugefügt haben, klicken Sie oben auf die Schaltfläche Aktualisieren.

Anzeigen des Zeitplans auf der Website

Sie müssen Shortcodes verwenden, um den Zeitplan zu einer Seite oder einem Beitrag auf Ihrer Website hinzuzufügen. Die Shortcodes zum Hinzufügen des Zeitplans können ziemlich groß und kompliziert werden, wenn Sie viele Optionen konfigurieren. Um sicherzustellen, dass Sie keine Fehler machen, beinhaltet das Plugin mit einem Shortcode-Generator, auf den Sie zugreifen können, indem Sie zu Timetable > Shortcode Generator gehen.

Sie müssen für jeden von Ihnen erstellten Zeitplan einen eindeutigen Bezeichner erstellen. In diesem Fall geben wir course-schedule in das Feld Shortcode-ID ein.

Auf der Registerkarte Hauptkonfiguration können wir verschiedene Optionen festlegen, um zu bestimmen, was in unserem Kursplan angezeigt wird. Wählen Sie unter Ereignisse alle Kurse aus, die Sie erstellt haben. Wählen Sie unter Ereigniskategorien alle Kategorien aus, deren Ereignisse im Zeitplan angezeigt werden sollen. Sie können bestimmte Tage aus Spalten auswählen, für die Sie den Zeitplan anzeigen möchten. Ich habe alle Tage der Woche außer Sonntag ausgewählt.

Shortocode Generator EventsShortocode Generator EventsShortocode Generator Events

Wir ermöglichen unseren Benutzern, die Kurse so zu filtern, dass sie nur die Kurse sehen können, die sie belegen möchten. Legen Sie den Filterstil auf Registerkarten fest, um die Ereigniskategorien als Registerkarten oben in der Tabelle anzuzeigen. Der Text in Filter-Beschriftung bestimmt, welcher Text Benutzern angezeigt werden soll, wenn die Tabelle für ungefilterte Zeitpläne angezeigt werden soll. Wir werden es auf Alle Kurse setzen.

Shortcode Generator FiltersShortcode Generator FiltersShortcode Generator Filters

Dies sind die wichtigsten Optionen im Abschnitt Hauptkonfiguration. Sie können die restlichen Felder ihren Standardwerten überlassen. Klicken Sie nun auf die Schaltfläche Speichern auf der Shortcode-Generator-Seite und kopieren Sie den generierten Shortcode.

Fügen Sie den kopierten Shortcode in eine beliebige Seite oder einen Beitrag ein, auf der der Zeitplan angezeigt werden soll. Sie sollten ein ähnliches Ergebnis wie das Bild unten erhalten.

Course Schedule Final ResultCourse Schedule Final ResultCourse Schedule Final Result

Letzte Gedanken

In diesem Tutorial haben wir gelernt, wie man das Timetable Responsive Schedule-Plugin verwendet, um einen Kursplan zu erstellen. Das Plugin kommt mit vielen Funktionen, die es eine perfekte Planungslösung für viele Projekte machen. Wir haben das Plugin in diesem Tutorial verwendet, um einen Kursplan zu erstellen, aber Sie können es für viele andere Dinge wie Planung und Buchung, Filmtickets in verschiedenen Kinos oder das Zeigen des Zeitplans für verschiedene Exponate in der Stadt in einer Woche verwenden.

Sie können über alle Funktionen des Plugins auf der Beschreibungsseite lesen. Der Kauf des Plugins gibt Ihnen Zugriff auf sechs Monate kostenlosen Support und lebenslange Updates. Wie planen Sie mit diesem Plugin? Lassen Sie es uns in den Kommentaren unten wissen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.