Halloween staat voor de deur, dus in dit artikel laat ik je zien hoe je een aangepast Halloween-kaartjesthema kunt maken en naar je hand kunt zetten. Door een eenvoudige sjabloon en CSS aan te passen, transformeren we het Pavilion Ticket Theme in een griezelig, op Halloween geïnspireerd ontwerp dat perfect is voor je volgende Halloween-evenement. A
A FooEvents Kaartjesthema is een set sjabloonbestanden die worden gebruikt om ticket-e-mails weer te geven in FooEvents. Bij het opzetten van een evenement met FooEvents, kun je instellen welk ticket thema je wilt gebruiken voor dat evenement. De ticket e-mails zullen dan worden gegenereerd met behulp van het opgegeven ticket thema. Daarnaast kun je ticket thema's ook gebruiken voor het genereren van PDF-tickets en persoonlijke tickets via FooEvents POS.
Wat we behandelen
- We gaan een gratis FooEvents Ticket thema downloaden en hernoemen.
- Vervolgens gaan we ons logo en onze headerafbeelding toevoegen aan de map afbeeldingen en de afbeeldingspaden van het logo en de header wijzigen zodat ze naar deze afbeeldingen verwijzen.
- Vervolgens uploaden we het ticket-thema en sturen we een testticket om te zien welke kleuren en styling we moeten aanpassen aan ons ontwerp.
- Vervolgens zullen we in stappen de CSS en HTML bijwerken om dezelfde kleuren te gebruiken als ons ontwerp, terwijl we regelmatig testen.
1) Aan de slag
Om het eenvoudig te houden, heb ik het Halloween-ontwerp gemodelleerd naar de Paviljoen Kaartjesthema. Hierdoor is het eenvoudig aan te passen omdat de meeste wijzigingen eenvoudige kleurwijzigingen zijn. Download het gratis Pavilion Ticket Theme van de productpagina en pak het uit op je computer.
Tip: Onze ticket thema catalogus bevat veel basisontwerpen met verschillende structurele lay-outs. Zoek een basisthema dat structureel vergelijkbaar is met je ontwerp en gebruik het als uitgangspunt.
2) Hernoem het Kaartjesthema
Na het downloaden hernoemt u de uitgepakte map (paviljoen_kaartje_thema) aan halloween_kaartjes_thema. Houd het bij kleine letters en gebruik underscores-geen spaties. Deze naamgeving is hoe FooEvents verwacht dat aangepaste thema's worden georganiseerd.
Open de halloween_kaartjes_thema map en bewerk de leesmij.txt en config.json bestanden.
In leesmij.txt, veranderen Paviljoen Kaartjesthema naar Halloween Kaartjesthema. Je kunt ook de beschrijving, auteur, enz. bijwerken.
Werk vervolgens de naamwaarde bij in config.json file, change: “naam”: “Paviljoen Kaartjesthema”.” naar “naam”: “Halloween Kaartjesthema”.”.
Je kunt ook instellen in welke formaten dit ticket-thema kan worden gebruikt (HTML, PDF en POS). Ik raad aan om PDF-ondersteuning uit te schakelen (“supports-pdf: false”) zodat we ons kunnen concentreren op het HTML-e-mailthema. Je kunt een apart printvriendelijk PDF-thema gebruiken, of, als je het ondersteunt-pdf ingesteld op Echt, Zorg ervoor dat u de weergave van het PDF-ticket grondig test.
Vervang vervolgens voorbeeld.jpg met je eigen miniatuur zodat je je thema meteen herkent in het scherm Ticket Themes.
3) Het logo en de headerafbeelding bijwerken
Standaard kun je met het originele Pavilion Ticket Theme het logo en de headerafbeelding instellen in Product > Ticketinstellingen. Normaal gesproken zou je deze opties gebruiken om het logo en de headerafbeelding in te stellen, maar voor het Halloween-kaartjesthema gaan we de paden naar het logo en de headerafbeelding hardcoden.
De reden hiervoor is dat het logo en de afbeelding zeer uitgesproken zijn voor het ontwerp van dit ticket thema-je zou ze eigenlijk niet willen gebruiken voor de printvriendelijke PDF-versie van het ticket. Door het logo en de koptekstafbeelding te hardcoderen in het ticket-thema kunnen we een ander logo en een andere koptekstafbeelding opgeven voor de PDF- en POS-versies met behulp van het formulier Ticketinstellingen.
Plaats eerst je logo en headerafbeelding in de map afbeeldingen:
halloween_ticket_thema/afbeeldingen/logo.jpg
halloween_ticket_thema/afbeeldingen/header_afbeelding.jpg
Open de ticket.php bestand en vind de volgende code bovenaan het bestand:
<!-- 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; ?>
De twee PHP “if” statements die de afbeeldingen omhullen, controleren of de instellingen voor het logo en de headerafbeelding zijn ingeschakeld. We zullen deze instellingen niet gebruiken, dus je kunt de controles verwijderen.
Vervang vervolgens de afbeeldingspaden door het volgende:
Logopad:
/images/logo.jpg
Pad voor headerafbeelding:
/images/header_img.jpg
Uw bijgewerkte code moet er als volgt uitzien:
<!-- 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) Upload het thema naar uw testwebsite
Laten we deze wijzigingen testen en ervoor zorgen dat het nieuwe ticketthema kan worden toegewezen aan een product, succesvol kan worden verzonden en de logo- en header-afbeelding correct kan ophalen.
Upload het ticketthema
Je hebt een testomgeving nodig waarop FooEvents al is geïnstalleerd en geconfigureerd. Upload de map met het nieuwe ticket-thema via FTP/SFTP naar de volgende locatie:
/wp-content/uploads/fooevents/themes/
FooEvents laadt aangepaste thema’s vanaf dit pad. Als je dat liever hebt, kun je ook gebruikmaken van FooEvents → Ticket-thema’s (in WP-admin) om thema's te beheren en te bekijken, maar voor codebewerkingen is het beter om FTP te gebruiken, omdat u verschillende bestanden moet bijwerken. Later, wanneer we klaar zijn om te testen, uploaden we de bewerkte themabestanden naar dezelfde map en sturen we ticket-e-mails naar een testaccount.
Stel het ticketthema in voor een testproduct
Vervolgens gaan we de ticketthema-instellingen van een product bijwerken om dit ticketthema te gebruiken, zodat je echte testtickets kunt versturen terwijl je itereren. Op die manier test je de echte gegevens en lay-out die je gaat verzenden.
Bewerk in WordPress je evenementproduct en open Productgegevens → Ticketinstellingen. Stel het HTML-ticketthema in op het door jou geüploade Halloween-ticketthema. Je hebt het logo, de kopafbeelding en de kleuropties niet nodig, dus die kun je voorlopig leeg laten. Als je later gebruikmaakt van FooEvents PDF-tickets, kun je die instellingen gebruiken om het PDF-ticket aan te passen.
Stuur een test ticket
Open een bestaande order voor dit product of maak een nieuwe order aan, en gebruik de Tickets opnieuw verzenden optie in de zijbalk om testticket-e-mails te verzenden. Zorg ervoor dat u zowel enkele tickets als ticket-e-mails test die meerdere tickets bevatten. Het ticket moet lijken op het originele Pavilion Ticket Theme, het enige verschil is dat het logo en de header-afbeelding nu hard-gecodeerd zijn in plaats van gebruik te maken van de logo- en header-padinstellingen.
5) Pas de kleuren en lay-out aan om te voldoen aan het ontwerp van het aangepaste Halloween-ticket thema
Deze volgende stap kan lastig zijn; echter, de sjablonen zijn ontworpen om zo eenvoudig mogelijk te zijn en zouden relatief eenvoudig aan te passen moeten zijn. Zoek bestaande kleuren en vervang ze met de kleuren die in het ontwerp worden gebruikt. Als uw ontwerp structureel afwijkt, pas dan de HTML en CSS aan om aan uw ontwerp te voldoen. De uitvoer van het sjabloon bestaat uit drie hoofd-bestanden:
├─ header.php ← Logo/header/event meta/top section
├─ ticket.php ← The main ticket block (repeats per ticket)
├─ footer.php ← Footer/contact info
Pas deze drie bestanden naar behoefte aan, maar houd er rekening mee dat e-mailprogramma’s hun eigen voorkeuren hebben. Houd de opmaak eenvoudig (tabellen of zo min mogelijk div-elementen), voeg belangrijke stijlen inline toe en gebruik absolute afbeeldings-URL's. Vermijd moderne CSS die door veel clients wordt verwijderd of inconsistent wordt weergegeven. Het is aanbevolen om de HTML/CSS eenvoudig te houden voor een hoge compatibiliteit. Raadpleeg de FooEvents-handleiding voor meer informatie: Ticket Themes Help.
Wanneer je wijzigingen hebt aangebracht, upload de bijgewerkte bestanden naar:
/wp-content/uploads/fooevents/themes/halloween_ticket_theme/
Tip: Test regelmatig en houd wijzigingen klein en incrementeel. Elke keer dat u wijzigingen uploadt, kunt u op de resend-knop op het bestelscherm drukken zonder de pagina te hoeven vernieuwen (dat bespaart u een paar seconden). Zodra u het ticketthema hebt aangepast aan uw eigen ontwerp, test het dan onder verschillende scenario's. Zorg ervoor dat u zowel enkele tickets als ticket-e-mails met meerdere tickets test (die naar kopers worden verzonden).
Laatste controles voor livegang
Bekijk de e-mail in Gmail, Outlook, Apple Mail en, indien mogelijk, op je mobiel. Als je een preview-dienst gebruikt zoals Lakmoes, voer een sweep uit bij veelvoorkomende klanten. Als je tevreden bent met het ticketontwerp, upload dan de ticketthema-map naar je live site en activeer deze voor je producten. Voer een extra testronde uit om er zeker van te zijn dat je wijzigingen correct worden weergegeven en dat je afbeeldingspaden werken.
Laatste woord
Het aanpassen van een FooEvents-ticketthema is supereenvoudig. Begin met een solide basis, geef het een andere naam, voeg je eigen afbeeldingen toe en pas vervolgens de CSS/HTML in kleine, testbare stappen aan. Houd de opmaak zo eenvoudig mogelijk, zoals in e-mails, en ga niet te ver met CSS die klanten toch negeren.
Voel je vrij om mijn Halloween Ticket themaontwerp en het voltooide Halloween Ticket Thema te downloaden en aan te passen, links hieronder.
English 
German 
Dutch 
Spanish 
Italian 
Portuguese 
French 
Polish 
Greek