Jak vytvořit vlastní téma vstupenky na Halloween

Halloween je za rohem, takže v tomto článku vám ukážu, jak vytvořit vlastní téma vstupenky na Halloween a vytvořit si ho podle sebe. Úpravou jednoduché šablony a CSS přeměníme Pavilon Ticket Theme na strašidelný, Halloweenem inspirovaný design, který je ideální pro vaši příští halloweenskou akci.

A Téma vstupenky FooEvents je sada souborů šablon, které se používají k vykreslování e-mailů s tipy v aplikaci FooEvents. Při nastavování události v aplikaci FooEvents můžete nastavit, které téma vstupenky se má pro danou událost použít. E-maily vstupenek se pak budou generovat pomocí zadaného motivu vstupenky. Kromě toho lze témata vstupenek použít také k vygenerování Vstupenky ve formátu PDF a osobní vstupenky pomocí FooEvents POS.

Co budeme probírat

Stáhneme a přejmenujeme bezplatné téma FooEvents Ticket.
Dále přidáme naše logo a grafiku záhlaví do složky images a změníme cesty k obrázkům loga a záhlaví tak, aby na ně ukazovaly.
Poté nahrajeme téma tipu a odešleme testovací tip, abychom zjistili, jaké barvy a styl je třeba změnit, aby odpovídaly našemu designu.
Poté budeme v postupných krocích aktualizovat CSS a HTML tak, aby používaly stejné barvy jako náš návrh, a pravidelně je testovat.

1) Začínáme

Aby to bylo jednoduché, vytvořil jsem halloweenský design podle vzoru Téma vstupenky do pavilonu. To usnadňuje úpravy, protože většina změn spočívá v jednoduché změně barvy. Stáhněte si bezplatné téma Pavilion Ticket Theme ze stránky produktu a rozbalte jej do počítače.

Tip: Naše katalog témat vstupenek obsahuje mnoho základních provedení, která zahrnují různá konstrukční uspořádání. Najděte si základní motiv, který je strukturálně podobný vašemu návrhu, a použijte jej jako výchozí bod.

2) Přejmenování tématu tipu

Po stažení přejmenujte rozbalenou složku (pavilion_ticket_theme) na halloween_ticket_theme. Pište je malými písmeny a používejte podtržítka - bez mezer. Tento přístup k pojmenování je způsob, jakým FooEvents očekává uspořádání vlastních motivů.

Otevřete halloween_ticket_theme a upravte složku readme.txt a config.json soubory.

Na adrese readme.txt, změnit Téma vstupenky do pavilonu na Téma vstupenky na Halloween. Můžete také aktualizovat popis, autora atd.

Dále aktualizujte hodnotu názvu v položce config.json soubor, změnit: “jméno”: “Pavilion Ticket Theme” na “jméno”: “Halloween Ticket Theme”.

Můžete také nastavit, v jakých formátech lze toto téma tipu použít (HTML, PDF a POS). Doporučuji vypnout podporu PDF (“supports-pdf: false”), abychom se mohli zaměřit na téma e-mailu HTML. Můžete použít samostatné téma PDF vhodné pro tisk, nebo, pokud můžete ponechat. podporuje-pdf nastavit na Pravda, nezapomeňte důkladně otestovat vykreslení tipu PDF.

Dále nahraďte preview.jpg s vlastní miniaturou, abyste mohli svůj motiv okamžitě rozpoznat na obrazovce Motivy lístků.

3) Aktualizace loga a grafiky záhlaví

Ve výchozím nastavení umožňuje původní téma Pavilion Ticket nastavit logo a grafiku v záhlaví. Produkt > Nastavení tipu. Obvykle byste tyto možnosti použili k nastavení loga a grafiky záhlaví, nicméně v případě tématu vstupenky na Halloween budeme cesty k logu a grafice záhlaví zadávat natvrdo.

Důvodem je to, že logo a grafika jsou velmi odlišné od designu tohoto tématu vstupenky - ve skutečnosti byste je nechtěli použít pro tisk PDF verze vstupenky. Zakódování loga a grafiky záhlaví napevno v tématu tipu nám umožní zadat jiné logo a obrázek záhlaví pro verze PDF a POS pomocí formuláře Nastavení tipu.

Nejprve umístěte logo a obrázek záhlaví do složky images:

halloween_ticket_theme/images/logo.jpg
halloween_ticket_theme/images/header_img.jpg

Otevřete ticket.php a na začátku souboru najděte následující kód:

<!-- 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; ?>

Dva příkazy PHP “if”, které obalují obrázky, kontrolují, zda je povoleno nastavení loga a obrázku záhlaví. Tato nastavení nebudeme používat, proto můžete tyto kontroly odstranit.

Dále nahraďte cesty k obrázkům následujícími:

Cesta k logu:

/images/logo.jpg

Cesta k obrázku v záhlaví:

/images/header_img.jpg

Váš aktualizovaný kód by měl vypadat takto:

<!-- 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) Nahrajte téma na testovací web

Otestujme tyto změny a ujistěme se, že nové téma tipu lze přiřadit k produktu, úspěšně odeslat a správně použít logo a obrázek v záhlaví.

Nahrání tématu tipu

Budete potřebovat testovací web, na kterém je již nainstalován a nakonfigurován FooEvents. Pomocí FTP/SFTP nahrajte složku s novým tématem tiketu do následujícího umístění:

/wp-content/uploads/fooevents/themes/

FooEvents načítá vlastní motivy z této cesty. Pokud dáváte přednost, můžete také použít FooEvents → Témata vstupenek (v administraci WP) pro správu a náhled témat, ale pro úpravy kódu je lepší použít FTP, protože budete muset aktualizovat různé soubory. Později, až budeme připraveni k testování, nahrajeme upravené soubory tématu do stejné složky a poté odešleme e-maily s tikety na testovací účet.

Nastavení tématu tipu pro testovací produkt

Dále budeme aktualizovat nastavení motivu tiketu produktu tak, aby používal tento motiv tiketu a vy jste mohli odesílat skutečné testovací tikety během iterace. Tímto způsobem otestujete skutečná data a rozvržení, které budete odesílat.

V aplikaci WordPress upravte svůj produkt události a otevřete položku Údaje o produktu → Nastavení tipu. Nastavte téma vstupenky HTML na nahrané téma vstupenky Halloween. Logo, obrázek v záhlaví a možnosti barev nebudete používat, takže je prozatím můžete nechat prázdné. Později, pokud používáte FooEvents PDF vstupenky, můžete tato nastavení použít k přizpůsobení PDF vstupenky.

Odeslání testovacího tipu

Otevřete existující objednávku tohoto produktu nebo vytvořte novou objednávku a použijte tlačítko Opětovné odeslání letenek možnost na postranním panelu pro odesílání testovacích e-mailů. Nezapomeňte otestovat jednotlivé tikety i e-maily obsahující více tiketů.Tiket by měl vypadat podobně jako v původním tématu Pavilion Ticket Theme, s tím rozdílem, že logo a obrázek v záhlaví jsou nyní kódovány napevno, nikoli pomocí nastavení loga a cesty k záhlaví.

5) Upravte barvy a rozvržení tak, aby odpovídaly vlastnímu motivu vstupenky na Halloween.

Tento další krok může být složitý, nicméně šablony jsou navrženy tak, aby byly co nejjednodušší a jejich úprava byla poměrně snadná. Najděte stávající barvy a nahraďte je barvami použitými v návrhu. Pokud se váš návrh strukturálně liší, upravte HTML a CSS tak, aby odpovídaly vašemu návrhu. Výstup šablony se skládá ze tří hlavních souborů:

├─ header.php ← Logo/header/event meta/top section
├─ ticket.php ← Hlavní blok vstupenky (opakuje se pro každou vstupenku)
├─ footer.php ← Zápatí/kontaktní informace

Tyto tři soubory upravte podle potřeby, ale mějte na paměti, že e-mailoví klienti jsou názorově odlišní. Udržujte jednoduché značení (tabulky nebo minimální divy), důležité styly vložte do řádků a používejte absolutní adresy URL obrázků. Vyhněte se moderním stylům CSS, které mnoho klientů odstraňuje nebo vykresluje nekonzistentně. Nejlepším postupem je zachovat základní HTML/CSS pro vysokou kompatibilitu. Viz příručka FooEvents, kde naleznete reference: Nápověda k tématům vstupenek.

Po provedení změn nahrajte aktualizované soubory na adresu:
/wp-content/uploads/fooevents/themes/halloween_ticket_theme/

Tip: Pravidelně testujte a udržujte změny malé a postupné. Pokaždé, když nahrajete změny, můžete na obrazovce objednávky stisknout tlačítko pro opětovné odeslání, aniž byste museli obnovovat stránku (to vám ušetří několik sekund). Jakmile upravíte motiv tiketu tak, aby odpovídal vašemu vlastnímu designu, otestujte jej v různých scénářích. Nezapomeňte otestovat jednotlivé vstupenky a také e-maily obsahující více vstupenek (odesílané kupujícím).

Závěrečné kontroly před spuštěním provozu

Zobrazte si e-mail v Gmailu, Outlooku, Apple Mailu a v mobilu, pokud můžete. Pokud používáte službu náhledu, jako např. Lakmusový papír, proveďte prověrku společných klientů. Až budete s návrhem tiketu spokojeni, nahrajte složku s motivem tiketu na živý web a povolte ji pro svůj produkt (své produkty). Proveďte další kolo testování, abyste se ujistili, že se změny správně odrážejí a cesty k obrázkům fungují.

Závěrečné slovo

Přizpůsobení tématu tipu FooEvents je velmi jednoduché. Začněte s pevným základem, přejmenujte jej, přidejte své umělecké dílo a poté v malých testovatelných krocích upravte CSS/HTML. Udržujte značkování e-mailu jednoduché a nefantazírujte s CSS, které budou klienti ignorovat.

Neváhejte si stáhnout a upravit můj návrh tématu Halloween Ticket a také dokončené téma Halloween Ticket, odkazy níže.