So erstellen Sie eine Website für dynamische Termine mit OceanWP & Crocoblock

Möchten Sie eine dynamische Terminbuchungs-Website erstellen? Für diejenigen, die der Meinung sind, dass die Bereitstellung schwierig ist, gibt es gute Nachrichten – das ist es nicht. Heutzutage braucht man keine Entwickler, Programmierer und Designer mehr. Sie brauchen nur die richtigen Werkzeuge.

In diesem Artikel erfahren Sie, was eine gute Termin-Website ausmacht. Wir führen Sie durch die gesamte Website-Erstellungsroutine und geben Ihnen die Tools, die wir verwendet haben. Am Ende werden Sie herausfinden, wie Sie ein Buchungssystem nur mit OceanWP und mehreren Crocoblock-Plugins erstellen.

Was OceanWP und Crocoblock zusammen großartig macht

• Visuelle Website-Erstellung . Da Gutenberg ein visueller Blockeditor ist, können Website-Entwickler Zeit sparen, um zwischen dem Admin-Panel und dem Front-End hin und her zu wechseln. Es reicht aus, im Editor eine Seitenstruktur zu erstellen und sicherzustellen, dass die Frontend-Version gleich aussieht.
• Weniger externe Plugins . Vergessen Sie separate Plugins für benutzerdefinierte Beitragstypen, Formulare, Buchungsverwaltung, benutzerdefinierte Felder usw. Um die Terminfunktionalität zum Laufen zu bringen, benötigen Sie nur zwei Crocoblock-Plugins.
• Keine Zwischenhändler . Das bedeutet, dass sich Entwickler nicht auf Designer verlassen müssen. Sie können eine Demo-Vorlage von OceanWP nehmen, ihr Layout nach Belieben überarbeiten und ihr dynamische Crocoblock-Funktionen hinzufügen.

Termin-Website 101

Was ist eine Terminbuchungswebsite?

Termin-Websites sind Dienstleistungsplattformen, auf denen es möglich ist, ein bestimmtes Zeitfenster zu buchen. Häufig bieten diese Websites stundenweise bezahlte Dienste an.

Wie sehen Terminbörsen aus?

Dies können einseitige Visitenkarten-Websites sein, auf denen es möglich ist, eine bestimmte Dienstleistung bei einem einzigen Anbieter zu buchen. Auf der anderen Seite können Terminwebsites mehrere Anbieter beherbergen. In diesem Fall verfügt die Website über dedizierte Anbieter- und Service-Einzelseiten und -Kataloge.

Ist es schwierig, eine Terminwebsite zu erstellen?

Nicht mehr. Heutzutage können Sie mit den richtigen Tools eine dynamische Website von Grund auf neu erstellen – einen Seitenersteller, den Sie bevorzugen, einen Themenanbieter, ein Plugin für dynamische Inhalte und den Terminbuchungskern.

Was sind die wichtigsten Elemente der Termin-Website?

Dies wären ein Thema, benutzerdefinierte Beitragstypen, eine Terminbuchungsmaschine, Buchungsformulare, Anbieterseiten, Serviceseiten, Katalogseiten und Auflistungen.

Kann ich mehrere Anbieter zu derselben Website hinzufügen?

Warum nicht? Mehrere Fachleute können eine Dienstleistung erbringen. Stellen Sie sicher, dass Sie der Dienstleistung einen Anbieter zuweisen, um Verwechslungen beim Ausfüllen des Buchungsformulars zu vermeiden.

Termin-Website: Grundlegende Vorbereitungen

Wir haben uns entschieden, die frühen Vorbereitungen wie die Beschaffung eines Domainnamens und die Auswahl eines Hosting-Anbieters wegzulassen. Stattdessen konzentrieren wir uns auf das Wesentliche. Für diejenigen, die ins Detail gehen wollen, gibt es ein super informatives Video von Ferdy Korpershoek.

Holen Sie sich Crocoblock-Plugins

Crocoblock hat seine aktualisierten Preise vor sechs Monaten eingeführt. Was macht es cool? Es ist der benutzerdefinierte Abonnementplan . Um jetzt eine funktionierende Termin-Website zu erstellen, müssen Sie nicht viel ausgeben. Gehen Sie zur Crocoblock-Preisseite, klappen Sie die Registerkarte JetPlugins auf und fügen Sie die erforderlichen Plugins zum Warenkorb hinzu.

Sie benötigen JetEngine – ein Plugin für dynamische Inhalte, mit dem benutzerdefinierte Beitragstypen erstellt werden können – und JetAppointment – ein Servicebuchungs-WordPress-Plugin.

Ein solches benutzerdefiniertes Paket kostet Sie 45 $/Jahr für eine Website und 93 $/Jahr für unbegrenzte Websites. Außerdem erhalten Sie ein ganzes Jahr lang Plugin-Updates und Qualitätssupport. Laden Sie diese Plugins in das WordPress-Dashboard hoch und bereiten Sie sie für die weitere Arbeit vor.

Installieren Sie das OceanWP-Design und wählen Sie eine Website-Vorlage aus

Es gibt zwei Möglichkeiten, das Kernthema zu installieren – die traditionelle und die Crocoblock-Methode.

Installieren des OceanWP-Designs auf traditionelle Weise

Gehen Sie im WordPress-Adminbereich zu Darstellung > Themen und klicken Sie auf „ Neu hinzufügen“. Sie können die Suchleiste verwenden, um das Thema zu finden. Einmal gefunden, installieren Sie OceanWP und aktivieren Sie es.

Installation des OceanWP-Designs auf Crocoblock-Art

Verwenden Sie den Crocoblock-Installationsassistenten. Es kann vom Crocoblock-Konto heruntergeladen und dann zur Installation von OceanWP verwendet werden.

Um eine Demo-Vorlage auszuwählen, gehen Sie zu Themenbereich > Demos installieren und wählen Sie die gewünschte aus. Wir verwenden heute die Gym- Demo-Vorlage. Denken Sie daran, dass eine Demo nicht wie beabsichtigt funktionieren kann, wenn einige der Premium-Erweiterungen fehlen. Vielleicht möchten Sie sie zuerst bekommen.

Sobald die Installation der Demo-Vorlage abgeschlossen ist, können Sie eine dynamische Termin-Website erstellen.

Erstellen einer benutzerdefinierten Termin-Website

Auf jeder Website zur Termin- und Veranstaltungsplanung gibt es benutzerdefinierte Beitragstypen für Anbieter und Dienste , einen Kern für die automatische Terminbuchung, Kalenderintegration und ein Buchungsformular. Dies sind wesentliche Elemente, aber es steht Ihnen frei, die Liste beliebig zu erweitern.

Lassen Sie uns nun die Plugins JetEngine und JetAppointment sinnvoll einsetzen.

Erstellung benutzerdefinierter Beitragstypen

Warum müssen Sie ein CPT erstellen? Sie helfen Ihnen bei der Organisation der Website-Beiträge – Dienste für Dienste, Anbieter für Anbieter. Anschließend können diese Beiträge leicht miteinander verknüpft werden, damit die Website-Benutzer einen bestimmten Service von denen buchen können, die ihn anbieten.

Folgen Sie dem Pfad JetEngine > Post Types > Add New im WordPress-Adminbereich, um einen CPT zu erstellen. Denken Sie daran, dass Sie zwei Beitragstypen benötigen – einen für Anbieter und einen für Dienste. Da wir eine Fitnessstudio-Website erstellen, werden die Beitragstypen entsprechend Trainer und Workouts genannt.

Fügen Sie beiden Beitragstypen die erforderlichen Metafelder hinzu. Für den Trainer CPT könnten dies sein:

• Foto;
• Kurzbiografie;
• Berufserfahrung;
• Erfolge;
• Galerie;
• Kontakte.

Für die Workouts CPT können die Metafelder wie folgt aussehen:

• Galerie;
• Bezeichnung;
• maximale Kapazität;
• Ausrüstung;
• gesundheitliche Vorteile.

Schneller Tipp : JetEngine hat eine nützliche Glossar-Funktion . Es ermöglicht Ihnen, eine Reihe von Metafeldern zu erstellen und diese als Optionen für benutzerdefinierte Beitragstypen zu verwenden.

Fügen Sie als Nächstes den neu erstellten Beitragstypen so viele Beiträge wie nötig hinzu. Bewegen Sie dazu die Maus über den CPT-Namen im WordPress-Adminbereich und klicken Sie dann auf „ Neu hinzufügen “.

Sobald Sie fertig sind, können Sie mit der Konfiguration des JetAppointment-Plugins fortfahren.

JetAppointment-Setup

Es ist nicht so schwierig, das Terminbuchungs-Plugin von Crocoblock einzustellen. Sie müssen lediglich den Setup-Assistenten ausführen und vier Installationsschritte ausführen.

Gehen Sie im Admin-Bereich zu Termine > Einrichten. Sie werden zur JetPlugins -Einstellungsseite weitergeleitet, nämlich zur JetAppointment -Registerkarte Einrichten. Klicken Sie auf die gleichnamige Schaltfläche, um den Assistenten auszuführen.

• Schritt 1 . Sie müssen die Beitragstypen „Dienste“ und „Anbieter“ in der entsprechenden Dropdown-Liste auswählen. Vergessen Sie nicht, den Schalter Anbieter hinzufügen zu aktivieren; Andernfalls wird das Feld nicht angezeigt. Klicken Sie auf „ Weiter “.

• Schritt 2 . Hier sehen Sie die erforderlichen Datenbanktabellenspalten. Setzen Sie die Installation fort, wenn Sie keine weiteren Spalten hinzufügen möchten. Wir werden Telefon und Kommentare hinzufügen.

• Schritt 3 . Dieser Schritt dient der Konfiguration des Dienstes und anbieterspezifischen Details wie Dauer, Pufferzeit, freie Tage, Arbeitszeiten usw. Eine detaillierte Schrittübersicht finden Sie in diesem Video-Tutorial.

• Schritt 4 . Schließlich können Sie WooCommerce integrieren und zwei Terminbuchungsformulare erstellen. Zu den verfügbaren Optionen gehören „JetEngine Forms“ und „JetFormBuilder“. Der erste ist für Elementor und der zweite für Gutenberg bestimmt.

Drücken Sie die Schaltfläche „Fertigstellen“ , um die Einrichtung abzuschließen.

Bevor Sie die Terminbuchungsformulare bearbeiten, müssen Sie die Beiträge Anbieter und Dienste miteinander verknüpfen. Öffnen Sie den Beitrag eines Anbieters und suchen Sie die Registerkarte Zugehörige Dienste in der linken Seitenleiste. Geben Sie drei Zeichen in dieses Textfeld ein und wählen Sie den erforderlichen Dienst aus, sobald das System ihn vorschlägt.

Wiederholen Sie den Vorgang so oft, wie es dedizierte Provider-Posts gibt. Sobald Sie fertig sind, können Sie mit den Formularen herumspielen.

JetFormBuilder und Formularergänzung zu Seiten

Das Tolle an Crocoblock-Produkten ist, dass einige tatsächlich kostenlos sind. Nehmen Sie JetFormBuilder. Es ist ein WordPress-Plugin zum Erstellen von Formularen, mit dem Website-Entwickler dynamische Formulare im Gutenberg-Seiteneditor erstellen können. Sie können das Plugin herunterladen, aktivieren und sofort verwenden.

Gehen Sie zu JetFormBuilder > Formulare . Die beiden generierten Formulare werden dort angezeigt. Wir müssen sie bearbeiten, da wir während der Termineinrichtung zwei Spalten zur DB-Tabelle hinzugefügt haben. Jetzt müssen wir die erforderlichen Metafelder zu den Formular- und Post-Submit-Aktionen hinzufügen.

Klicken Sie hier, um das Buchungsformular für statische Seiten zu bearbeiten, und fügen Sie die fehlenden Metafelder hinzu, indem Sie die entsprechenden Gutenberg-Blöcke ziehen und ablegen. Wir benötigen zwei – ein Textfeld und ein Textbereichsfeld – um die Felder „Telefon“ und „Kommentar“ hinzuzufügen.

Als Nächstes müssen Sie diese Felder in die Post Submit Actions eingeben. Drücken Sie dazu auf die Registerkarte JetForm , scrollen Sie nach unten zum Abschnitt Post Submit Actions und klicken Sie auf das Stiftsymbol unter dem Aktionsnamen. Sie sehen ein Bearbeitungsfenster für die Post Submit Action, in dem Sie die Formularfelder auswählen sollen, wo sie hingehören.

Außerdem können Sie hier die WooCommerce-Integration einrichten, vorausgesetzt, Sie haben sie in Schritt 4 aktiviert. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „ Aktualisieren “.

Schneller Tipp . Sie können gerne mehrere Post Submit Actions auf einmal hinzufügen, aber stellen Sie sicher, dass sich ihre Bedingungen nicht widersprechen. In diesem Fall schlägt die Formularübermittlung fehl.

Wenn Sie mit der Anpassung des Buchungsformulars für statische Seiten fertig sind, aktualisieren Sie es und fügen Sie es der Website-Seite hinzu. Wir haben eine spezielle Seite „Alle Workouts “ erstellt, die eine dynamische JetEngine-Liste anzeigt. Ein Buchungsformular wird unter dem Gitter schön aussehen.

Öffnen Sie die Seite, auf der Sie das Formular platzieren möchten, suchen Sie den JetForm- Block in der linken Seitenleiste, ziehen Sie ihn per Drag-and-Drop in den gewünschten Bereich und wählen Sie dann das soeben bearbeitete Formular in der Dropdown-Liste „Formular auswählen“ in der rechten Seitenleiste aus .

Aktualisieren Sie die Seite und sehen Sie, wie sie auf dem Frontend aussieht.

Jetzt fragen sich die aufmerksamsten Leser: „Wie kommt es, dass die Form aufgestylt ist?“. Das liegt daran, dass wir ein weiteres Plugin in den Mix geworfen haben. Lesen Sie weiter, um herauszufinden, welche.

Gehen Sie zurück zum WordPress-Dashboard und öffnen Sie den Pfad Termine > Termine . Da haben Sie es – alle Termine sitzen fest. Hier können Sie sie anzeigen, bearbeiten, löschen, filtern und ihren Status ändern.

Wie Sie sehen können, ist die Terminbuchungsfunktion in Betrieb. Es gibt jedoch noch mehr Dinge, die Sie tun können, um die Website für die Terminvereinbarung noch dynamischer zu gestalten.