So erstellen Sie eine Ticket-Sales-Website mit WordPress und TicketTailor, Tag zwei Gebäude

Im ersten Teil dieses Tutorials haben wir uns mit den Dingen beschäftigt, die Sie berücksichtigen müssen, bevor Sie mit der Erstellung Ihrer Ticketing-Websitevorlage beginnen. Jetzt fügen wir alle Funktionen hinzu, die Sie von einer Ticketing-Website erwarten würden.

Wir tauchen direkt in die Vorlage ein, die aus der standardmäßigen WordPress-Installation von Twenty Eleven erstellt wurde, und bauen eine schnörkellose Abfrage mit benutzerdefinierten Felddaten auf. 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

Ich bin immer wieder überrascht, wenn ich Code schreibe, der mit WordPress verwendet werden kann. Dies ist die Menge an fortgeschrittenen Aufgaben, die mit einem relativ einfachen Code-Ausschnitt und etwas Querdenken erledigt werden können. Ich habe nicht mehr mitgezählt, wie oft ich eine zu komplizierte Lösung für ein Problem verwendet habe, nur um festzustellen, dass das Ändern einer Codezeile zu einem späteren Zeitpunkt die Notwendigkeit von 100 Zeilen beseitigt, die ich geschrieben habe, als ich das Projekt an mein Projekt lieferte Klient.

Die Ticketing-Website ist eines dieser Beispiele. Mein Kunde wollte eine Website, die zwischen zukünftigen und vergangenen Ereignissen trennte. 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" geändert hat. Das war überhaupt nicht nötig.

WordPress-Post-Abfragen ermöglichen die Abfrage nach benutzerdefinierten Feldern. Das bedeutet, dass wir in unseren Posts beispielsweise ein benutzerdefiniertes Feld mit dem Namen "Date" setzen können, um unsere Posts danach zu ordnen. Wie Sie wahrscheinlich sehen können, bedeutet dies, dass wir auch Beiträge verschwinden lassen können oder andere Aufgaben erledigen können, indem wir einfach 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 möchten folgende Dinge tun:

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

Hier ist die Abfrage, die wir dazu verwenden werden:

 query_posts (array ('post_type' => 'post', 'posts_per_page' => 4, 'meta_key' => 'Date', 'meta_value' => date ("J / m / d"), 'meta_compare' => '> =', 'orderby' => 'meta_value', 'order' => 'ASC', 'paged' => get_query_var ('paged')));

Darin befinden sich viele Symbole und Buchstaben.

  • post_type - Dies sagt WordPress nur, dass wir Posts anstelle von Seiten oder einem anderen Beitragstyp verwenden möchten
  • posts_per_page - Legt 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 einstellen, die 1 oder höher ist
  • meta_key - Denken Sie daran, dass wir Beiträge nach einem benutzerdefinierten Feld abfragen können? Dies teilt WordPress mit, wie das Feld, das wir verwenden, aufgerufen wird
  • meta_value - Da wir ein Datum als Abfrage verwenden, teilt dies WordPress mit, welches Datumsformat zu erwarten ist
  • meta_compare - Dies macht genau das, was es sagt: vergleicht die Meta-Werte aller Posts in der Schleife. Hier werden sie mit dem Datum verglichen, das auf Ihrem Webserver festgelegt ist, und stellt sicher, dass nur Posts angezeigt werden, die ein Datum haben, das heute oder in der Zukunft liegt
  • order_by - Sagt WordPress, dass wir möchten, dass unsere Beiträge in der Reihenfolge von meta_value und nicht nach dem Standarddatum angezeigt werden
  • Reihenfolge - Dies lässt WordPress wissen, dass wir die Beiträge in aufsteigender Reihenfolge anzeigen werden: Nächste Show zuerst, nächstes Datum weiter unten auf der Seite
  • paged - Wenn für Ihr Thema die Paginierung aktiviert ist, benötigen Sie dies. Wenn dies nicht der Fall ist, hat dies keine Auswirkungen auf Ihre Vorlage

Beeindruckend! Tiefer Atemzug. Wir haben gerade den Code geschrieben, der von nun an den Großteil unserer Arbeit unterstützt - gute Arbeit! Lassen Sie uns es jetzt in unsere index.php-Datei legen. So sollte die index.php-Datei danach aussehen:

  
'post', 'posts_per_page' => 4, 'meta_key' => 'Date', 'meta_value' => Datum ("J / m / d"), 'meta_compare' => '> =', 'orderby' = > 'meta_value', 'order' => 'ASC', 'paged' => get_query_var ('paged'))); ?>

Klicken Sie auf Speichern und laden Sie Ihre Site. Etwas sieht hier falsch aus? Alle deine Beiträge sind verschwunden:

Wo sind meine Beiträge gegangen??!

Keine Sorgen machen! Das heißt, unsere Abfrage hat funktioniert. Erinnern Sie sich daran, dass Sie WordPress angewiesen haben, das benutzerdefinierte Datumsfeld zu verwenden, um Ihre Beiträge anzuzeigen? So klug wie WordPress auch ist: Wenn Sie in Ihren Posts kein benutzerdefiniertes Datumsfeld festlegen, werden Ihre Posts nicht angezeigt! Jetzt müssen wir unser Problem beheben.


Schritt 2 Hinzufügen des benutzerdefinierten Datumsfelds

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

Bei dem benutzerdefinierten Feld wird die Groß- und Kleinschreibung beachtet. Es ist egal, was Sie eingeben, solange es mit dem Namen des benutzerdefinierten Felds in Ihrer Abfrage übereinstimmt.

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

Dieses Datumsformat fühlt sich für Sie wahrscheinlich nicht natürlich an, aber es erspart Ihnen viel Ärger. Du solltest etwas haben, das so aussieht:

Fügen Sie jetzt zu allen Beiträgen Datumsangaben hinzu, indem Sie das benutzerdefinierte Feld "Datum" verwenden. Laden Sie anschließend die Datei index.php neu und Sie werden feststellen, dass die vier Konzerte (Posts) mit dem nächstgelegenen Datum angezeigt werden. Vier sind ebenfalls verschwunden (vorausgesetzt, Sie haben die XML-Datei verwendet, die ich Ihnen im ersten Teil gegeben habe). Dafür gibt es einen Grund und wir werden das gleich ansehen.


Schritt 3 Melden Sie sich bei TicketTailor an

TicketTailor ist eine großartige Seite, die einen Ticketing- und Checkout-Service für Konzertveranstalter anbietet. Abgesehen von einem unglaublichen Kundenservice, verfügen sie auch über eine umfangreiche Back-End-Plattform, die Verkaufsstatistiken für Verkaufsstellen, Affiliate-Link-Funktionen, fortschrittliche 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 Sie nirgendwo anders auf die Anpassungshilfe der TicketTailor-Mitarbeiter zurückgreifen. Mit den drei wichtigsten Plänen in ihrem Preisplan passt das Team hinter TicketTailor Ihre Verkaufsseite auf ihrem Server so an, dass sie genau wie Ihre WordPress-Site aussieht - unabhängig davon, was Sie damit gemacht haben. Das ist ziemlich schlau.

Dies ist nicht in den Basic- oder Promoter-Paketen enthalten, aber wenn Sie nicht bezahlen möchten, können Sie auch diese Dienste nutzen.

Melden Sie sich bei TicketTailor an und richten Sie ein Ereignis ein, sodass Sie eine Ticket-URL haben, an die Personen gesendet und in diesem Tutorial verwendet werden können.


Schritt 4 Hinzufügen eines Ticketlinks

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

Sie haben also Ihr Testereignis bei TicketTailor eingerichtet und können über den Link im TicketTailor-Verwaltungsbereich auf Ihren Store zugreifen. Jetzt verbinden wir unsere WordPress-Site und unsere TicketTailor-Site. Wir machen dies mit Call-to-Action-Buttons, die dynamisch gespeist werden.

Ein benutzerdefiniertes Feld für Ticketlinks

Denken Sie daran, wie wir in Schritt 2 ein benutzerdefiniertes Feld für "Datum" hinzugefügt haben. Jetzt machen wir dasselbe für unseren Ticketlink. Nur müssen wir diesmal keine Abfrage schreiben.

Ö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 Beitragsfenster folgendermaßen aussieht:

Wir müssen das benutzerdefinierte Feld "Ticket" verwenden, um eine Schaltfläche unterhalb des Plakats für das Konzert zu generieren. Wir möchten jedoch, dass die Schaltfläche nur angezeigt wird, wenn ein benutzerdefiniertes Feld "Ticket" für den Beitrag vorhanden ist. Öffnen Sie die Datei content.php und legen Sie den folgenden Code in Zeile 14 (die den Postinhalt aufruft) an.

  ID, 'Ticket', wahr); if ($ Ticket):?> "> Tickets abrufen 

Aktualisieren Sie jetzt Ihre Indexseite und solange Ihre Veranstaltung:

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

Sie sollten so etwas sehen:


Schritt 5 Verwandeln Sie das in einen Handlungsaufruf

Das Internet ist voller Schlagworte - kein Feld ist voller Worte als die Webdesign-Welt. Einer der großen Trends im Design ist die Idee, einen Knopf zu verwenden, um jemanden dazu zu bewegen, etwas zu tun. Dies wird als "Aufruf zum Handeln" bezeichnet, und sie funktionieren wirklich - also werden wir aus dem einfachen Ticketlink einen Aufruf zum Handeln erstellen, indem wir ein paar CSS-Zeilen und ein Klassen-Tag in unserem HTML-Code verwenden. 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:

 a.btn width: 100px; Auffüllen: 10px 10px 10px 10px; Rand unten: 10px; Schriftgröße: 16px; Textdekoration: keine; Farbe weiß; Text-Schatten: -1px -1px 2px #fff; Hintergrund: # ff00cc; Rahmen: 1px fest #ccc; Grenzradius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;  a.btn: hover text-shadow: -1px -1px 2px #fff; Hintergrund: # 00bafb; Rahmen: 1px fest #ccc; 

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

 "> Tickets kaufen

Aktualisieren Sie das und Sie haben eine schön aussehende Vorlagendatei, die mit einer TicketTailor-Seite verlinkt ist, die einen hübsch aussehenden Call-to-Action-Button, eine clevere Schleife und ein wenig Querdenken verwendet, um eine wirklich schöne Ticket-Website zu erhalten, die folgendermaßen aussieht:


Zusätzliche Schritte Hinzufügen einiger Flourishes

Während wir einfach dort aufhören und eine wirklich funktionale Website haben könnten, gibt es noch ein paar Dinge, die wir tun können.

Es gibt ein paar Dinge, die jeder, der zu Live-Musikkonzerten geht, und das sind:

  • Erleben Sie die Erinnerungen an ihre Lieblingskonzerte
  • Waren kaufen

Da Sie die meisten Tools bereits an Ihren Fingerspitzen haben, um Ihre Kunden noch glücklicher zu machen, gehen Sie zwei Schritte weiter - sie kommen eher zu Ihren Shows, wenn Sie sie etwas 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 geschnitten haben, indem Sie die Anzahl der Gigs, die als "4" angezeigt werden sollen, in Schritt 1 zurücksetzen. Nun sind wir zum Grund dafür gekommen. Wäre es nicht eine nette Geste, wenn Ihre Kunden alle Shows sehen könnten, die Sie jemals neben den Shows gezeigt haben, die Sie erwartet? Sicher würde es!

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

  
'post', 'posts_per_page' => -1, 'meta_key' => 'Datum', 'meta_value' => Datum ("J / m / d"), 'meta_compare' => '> =', 'orderby' => 'meta_value', 'order' => 'ASC',)); ?>

Vergangene Ereignisse

'post', 'posts_per_page' => -1, 'meta_key' => 'Datum', 'meta_value' => Datum ("J / m / d"), 'meta_compare' => '<', 'orderby' => 'meta_value', 'order' => 'DESC', 'paged' => get_query_var ('paged'))); ?>

Das ist ein großer Abschnitt des Codes, also teilen wir ihn in überschaubare Stücke auf.

Der erste Teil, den Sie bereits kennen, weil es die zuvor verwendete Abfrage ist. Der einzige Unterschied ist, dass ich das Argument posts_per_page auf -1 gesetzt habe, was bedeutet, dass die Startseite nie paginiert wird.

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

  • 'meta_compare' ist gesetzt auf '<' so that WordPress knows we want to display posts which are in the past.
  • 'order' ist auf absteigend gesetzt, damit die letzten vergangenen Ereignisse zuerst angezeigt werden. Wenn Sie die ältesten Ereignisse zuerst anzeigen möchten, können Sie dies auf ASC statt auf DESC setzen.

Der andere Unterschied im Code besteht darin, dass wir für die vergangenen Ereignisse einen neuen Vorlagenteil genannt haben, da Tickets für vergangene Ereignisse nicht mehr zum Verkauf angeboten werden. Wir könnten einige bedingte Anweisungen schreiben und einfach die Standard-Datei content.php verwenden. Dies ist jedoch unnötig schwierig. Kopieren Sie einfach die Datei content.php und entfernen Sie die Zeilen mit der Schaltfläche "Tickets abrufen".

  ID, 'Ticket', wahr); if ($ Ticket):?> "> Tickets abrufen 

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

Sie wissen bereits, wie Sie dies tun, weil Sie zuvor Ticketlinks und die benutzerdefinierten Felder eingerichtet haben. Der Verkauf von Postern oder T-Shirts über BigCartel oder einen gleichwertigen Dienst ist genau dasselbe. 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 "Get Tickets" hinzu, der folgendermaßen aussieht:

  ID, 'Merch', wahr); if ($ Merch):?> "> Holen Sie sich Merch 

Sie können dieses Snippet auch Ihrer früheren Ereignisdatei hinzufügen (content-past.php), damit Kunden immer Waren von Ihnen kaufen können.


Fazit

Das ist das! Jetzt gibt es eine Ticketing-Website, die WordPress mit einem fantastischen Ticketing-Anbieter integriert, Aufrufen zu Aktionsschaltflächen zeigt 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ß!