How To Create A Custom Halloween Ticket Theme

Halloween steht vor der Tür. In diesem Artikel zeige ich Ihnen, wie Sie ein benutzerdefiniertes Halloween-Ticket-Thema erstellen und es zu unserem eigenen machen können. Durch die Änderung einer einfachen Vorlage und CSS verwandeln wir das Pavilion-Ticket-Thema in ein gruseliges, von Halloween inspiriertes Design, das perfekt für Ihre nächste Halloween-Veranstaltung ist.

A FooEvents Ticket-Thema ist ein Satz von Vorlagendateien, die zum Rendern von Ticket-E-Mails in FooEvents. Wenn Sie eine Veranstaltung mit FooEvents einrichten, können Sie festlegen, welches Ticket-Thema für diese Veranstaltung verwendet werden soll. Die Ticket-E-Mails werden dann mit dem angegebenen Ticket-Thema erstellt. Darüber hinaus können Ticket-Themen auch verwendet werden, um PDF-Tickets und persönliche Tickets über FooEvents POS.

Was wir behandeln werden

Wir werden ein kostenloses FooEvents Ticket-Theme herunterladen und umbenennen.
Als Nächstes fügen wir unser Logo und unsere Kopfzeilengrafik in den Bilderordner ein und ändern die Pfade für das Logo und die Kopfzeilenbilder so, dass sie auf diese Bilder verweisen.
Wir laden dann das Ticket-Thema hoch und senden ein Testticket, um zu sehen, welche Farben und welches Styling geändert werden müssen, damit es unserem Design entspricht.
Dann werden wir schrittweise CSS und HTML aktualisieren, um die gleichen Farben wie unser Design zu verwenden, und dabei regelmäßig testen.

1) Erste Schritte

Um es einfach zu halten, habe ich das Halloween-Design dem Pavillon Ticket Thema. Dies macht es einfach zu ändern, da die meisten Änderungen einfache Farbänderungen sind. Laden Sie das kostenlose Pavilion Ticket Theme von der Produktseite herunter und entpacken Sie es auf Ihrem Computer.

Tipp: Unser Ticket-Themenkatalog enthält viele Basisdesigns, die verschiedene strukturelle Layouts enthalten. Suchen Sie ein Basisthema, das Ihrem Entwurf strukturell ähnlich ist, und verwenden Sie es als Ausgangspunkt.

2) Benennen Sie das Ticket-Thema um

Nach dem Download benennen Sie den entpackten Ordner um (pavillon_ticket_thema) an halloween_ticket_thema. Halten Sie sie klein und verwenden Sie Unterstriche - keine Leerzeichen. FooEvents erwartet, dass benutzerdefinierte Themen auf diese Weise benannt werden.

Öffnen Sie die halloween_ticket_thema und bearbeiten Sie den Ordner readme.txt und config.json Dateien.

Unter readme.txt, ändern Pavillon Ticket Thema zu Halloween-Ticket-Thema. Sie können auch die Beschreibung, den Autor usw. aktualisieren.

Als nächstes aktualisieren Sie den Wert name in config.json Datei, ändern: “Name”: “Pavillon-Ticket-Thema” zu “Name”: “Halloween-Ticket-Thema”.

Sie können auch festlegen, in welchen Formaten dieses Ticket-Thema verwendet werden kann (HTML, PDF und POS). Ich empfehle, die PDF-Unterstützung zu deaktivieren (“supports-pdf: false”), damit wir uns auf das HTML-E-Mail-Thema konzentrieren können. Sie können ein separates druckfreundliches PDF-Thema verwenden, oder, wenn Sie die unterstützt-pdf eingestellt auf wahr, Stellen Sie sicher, dass Sie die Darstellung des PDF-Tickets gründlich testen.

Ersetzen Sie dann vorschau.jpg mit einem eigenen Vorschaubild, damit Sie Ihr Thema auf dem Bildschirm Ticket-Themen sofort erkennen können.

3) Aktualisieren Sie das Logo und die Kopfzeilengrafik

Das ursprüngliche Pavilion-Ticket-Theme erlaubt Ihnen standardmäßig, das Logo und die Kopfzeilengrafik in Produkt > Ticket-Einstellungen. Normalerweise würden Sie diese Optionen verwenden, um das Logo und die Kopfzeilengrafik festzulegen; für das Halloween-Ticket-Thema werden wir jedoch Pfade für das Logo und die Kopfzeilengrafik fest codieren.

Der Grund dafür ist, dass das Logo und die Grafik das Design dieses Ticket-Themas sehr stark prägen - Sie würden nicht wirklich die druckfreundliche PDF-Version des Tickets verwenden wollen. Durch das Hardcoding des Logos und der Kopfzeilengrafik im Ticket-Thema können wir über das Ticket-Einstellungsformular ein anderes Logo und eine andere Kopfzeilengrafik für die PDF- und POS-Versionen festlegen.

Legen Sie zunächst Ihr Logo und Ihr Kopfzeilenbild in den Bilderordner:

halloween_ticket_thema/bilder/logo.jpg
halloween_ticket_theme/images/header_img.jpg

Öffnen Sie die ticket.php Datei und finden Sie den folgenden Code am Anfang der Datei:

<!-- LOGO -->
<?php if ( ! empty( $ticket['WooCommerceEventsTicketLogo'] ) ) : ?>
<p>
<img src="<?php echo esc_attr( $ticket['WooCommerceEventsTicketLogo'] ); ?>" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin-bottom:20px;"/>
</p>
<?php endif; ?>

<!-- GRAPHIC -->
<?php if ( ! empty( $ticket['WooCommerceEventsTicketHeaderImage'] ) ) : ?>
<img src="<?php echo esc_attr( $ticket['WooCommerceEventsTicketHeaderImage'] ); ?>" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin:0 auto; padding:0; display: block; vertical-align: bottom"/>
<?php endif; ?>

Die beiden PHP-“if”-Anweisungen, die die Bilder einschließen, prüfen, ob die Einstellungen für das Logo und das Kopfzeilenbild aktiviert sind. Wir werden diese Einstellungen nicht verwenden, daher können Sie die Prüfungen entfernen.

Ersetzen Sie dann die Bildpfade durch die folgenden:

Logo-Pfad:

/images/logo.jpg

Pfad des Kopfzeilenbildes:

/images/header_img.jpg

Ihr aktualisierter Code sollte wie folgt aussehen:

<!-- LOGO -->
<p>
<img src="<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>/images/logo.jpg" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin-bottom:20px;"/>
</p>

<!-- GRAPHIC -->
<img src="<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>/images/header_img.jpg" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin:0 auto; padding:0; display: block; vertical-align: bottom"/>

4) Laden Sie das Thema auf Ihre Testseite hoch.

Testen wir diese Änderungen und stellen wir sicher, dass das neue Ticket-Thema einem Produkt zugewiesen und erfolgreich versendet werden kann und dass das Logo und das Kopfzeilenbild korrekt angezeigt werden.

Das Ticket-Thema hochladen

Sie benötigen eine Testseite, auf der FooEvents bereits installiert und konfiguriert ist. Laden Sie den Ordner mit dem neuen Ticket-Thema per FTP/SFTP an den folgenden Ort hoch:

/wp-content/uploads/fooevents/themes/

FooEvents lädt benutzerdefinierte Themen von diesem Pfad. Wenn Sie es bevorzugen, können Sie auch FooEvents → Ticket-Themen (in der WP-Verwaltung), um Themes zu verwalten und eine Vorschau anzuzeigen, aber für Code-Bearbeitungen ist es besser, FTP zu verwenden, da Sie verschiedene Dateien aktualisieren müssen. Später, wenn wir zum Testen bereit sind, werden wir die bearbeiteten Themes in denselben Ordner hochladen und dann Ticket-E-Mails an ein Testkonto senden.

Einstellen des Ticket-Themas für ein Testprodukt

Als Nächstes werden wir die Einstellungen für das Ticket-Thema eines Produkts aktualisieren, um dieses Ticket-Thema zu verwenden, damit Sie während der Iteration echte Testtickets senden können. Auf diese Weise testen Sie die echten Daten und das Layout, das Sie versenden werden.

Bearbeiten Sie in WordPress Ihr Ereignisprodukt und öffnen Sie Produktdaten → Ticket-Einstellungen. Setzen Sie das HTML-Ticketdesign auf Ihr hochgeladenes Halloween-Ticketdesign. Sie werden das Logo, das Kopfzeilenbild und die Farboptionen nicht verwenden, also können Sie sie vorerst leer lassen. Später, wenn Sie FooEvents-PDF-Tickets verwenden, können Sie diese Einstellungen verwenden, um das PDF-Ticket individuell zu gestalten.

Ein Testticket senden

Öffnen Sie einen bestehenden Auftrag für dieses Produkt oder legen Sie einen neuen Auftrag an, und verwenden Sie die Tickets zurücksenden in der Seitenleiste, um Test-Ticket-E-Mails zu versenden. Das Ticket sollte ähnlich aussehen wie das ursprüngliche Pavillon-Ticket-Theme, mit dem einzigen Unterschied, dass das Logo und das Kopfzeilenbild nun fest kodiert sind, anstatt die Einstellungen für das Logo und den Kopfzeilenpfad zu verwenden.

5) Ändern Sie die Farben und das Layout so, dass sie zum benutzerdefinierten Design des Halloween-Tickets passen.

Dieser nächste Schritt kann knifflig sein; die Vorlagen sind jedoch so einfach wie möglich gestaltet und sollten relativ leicht zu ändern sein. Suchen Sie die vorhandenen Farben und ersetzen Sie sie durch die im Entwurf verwendeten Farben. Wenn sich Ihr Design strukturell unterscheidet, ändern Sie den HTML- und CSS-Code, um ihn an Ihr Design anzupassen. Die Ausgabe der Vorlage besteht aus drei Hauptdateien:

├─ header.php ← Logo/Kopfzeile/Veranstaltungsmeta/Top-Bereich
├─ ticket.php ← Der Ticket-Hauptblock (wiederholt sich pro Ticket)
├─ footer.php ← Fußzeile/Kontaktinformationen

Ändern Sie diese drei Dateien nach Bedarf, aber bedenken Sie, dass E-Mail-Clients eigenwillig sind. Halten Sie das Markup einfach (Tabellen oder minimale divs), inline die wichtigen Stile, und verwenden Sie absolute Bild-URLs. Vermeiden Sie modernes CSS, das viele Clients entfernen oder inkonsistent darstellen. Für eine hohe Kompatibilität ist es am besten, das HTML/CSS einfach zu halten. Siehe den FooEvents-Leitfaden als Referenz: Ticket-Themen-Hilfe.

Wenn Sie die Änderungen vorgenommen haben, laden Sie die aktualisierten Dateien hoch in:
/wp-content/uploads/fooevents/themes/halloween_ticket_theme/

Tipp: Testen Sie regelmäßig und halten Sie die Änderungen klein und schrittweise. Jedes Mal, wenn Sie Änderungen hochladen, können Sie auf der Bestellseite auf die Schaltfläche "Erneut senden" klicken, ohne die Seite aktualisieren zu müssen (das spart Ihnen ein paar Sekunden). Sobald Sie das Ticket-Thema an Ihr eigenes Design angepasst haben, testen Sie es in verschiedenen Szenarien. Testen Sie sowohl einzelne Tickets als auch Ticket-E-Mails, die mehrere Tickets enthalten (die an Käufer gesendet werden).

Letzte Kontrollen vor der Inbetriebnahme

Zeigen Sie die E-Mail in Google Mail, Outlook, Apple Mail und auf Ihrem Mobiltelefon an, wenn Sie können. Wenn Sie einen Vorschaudienst wie Lackmus, führen Sie einen Sweep für alle gängigen Kunden durch. Wenn Sie mit dem Ticket-Design zufrieden sind, laden Sie den Ticket-Themenordner auf Ihre Live-Website hoch und aktivieren Sie ihn für Ihr(e) Produkt(e). Führen Sie eine weitere Testrunde durch, um sicherzustellen, dass Ihre Änderungen korrekt wiedergegeben werden und Ihre Bildpfade funktionieren.

Schlusswort

Die Anpassung eines FooEvents-Ticket-Themas ist super einfach. Beginnen Sie mit einer soliden Basis, benennen Sie sie um, fügen Sie Ihre Grafiken hinzu und bearbeiten Sie dann das CSS/HTML in kleinen, testbaren Schritten. Halten Sie das Markup für E-Mails einfach und verzichten Sie auf ausgefallenes CSS, das die Kunden ignorieren werden.

Fühlen Sie sich frei, meinen Entwurf für das Halloween-Ticket-Thema sowie das fertige Halloween-Ticket-Thema herunterzuladen und zu ändern, Links unten.