Jak stworzyć własny motyw biletów na Halloween

Halloween jest tuż za rogiem, więc w tym artykule pokażę, jak stworzyć niestandardowy motyw biletu na Halloween i uczynić go naszym własnym. Modyfikując prosty szablon i CSS, przekształcimy Pavilion Ticket Theme w upiorny, inspirowany Halloween projekt, który będzie idealny na następne wydarzenie z okazji Halloween. A

A FooEvents Ticket Theme to zestaw plików szablonów używanych do renderowania wiadomości e-mail z biletami w formacie FooEvents. Podczas konfigurowania wydarzenia za pomocą FooEvents można ustawić, który motyw biletu ma być używany dla tego wydarzenia. Wiadomości e-mail z biletami będą następnie generowane przy użyciu określonego motywu biletu. Ponadto, motywy biletów mogą być również używane do generowania Bilety PDF i bilety osobiste przy użyciu FooEvents POS.

Co będziemy omawiać

Zamierzamy pobrać i zmienić nazwę darmowego motywu FooEvents Ticket.
Następnie dodamy nasze logo i grafikę nagłówka do folderu images i zmienimy ścieżki do logo i grafiki nagłówka, aby wskazywały na te obrazy.
Następnie prześlemy motyw zgłoszenia i wyślemy zgłoszenie testowe, aby sprawdzić, jakie kolory i styl należy zmienić, aby pasowały do naszego projektu.
Następnie, stopniowo, będziemy aktualizować CSS i HTML, aby używać tych samych kolorów, co nasz projekt, regularnie testując.

1) Pierwsze kroki

Aby zachować prostotę, wzorowałem Halloweenowy projekt na Motyw biletu do pawilonu. To sprawia, że jest łatwy do modyfikacji, ponieważ większość zmian to proste zmiany kolorów. Pobierz darmowy motyw Pavilion Ticket Theme ze strony produktu i rozpakuj go na swoim komputerze.

Wskazówka: Nasz katalog motywów biletów zawiera wiele projektów bazowych, które zawierają różne układy strukturalne. Znajdź motyw bazowy, który jest strukturalnie podobny do twojego projektu i użyj go jako punktu wyjścia.

2) Zmień nazwę motywu Ticket

Po pobraniu zmień nazwę rozpakowanego folderu (pavilion_ticket_theme) do halloween_ticket_theme. Należy używać małych liter i podkreśleń - bez spacji. Takie podejście do nazewnictwa jest sposobem, w jaki FooEvents oczekuje organizacji niestandardowych motywów.

Otwórz halloween_ticket_theme i edytować folder readme.txt i config.json pliki.

W readme.txt, zmiana Motyw biletu do pawilonu do Motyw biletu na Halloween. Można również zaktualizować opis, autora itp.

Następnie zaktualizuj wartość nazwy w config.json plik, zmiana: “name”: “Pavilion Ticket Theme” do “name”: “Halloween Ticket Theme”.

Możesz także ustawić, w jakich formatach ten motyw biletu może być używany (HTML, PDF i POS). Zalecam wyłączenie obsługi plików PDF (“supports-pdf: false”), abyśmy mogli skupić się na motywie wiadomości e-mail w formacie HTML. Możesz użyć oddzielnego, przyjaznego dla druku motywu PDF lub, jeśli możesz pozostawić obsługuje-pdf ustawiony na prawda, Pamiętaj, aby dokładnie przetestować renderowanie biletu PDF.

Następnie zastąp preview.jpg z własną miniaturą, dzięki czemu można natychmiast rozpoznać motyw na ekranie motywów Ticket.

3) Aktualizacja logo i grafiki nagłówka

Domyślnie oryginalny motyw Pavilion Ticket umożliwia ustawienie logo i grafiki nagłówka w sekcji Produkt > Ustawienia biletu. Zazwyczaj używa się tych opcji do ustawienia logo i grafiki nagłówka; jednak w przypadku motywu biletu na Halloween zamierzamy zakodować ścieżki do logo i grafiki nagłówka.

Powodem jest to, że logo i grafika są bardzo charakterystyczne dla projektu tego motywu biletu - tak naprawdę nie chciałbyś używać ich w przyjaznej dla druku wersji PDF biletu. Zakodowanie logo i grafiki nagłówka w motywie biletu pozwoli nam określić inne logo i obraz nagłówka dla wersji PDF i POS za pomocą formularza ustawień biletu.

Najpierw umieść logo i obraz nagłówka w folderze images:

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

Otwórz ticket.php i znajdź następujący kod u góry pliku:

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

Dwie instrukcje PHP “if”, które zawijają obrazy, sprawdzają, czy ustawienia logo i obrazu nagłówka są włączone. Nie będziemy używać tych ustawień, więc możesz usunąć te kontrole.

Następnie zamień ścieżki obrazów na następujące:

Ścieżka logo:

/images/logo.jpg

Ścieżka obrazu nagłówka:

/images/header_img.jpg

Zaktualizowany kod powinien wyglądać następująco:

<!-- 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) Prześlij motyw do witryny testowej.

Przetestujmy te zmiany i upewnijmy się, że nowy motyw biletu może zostać przypisany do produktu, pomyślnie wysłany i poprawnie pozyskać logo i obraz nagłówka.

Prześlij motyw biletu

Potrzebna będzie strona testowa, na której jest już zainstalowany i skonfigurowany FooEvents. Korzystając z FTP/SFTP, prześlij folder z nowym motywem do następującej lokalizacji:

/wp-content/uploads/fooevents/themes/

FooEvents ładuje niestandardowe motywy z tej ścieżki. Jeśli wolisz, możesz również użyć FooEvents → Motywy biletów (w panelu administracyjnym WP) do zarządzania i podglądu motywów, ale do edycji kodu lepiej jest użyć FTP, ponieważ będziesz musiał zaktualizować różne pliki. Później, gdy będziemy gotowi do testowania, prześlemy edytowane pliki motywów do tego samego folderu, a następnie wyślemy wiadomości e-mail z biletami na konto testowe.

Ustaw motyw biletu dla produktu testowego

Następnie zaktualizujemy ustawienia motywu biletów produktu, aby korzystać z tego motywu biletów, dzięki czemu można wysyłać rzeczywiste bilety testowe podczas iteracji. W ten sposób przetestujesz rzeczywiste dane i układ, który wyślesz.

W programie WordPress edytuj produkt wydarzenia i otwórz opcję Dane produktu → Ustawienia biletu. Ustaw motyw biletu HTML na przesłany motyw biletu na Halloween. Nie będziesz korzystać z logo, obrazu nagłówka i opcji kolorów, więc na razie możesz pozostawić je puste. Później, jeśli korzystasz z biletów PDF FooEvents, możesz użyć tych ustawień, aby dostosować bilet PDF.

Wyślij zgłoszenie testowe

Otwórz istniejące zamówienie na ten produkt lub utwórz nowe zamówienie i użyj opcji Wyślij ponownie bilety na pasku bocznym, aby wysłać testowe wiadomości e-mail z biletami. Pamiętaj, aby przetestować pojedyncze bilety, a także wiadomości e-mail zawierające wiele biletów. Bilet powinien wyglądać podobnie do oryginalnego motywu Pavilion Ticket, z tą różnicą, że logo i obraz nagłówka są teraz zakodowane na stałe, a nie przy użyciu ustawień logo i ścieżki nagłówka.

5) Zmodyfikuj kolory i układ, aby pasowały do niestandardowego motywu biletu na Halloween.

Ten następny krok może być trudny; jednak szablony zostały zaprojektowane tak, aby były jak najprostsze i powinny być stosunkowo łatwe do modyfikacji. Znajdź istniejące kolory i zastąp je kolorami używanymi w projekcie. Jeśli twój projekt różni się strukturalnie, zmodyfikuj HTML i CSS, aby pasowały do twojego projektu. Dane wyjściowe szablonu składają się z trzech głównych plików:

├─ header.php ← Logo/header/event meta/top section
├─ ticket.php ← Główny blok biletu (powtarza się dla każdego biletu)
├─ footer.php ← stopka/informacje kontaktowe

Zmodyfikuj te trzy pliki w razie potrzeby, ale pamiętaj, że klienci poczty e-mail mają swoje opinie. Zachowaj prostotę znaczników (tabele lub minimalne elementy div), wbuduj ważne style i używaj bezwzględnych adresów URL obrazów. Unikaj nowoczesnych CSS, które wiele klientów usuwa lub renderuje niespójnie. Najlepszą praktyką jest utrzymywanie podstawowego kodu HTML/CSS w celu zapewnienia wysokiej kompatybilności. Zobacz przewodnik FooEvents w celach informacyjnych: Ticket Themes Help.

Po wprowadzeniu zmian prześlij zaktualizowane pliki do:
/wp-content/uploads/fooevents/themes/halloween_ticket_theme/

Wskazówka: Testuj regularnie i wprowadzaj zmiany stopniowo. Za każdym razem, gdy przesyłasz zmiany, możesz nacisnąć przycisk ponownego wysyłania na ekranie zamówienia bez konieczności odświeżania strony (pozwoli to zaoszczędzić kilka sekund). Po zmodyfikowaniu motywu biletu tak, aby pasował do własnego projektu, przetestuj go w różnych scenariuszach. Pamiętaj, aby przetestować pojedyncze bilety, a także wiadomości e-mail zawierające wiele biletów (wysyłane do kupujących).

Końcowe kontrole przed uruchomieniem

Wyświetl wiadomość e-mail w Gmailu, Outlooku, Apple Mail i na telefonie komórkowym, jeśli możesz. Jeśli korzystasz z usługi podglądu, takiej jak Litmus, przeprowadź przegląd wśród wspólnych klientów. Gdy będziesz zadowolony z projektu biletu, prześlij folder motywu biletu do swojej aktywnej witryny i włącz go dla swoich produktów. Przeprowadź dodatkową rundę testów, aby upewnić się, że zmiany zostały poprawnie odzwierciedlone, a ścieżki obrazów działają.

Słowo końcowe

Dostosowanie motywu biletu FooEvents jest bardzo proste. Zacznij od solidnej bazy, zmień jej nazwę, dodaj grafikę, a następnie iteruj CSS / HTML w małych, testowalnych krokach. Zachowaj prostotę znaczników e-mail i nie używaj wymyślnych CSS, które klienci zignorują.

Zapraszam do pobierania i modyfikowania mojego projektu motywu Halloween Ticket, a także gotowego motywu Halloween Ticket, linki poniżej.