Advertisement
  1. Code
  2. Theme Development

Wie kann man eine Ticketverkaufs-Website mit WordPress und TicketTailor erstellen? Tag 2: Erstellen

Scroll to top
Read Time: 13 min
This post is part of a series called How to Build a Ticket Sales Website with WordPress and TicketTailor.
Build a Ticket Sales Website with WordPress & TicketTailor: Planning

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Im ersten Teil dieses Tutorials haben wir uns mit den Dingen befasst, die Sie berücksichtigen müssen, bevor Sie sich an die Arbeit machen und Ihre Ticketing-Website-Vorlage erstellen. Jetzt fügen wir alle Funktionen hinzu, die Sie von einer Ticketing-Website erwarten.

Wir werden direkt in die Vorlage eintauchen, die aus der Standard-WordPress-Installation von Twenty Eleven erstellt wurde, und uns eine pfiffige Abfrage erstellen, die benutzerdefinierte Felddaten verwendet. Dann melden wir uns bei TicketTailor an und erfahren, wie wir Handlungsaufforderungen erstellen können, um sicherzustellen, dass unsere Benutzer problemlos einkaufen können.


Schritt 1 Fragen zu Abfragen

Eines der Dinge, die mich beim Schreiben von Code zur Verwendung mit WordPress ständig überraschen, ist die Menge an fortgeschrittenen Aufgaben, die mit einem relativ einfachen Codeausschnitt und ein wenig Querdenken erledigt werden können. Ich habe nicht mehr gezählt, wie oft ich eine übermäßig komplizierte Lösung für ein Problem verwendet habe, nur um festzustellen, dass durch das Ändern einer Codezeile zu einem späteren Zeitpunkt nicht mehr 100 Zeilen erforderlich sind, die ich geschrieben habe, als ich das Projekt an meine geliefert habe Klient.

Die Ticketing-Website ist eines dieser Beispiele. Mein Kunde wollte eine Website, die zwischen zukünftigen und vergangenen Ereignissen trennt. Ich habe das Problem mit einem Plugin gelöst, das die Kategorie eines Ereignisses zu einem bestimmten Zeitpunkt an einem bestimmten Tag automatisch von 'Zukunft' in 'Vergangenheit' änderte. Das war überhaupt nicht nötig.

Mit WordPress-Post-Abfragen können wir nach benutzerdefinierten Feldern abfragen. Das bedeutet, dass wir für unsere Posts ein benutzerdefiniertes Feld mit dem Namen 'Datum' festlegen und dann unsere Posts danach anordnen können. Wie Sie wahrscheinlich sehen können, bedeutet dies, dass wir auch Beiträge verschwinden lassen oder alles andere tun können, indem wir eine gute Abfrage schreiben und dann unsere benutzerdefinierten Felder sorgfältig verwenden.

Lassen Sie uns fortfahren und eine Abfrage für unsere Indexseite schreiben. Wir wollen folgende Dinge tun:

  1. Zeigen Sie die nächsten 4 Konzerte
  2. Verstecken Sie alle, die bereits vergangen sind
  3. Ordnen Sie sie nach dem Datum, an dem sie stattfinden sollen, und nicht nach dem Datum, an dem wir den Beitrag erstellt haben

Hier ist die Abfrage, mit der wir das tun werden:

Das enthält viele Symbole und Buchstaben. Lassen Sie es uns also aufschlüsseln:

  • post_type - Das teilt WordPress nur mit, dass wir Beiträge anstelle von Seiten oder einem anderen Beitragstyp verwenden möchten
  • posts_per_page - Legen Sie die Anzahl der Beiträge fest, die Sie anzeigen möchten. Wir haben 4 für das Beispiel verwendet, aber Sie können eine beliebige Zahl festlegen, die 1 oder höher ist
  • meta_key - Denken Sie daran, dass wir Beiträge über ein benutzerdefiniertes Feld abfragen können? Das teilt WordPress mit, wie das von uns verwendete Feld heißt
  • meta_value - Da wir ein Datum als Abfrage verwenden, teilt dies WordPress mit, welches Datumsformat zu erwarten ist
  • meta_compare - Das macht genau das, was es sagt: Vergleicht die Metawerte aller Beiträge in der Schleife. Hier werden sie mit dem auf Ihrem Webserver festgelegten Datum verglichen und es wird sichergestellt, dass nur Beiträge angezeigt werden, deren Datum heute oder in Zukunft liegt
  • order_by - Sagt WordPress, dass unsere Beiträge in der Reihenfolge meta_value und nicht nach dem Standard-Post-Datum angezeigt werden sollen
  • order - Dadurch wird WordPress darüber informiert, dass die Beiträge in aufsteigender Reihenfolge angezeigt werden: Nächste Show zuerst, am weitesten unten auf der Seite
  • paged - Wenn die Paginierung für Ihr Thema aktiviert ist, benötigen Sie diese. Wenn dies nicht der Fall ist, wirkt sich dies nicht auf Ihre Vorlage aus

Beeindruckend! Tiefer Atemzug. Wir haben gerade den Code geschrieben, der von nun an den größten Teil unserer Arbeit antreibt - gute Arbeit! Lassen Sie es uns jetzt in unserer index.php-Datei ablegen. So sollte die Datei index.php danach aussehen:

Klicken Sie auf Speichern und laden Sie dann Ihre Site. Hier sieht etwas falsch aus, oder? Alle Ihre Beiträge sind verschwunden:

Wo sind meine Beiträge geblieben?!

Keine Sorgen machen! Das heißt, unsere Abfrage hat funktioniert. Denken Sie daran, dass Sie WordPress angewiesen haben, das benutzerdefinierte Feld 'Datum' zum Anzeigen Ihrer Beiträge zu verwenden. So clever WordPress auch ist, wenn Sie in Ihren Posts kein benutzerdefiniertes Feld 'Datum' festlegen, werden Ihre Posts nicht angezeigt! Jetzt müssen wir unser Problem beheben.


Schritt 2 Hinzufügen des benutzerdefinierten Felds 'Datum'

Laden Sie Ihr WordPress-Dashboard und navigieren Sie zu einem Ihrer Beiträge. Klicken Sie auf 'Bearbeiten'. Wenn Sie noch nie zuvor benutzerdefinierte Felder auf Ihrer Website verwendet haben, werden die Felder möglicherweise in Ihrem Nachbearbeitungsfenster ausgeblendet. Um sie zu aktivieren, klicken Sie oben rechts in Ihrem Fenster auf 'Bildschirmoptionen' und aktivieren Sie das Kontrollkästchen neben 'Benutzerdefinierte Felder'. Das sollte Ihnen die Möglichkeit geben, benutzerdefinierte Felder hinzuzufügen, indem Sie von nun an zum unteren Rand des Fensters scrollen. Fügen Sie ein neues benutzerdefiniertes Feld mit dem Namen 'Datum' hinzu.

Das benutzerdefinierte Feld unterscheidet zwischen Groß- und Kleinschreibung. Es spielt keine Rolle, was Sie eingeben, solange es mit dem Namen des benutzerdefinierten Felds in Ihrer Abfrage übereinstimmt.

Jetzt müssen Sie auch ein Datum im richtigen Format hinzufügen. Zuvor haben wir in unserer Abfrage angegeben, dass wir das Datumsformat verwenden möchten: JJJJ/MM/TT - Für dieses Tutorial müssen Sie sich an dieses Format halten. Wenn Sie das nicht tun, funktioniert Ihr Code nicht. Das liegt daran, dass WordPress unglaublich effizient Daten vergleicht und ab dem ersten Jahr sicherstellt, dass nur Beiträge in diesem und in der Zukunft angezeigt werden. Dann macht es das gleiche für Monate. Dann tagelang.

Während sich dieses Datumsformat für Sie wahrscheinlich nicht natürlich anfühlt, erspart es Ihnen viel Ärger. Sie sollten etwas haben, das so aussieht:

Fügen Sie allen Ihren Posts Daten hinzu, indem Sie jetzt das benutzerdefinierte Feld 'Datum' verwenden. Laden Sie dann Ihre index.php-Datei neu und Sie werden sehen, dass Sie die vier Konzerte (Beiträge) mit dem nächstgelegenen 'Datum' haben. Vier sind ebenfalls verschwunden (vorausgesetzt, Sie haben die XML-Datei verwendet, die ich Ihnen im ersten Teil gegeben habe). Es gibt einen Grund dafür und wir werden uns das gleich ansehen.


Schritt 3 Melden Sie sich bei TicketTailor an

TicketTailor ist eine großartige Website, die Veranstaltern von Konzerten einen Ticket- und Checkout-Service bietet. Neben einem unglaublichen Kundenservice verfügen sie auch über eine umfangreiche Back-End-Plattform, die Ticketverkaufsstatistiken, Affiliate-Link-Funktionen, erweiterte Ticketing-Funktionen wie verschiedene Preisstufen sowie die Möglichkeit bietet, benutzerfreundliche Gästelisten für Konzerte auszudrucken.

Während Sie diese Funktionen möglicherweise an anderer Stelle erhalten können, können Sie die Anpassungshilfe der TicketTailor-Mitarbeiter nirgendwo anders erhalten. Mit den drei wichtigsten Plänen im Preisplan passt das Team hinter TicketTailor Ihre Verkaufsseite auf dem Server so an, dass sie genau wie Ihre WordPress-Site aussieht - unabhängig davon, was Sie damit gemacht haben. Das ist ziemlich schlau.

Das ist nicht in den Basic- oder Promoter-Paketen enthalten. Wenn Sie jedoch nicht bezahlen möchten, können Sie diese Dienste auch nutzen.

Melden Sie sich bei TicketTailor an und richten Sie eine Veranstaltung ein, damit Sie eine Ticketing-URL haben, an die Sie Personen senden und die Sie in diesem Tutorial verwenden können.


Schritt 4 Hinzufügen eines Ticket-Links

Wenn Sie Schritt 3 übersprungen haben, haben Sie sich nicht für TicketTailor angemeldet und sind jetzt verloren. Sie sollten zurückgehen und es jetzt tun.

Sie haben also Ihr Testereignis auf TicketTailor eingerichtet und können über den Link im TicketTailor-Administrationsbereich auf Ihr 'Geschäft' zugreifen. Verbinden wir nun unsere WordPress-Site und unsere TicketTailor-Site. Wir tun dies mithilfe von Call-to-Action-Schaltflächen, die dynamisch betrieben werden.

Ein benutzerdefiniertes Feld für Ticket-Links

Erinnern Sie sich, wie wir in Schritt 2 ein benutzerdefiniertes Feld für 'Datum' hinzugefügt haben? Jetzt machen wir dasselbe für unseren Ticketlink. Nur dass wir diesmal keine Abfrage schreiben müssen.

Öffnen Sie den Post-Editor, fügen Sie das benutzerdefinierte Feld 'Ticket' hinzu und geben Sie die URL des Testereignisses ein, das Sie in TicketTailor eingerichtet haben, damit Ihr Post-Panel folgendermaßen aussieht:

Wir müssen das benutzerdefinierte Feld 'Ticket' verwenden, um eine Schaltfläche unter dem Poster für das Konzert zu generieren. Wir möchten jedoch nur, dass die Schaltfläche angezeigt wird, wenn für den Beitrag ein benutzerdefiniertes Feld 'Ticket' vorhanden ist. Öffnen Sie die Datei content.php und fügen Sie den folgenden Code direkt unter Zeile 14 ein (der den Beitragsinhalt aufruft).

Aktualisieren Sie nun Ihre Indexseite und solange Ihre Veranstaltung ist:

  • Nicht in der Vergangenheit,
  • Eine der nächsten vier Veranstaltungen,

Sie sollten so etwas sehen:


Schritt 5 Verwandeln Sie das in einen Aufruf zum Handeln

Das Internet ist voller Modewörter - kein Feld ist voller Modewörter als die Webdesign-Welt. Einer der großen Trends im Design ist die Idee, jemanden mit einem Knopf dazu zu bringen, etwas zu tun. Das wird als 'Aufruf zum Handeln' bezeichnet und sie funktionieren wirklich. Wir werden diesen einfachen Ticket-Link mithilfe einiger CSS-Zeilen und eines Klassen-Tags in unserem HTML-Code in einen Aufruf zum Handeln verwandeln. Ich habe das folgende CSS als Beispiel verwendet, aber Sie können alles verwenden, was Sie möchten. Fügen Sie Ihrer style.css-Datei einfach Folgendes hinzu:

Aktualisieren Sie anschließend Ihre Datei content.php, um diese neuen Stile zu berücksichtigen, indem Sie Ihren Link zu diesem ändern:

Aktualisieren Sie das und Sie haben eine gut aussehende Vorlagendatei, die auf eine TicketTailor-Seite verweist, die einen gut aussehenden Call-to-Action-Button, eine clevere Schleife und ein bisschen Querdenken verwendet, um eine wirklich schöne Ticketing-Website zu erhalten, die so aussieht:


Zusätzliche Schritte Hinzufügen einiger Schnörkel

Wir könnten hier einfach anhalten und eine wirklich funktionierende Website haben, aber wir können noch ein paar Dinge tun.

Es gibt ein paar Dinge, die jeder mag, der Live-Musikkonzerte besucht, und das sind:

  • Erleben Sie die Erinnerungen an ihre Lieblingskonzerte noch einmal
  • Waren kaufen

Da Sie bereits die meisten Werkzeuge zur Hand haben, um Ihre Kunden noch glücklicher zu machen, gehen Sie doch noch zwei Schritte weiter - sie kommen eher zu Ihren Shows, wenn Sie sie ein bisschen glücklicher machen als andere Veranstalter .

Helfen Sie ihnen, ihre Erinnerungen wieder zu erleben

Denken Sie daran, dass wir die Hälfte unserer Konzertplakate aus unserer Abfrage herausgeschnitten haben, indem wir die Anzahl der Auftritte festgelegt haben, die in Schritt 1 als '4' angezeigt werden sollen. Jetzt sind wir zum Grund dafür gekommen. Wäre es nicht eine nette Geste, Ihren Kunden zu erlauben, alle Shows zu sehen, die Sie jemals neben all den Shows gezeigt haben, die auf Sie zukommen? Sicher würde es!

Öffnen Sie dazu Ihre index.php-Datei und ändern Sie sie wie folgt:

Das ist ein großer Teil des Codes, also teilen wir ihn in überschaubare Teile auf.

Den ersten Teil werden Sie bereits erkennen, da es sich um die zuvor verwendete Abfrage handelt. Der einzige Unterschied besteht darin, dass ich das Argument posts_per_page auf -1 gesetzt habe, was bedeutet, dass die Startseite niemals paginiert wird.

Die zweite Abfrage, die zweite Hälfte des Codes, sollte Ihnen ebenfalls sehr vertraut vorkommen, da sie mit zwei Ausnahmen fast genau mit dem Code übereinstimmt, den wir zuvor geschrieben haben:

  • 'meta_compare' ist auf '<' gesetzt, damit WordPress weiß, dass wir Beiträge anzeigen möchten, die in der Vergangenheit liegen.
  • 'order' ist auf absteigend eingestellt, damit die neuesten Ereignisse zuerst angezeigt werden. Wenn Sie die ältesten Ereignisse zuerst anzeigen möchten, können Sie dies auf ASC anstatt auf DESC setzen.

Der andere Unterschied im Code besteht darin, dass wir einen neuen Vorlagenteil für vergangene Ereignisse aufgerufen haben, da Tickets für vergangene Ereignisse nicht mehr zum Verkauf stehen. Wir könnten einige bedingte Anweisungen schreiben und einfach die Standard-Datei content.php verwenden, aber das ist unnötig schwierig. Duplizieren Sie einfach die Datei content.php und entfernen Sie die Zeilen, in denen die Schaltfläche 'Tickets abrufen' angezeigt wird:

Und wie wäre es mit dem Verkauf von Waren?

Sie wissen bereits, wie das geht, da Sie zuvor Ticket-Links und die benutzerdefinierten Felder für diese eingerichtet haben. Der Verkauf von Postern oder T-Shirts über BigCartel oder einen gleichwertigen Service ist genau das gleiche. Richten Sie einfach ein benutzerdefiniertes Feld mit dem Namen 'Merch' ein, geben Sie die URL Ihres Produkts ein und klicken Sie auf 'Aktualisieren'. Fügen Sie dann eine Codezeile direkt unter Ihrem Code 'Tickets kaufen' hinzu, die folgendermaßen aussieht:

Sie können dieses Snippet auch zu Ihrer Datei für vergangene Ereignisse (content-past.php) hinzufügen, damit Kunden jederzeit Waren bei Ihnen kaufen können.


Schlussfolgerung

Das ist das! Jetzt haben Sie eine Ticketing-Website, die WordPress in einen fantastischen Ticketing-Anbieter integriert, Call-to-Action-Schaltflächen anzeigt und Ihre Inhalte organisiert, ohne dass Sie jemals eine Kategorie, einen benutzerdefinierten Beitragstyp oder eine Taxonomie verwenden müssen.

Es gibt so viele Dinge, für die Sie diese Idee verwenden könnten. Hinterlassen Sie einen Kommentar, um uns mitzuteilen, was Sie mit dem Code in diesem Tutorial machen. Habe Spaß!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.