Πώς να δημιουργήσετε ένα προσαρμοσμένο θέμα εισιτηρίου για το Halloween

Οι Απόκριες είναι προ των πυλών, οπότε σε αυτό το άρθρο θα σας δείξω πώς να δημιουργήσετε ένα προσαρμοσμένο θέμα αποκριάτικου εισιτηρίου και να το κάνετε δικό μας. Τροποποιώντας ένα απλό πρότυπο και το CSS, θα μετατρέψουμε το Pavilion Ticket Theme σε ένα τρομακτικό, εμπνευσμένο από τις Απόκριες σχέδιο που είναι ιδανικό για την επόμενη αποκριάτικη εκδήλωσή σας. A

A Θέμα εισιτηρίων FooEvents είναι ένα σύνολο από αρχεία προτύπων που χρησιμοποιούνται για την απόδοση των emails των εισιτηρίων σε FooEvents. Κατά τη δημιουργία μιας εκδήλωσης με το FooEvents, μπορείτε να ορίσετε ποιο θέμα εισιτηρίων θα χρησιμοποιηθεί για την εν λόγω εκδήλωση. Στη συνέχεια, τα μηνύματα ηλεκτρονικού ταχυδρομείου εισιτηρίων θα δημιουργηθούν χρησιμοποιώντας το καθορισμένο θέμα εισιτηρίων. Επιπλέον, τα θέματα εισιτηρίων μπορούν επίσης να χρησιμοποιηθούν για τη δημιουργία Εισιτήρια PDF και προσωπικά εισιτήρια χρησιμοποιώντας FooEvents POS.

Τι θα καλύψουμε

Θα κατεβάσουμε και θα μετονομάσουμε ένα δωρεάν θέμα FooEvents Ticket.
Στη συνέχεια, θα προσθέσουμε το λογότυπο και το γραφικό της κεφαλίδας μας στο φάκελο images και θα αλλάξουμε τις διαδρομές των εικόνων του λογότυπου και της κεφαλίδας ώστε να δείχνουν σε αυτές τις εικόνες.
Στη συνέχεια, θα ανεβάσουμε το θέμα του εισιτηρίου και θα στείλουμε ένα δοκιμαστικό εισιτήριο για να δούμε ποια χρώματα και στυλ πρέπει να αλλάξουν για να ταιριάζουν με το σχεδιασμό μας.
Στη συνέχεια, με σταδιακά βήματα, θα ενημερώσουμε τα CSS και την HTML για να χρησιμοποιήσουμε τα ίδια χρώματα με το σχέδιό μας, ενώ θα κάνουμε τακτικές δοκιμές.

1) Ξεκινώντας

Για να το κρατήσω απλό, διαμόρφωσα το σχέδιο του Halloween με βάση το Θέμα εισιτηρίου περιπτέρου. Αυτό καθιστά εύκολη την τροποποίηση, καθώς οι περισσότερες αλλαγές είναι απλές αλλαγές χρώματος. Κατεβάστε το δωρεάν Pavilion Ticket Theme από τη σελίδα του προϊόντος και αποσυμπιέστε το στον υπολογιστή σας.

Συμβουλή: Το μας Κατάλογος θεμάτων εισιτηρίων περιλαμβάνει πολλά σχέδια βάσης που ενσωματώνουν διαφορετικές δομικές διατάξεις. Βρείτε ένα βασικό θέμα που είναι παρόμοιο με το σχέδιό σας από δομική άποψη και χρησιμοποιήστε το ως σημείο εκκίνησης.

2) Μετονομάστε το Ticket Theme

Αφού κατεβάσετε, μετονομάστε το φάκελο που έχει αποσυμπιεστεί (pavilion_ticket_theme) προς halloween_ticket_theme. Κρατήστε τα πεζά γράμματα και χρησιμοποιήστε υποκοριστικούς χαρακτήρες - όχι κενά. Αυτή η προσέγγιση ονοματοδοσίας είναι ο τρόπος με τον οποίο το FooEvents περιμένει να οργανωθούν τα προσαρμοσμένα θέματα.

Ανοίξτε το halloween_ticket_theme και επεξεργαστείτε το φάκελο readme.txt και config.json αρχεία.

Στο readme.txt, αλλαγή Θέμα εισιτηρίου περιπτέρου στο Θέμα εισιτηρίου Halloween. Μπορείτε επίσης να ενημερώσετε την περιγραφή, τον συγγραφέα κ.λπ.

Στη συνέχεια, ενημερώστε την τιμή του ονόματος στο config.json αρχείο, αλλαγή: “name”: “Pavilion Ticket Theme” στο “name”: “Halloween Ticket Theme”.

Μπορείτε επίσης να ορίσετε σε ποιες μορφές μπορεί να χρησιμοποιηθεί αυτό το θέμα εισιτηρίων (HTML, PDF και POS). Συνιστώ να απενεργοποιήσετε την υποστήριξη PDF (“supports-pdf: false”), ώστε να μπορέσουμε να επικεντρωθούμε στο θέμα ηλεκτρονικού ταχυδρομείου HTML. Μπορείτε να χρησιμοποιήσετε ένα ξεχωριστό θέμα PDF φιλικό προς την εκτύπωση ή, αν μπορείτε να αφήσετε υποστηρίζει-pdf σε true, βεβαιωθείτε ότι έχετε δοκιμάσει διεξοδικά την απόδοση του εισιτηρίου PDF.

Στη συνέχεια, αντικαταστήστε preview.jpg με τη δική σας μικρογραφία, ώστε να μπορείτε να αναγνωρίζετε αμέσως το θέμα σας στην οθόνη Ticket Themes.

3) Ενημερώστε το λογότυπο και τα γραφικά της κεφαλίδας

Από προεπιλογή, το αρχικό θέμα Pavilion Ticket Theme σας επιτρέπει να ορίσετε το λογότυπο και τα γραφικά κεφαλίδας στο Προϊόν > Ρυθμίσεις εισιτηρίων. Συνήθως θα χρησιμοποιούσατε αυτές τις επιλογές για να ορίσετε το λογότυπο και το γραφικό της κεφαλίδας.Ωστόσο, για το θέμα των εισιτηρίων του Halloween, θα κωδικοποιήσουμε με σκληρό κώδικα τις διαδρομές για το λογότυπο και το γραφικό της κεφαλίδας.

Ο λόγος είναι ότι το λογότυπο και τα γραφικά είναι πολύ διακριτά στο σχεδιασμό αυτού του θέματος εισιτηρίων - δεν θα θέλατε πραγματικά να χρησιμοποιήσετε την έκδοση PDF του εισιτηρίου που είναι φιλική προς την εκτύπωση. Η σκληρή κωδικοποίηση του λογότυπου και του γραφικού κεφαλίδας στο θέμα του εισιτηρίου θα μας επιτρέψει να καθορίσουμε ένα διαφορετικό λογότυπο και μια διαφορετική εικόνα κεφαλίδας για τις εκδόσεις PDF και POS χρησιμοποιώντας τη φόρμα ρυθμίσεων εισιτηρίου.

Αρχικά, τοποθετήστε το λογότυπο και την εικόνα κεφαλίδας σας στο φάκελο images:

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

Ανοίξτε το ticket.php και βρείτε τον ακόλουθο κώδικα προς την κορυφή του αρχείου:

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

Οι δύο δηλώσεις PHP “if” που περιβάλλουν τις εικόνες ελέγχουν αν οι ρυθμίσεις του λογότυπου και της εικόνας κεφαλίδας είναι ενεργοποιημένες. Δεν θα χρησιμοποιήσουμε αυτές τις ρυθμίσεις, οπότε μπορείτε να αφαιρέσετε τους ελέγχους.

Στη συνέχεια, αντικαταστήστε τις διαδρομές εικόνων με τις ακόλουθες:

Διαδρομή λογότυπου:

/images/logo.jpg

Διαδρομή εικόνας κεφαλίδας:

/images/header_img.jpg

Ο ενημερωμένος κώδικας σας θα πρέπει να έχει την εξής μορφή:

<!-- 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) Ανεβάστε το θέμα στον ιστότοπο δοκιμών σας.

Ας δοκιμάσουμε αυτές τις αλλαγές και ας βεβαιωθούμε ότι το νέο θέμα εισιτηρίου μπορεί να αντιστοιχιστεί σε ένα προϊόν, να αποσταλεί με επιτυχία και να εμφανίσει σωστά το λογότυπο και την εικόνα της κεφαλίδας.

Ανεβάστε το θέμα του εισιτηρίου

Θα χρειαστείτε έναν ιστότοπο δοκιμών στον οποίο έχει ήδη εγκατασταθεί και διαμορφωθεί το FooEvents. Χρησιμοποιώντας FTP/SFTP, ανεβάστε το νέο φάκελο θέματος εισιτηρίων στην ακόλουθη θέση:

/wp-content/uploads/fooevents/themes/

Το FooEvents φορτώνει προσαρμοσμένα θέματα από αυτή τη διαδρομή. Αν προτιμάτε, μπορείτε επίσης να χρησιμοποιήσετε FooEvents → Θέματα εισιτηρίων (στο WP admin) για να διαχειριστείτε και να προβάλετε τα θέματα, αλλά για τις τροποποιήσεις του κώδικα είναι προτιμότερο να χρησιμοποιήσετε FTP, καθώς θα χρειαστεί να ενημερώσετε διάφορα αρχεία. Αργότερα, όταν θα είμαστε έτοιμοι για δοκιμή, θα ανεβάσουμε τα τροποποιημένα αρχεία θεμάτων στον ίδιο φάκελο και στη συνέχεια θα στείλουμε email με εισιτήρια σε έναν δοκιμαστικό λογαριασμό.

Ορίστε το θέμα του εισιτηρίου για ένα δοκιμαστικό προϊόν

Στη συνέχεια, θα ενημερώσουμε τις ρυθμίσεις θέματος εισιτηρίου ενός προϊόντος για να χρησιμοποιήσουμε αυτό το θέμα εισιτηρίου, ώστε να μπορείτε να στέλνετε πραγματικά δοκιμαστικά εισιτήρια ενώ επαναλαμβάνετε τη διαδικασία. Με αυτόν τον τρόπο, δοκιμάζετε τα πραγματικά δεδομένα και τη διάταξη που θα στείλετε.

Στο WordPress, επεξεργαστείτε το προϊόν της εκδήλωσής σας και ανοίξτε Δεδομένα προϊόντος → Ρυθμίσεις εισιτηρίων. Ορίστε το θέμα του εισιτηρίου HTML στο θέμα εισιτηρίου Halloween που έχετε ανεβάσει. Δεν θα χρησιμοποιήσετε το λογότυπο, την εικόνα κεφαλίδας και τις επιλογές χρωμάτων, οπότε μπορείτε να τα αφήσετε κενά προς το παρόν. Αργότερα, εάν χρησιμοποιείτε εισιτήρια PDF FooEvents, μπορείτε να χρησιμοποιήσετε αυτές τις ρυθμίσεις για να προσαρμόσετε το εισιτήριο PDF.

Στείλτε ένα δοκιμαστικό εισιτήριο

Ανοίξτε μια υπάρχουσα παραγγελία για αυτό το προϊόν ή δημιουργήστε μια νέα παραγγελία και χρησιμοποιήστε το Επανάληψη αποστολής εισιτηρίων στην πλαϊνή μπάρα για να στείλετε δοκιμαστικά email εισιτηρίων. Φροντίστε να δοκιμάσετε τόσο μεμονωμένα εισιτήρια όσο και email εισιτηρίων που περιλαμβάνουν πολλά εισιτήρια. Το εισιτήριο θα πρέπει να μοιάζει με το αρχικό θέμα εισιτηρίων Pavilion, με τη μόνη διαφορά ότι το λογότυπο και η εικόνα της κεφαλίδας είναι πλέον ενσωματωμένα στον κώδικα και δεν χρησιμοποιούνται οι ρυθμίσεις διαδρομής λογότυπου και κεφαλίδας.

5) Τροποποιήστε τα χρώματα και τη διάταξη ώστε να ταιριάζουν με το προσαρμοσμένο σχέδιο του θέματος των εισιτηρίων για το Halloween.

Το επόμενο βήμα μπορεί να είναι δύσκολο. Ωστόσο, τα πρότυπα έχουν σχεδιαστεί ώστε να είναι όσο το δυνατόν πιο απλά και θα πρέπει να είναι σχετικά εύκολο να τροποποιηθούν. Βρείτε τα υπάρχοντα χρώματα και αντικαταστήστε τα με τα χρώματα που χρησιμοποιούνται στο σχέδιο. Εάν το σχέδιό σας διαφέρει δομικά, τροποποιήστε το HTML και το CSS ώστε να ταιριάζουν με το σχέδιό σας. Το αποτέλεσμα του προτύπου αποτελείται από τρία κύρια αρχεία:

├─ header.php ← Λογότυπο/επικεφαλίδα/μεταδεδομένα εκδήλωσης/επάνω τμήμα ├─ ticket.php ← Το κύριο μπλοκ εισιτηρίων (επαναλαμβάνεται για κάθε εισιτήριο) ├─ footer.php ← Υποσέλιδο/στοιχεία επικοινωνίας

Τροποποιήστε αυτά τα τρία αρχεία όπως απαιτείται, αλλά λάβετε υπόψη ότι οι πελάτες ηλεκτρονικού ταχυδρομείου είναι απαιτητικοί. Διατηρήστε την σήμανση απλή (πίνακες ή ελάχιστα div), ενσωματώστε τα σημαντικά στυλ και χρησιμοποιήστε απόλυτες διευθύνσεις URL εικόνων. Αποφύγετε τα σύγχρονα CSS που πολλοί πελάτες αφαιρούν ή αποδίδουν με ασυνέπεια. Είναι βέλτιστη πρακτική να διατηρείτε το HTML/CSS βασικό για υψηλή συμβατότητα. Ανατρέξτε στον οδηγό FooEvents για αναφορά: Βοήθεια για θέματα εισιτηρίων.

Όταν ολοκληρώσετε τις αλλαγές, ανεβάστε τα ενημερωμένα αρχεία στη διεύθυνση:
/wp-content/uploads/fooevents/themes/halloween_ticket_theme/

Συμβουλή: Δοκιμάζετε τακτικά και διατηρείτε τις αλλαγές μικρές και σταδιακές. Κάθε φορά που ανεβάζετε αλλαγές, μπορείτε να πατήσετε το κουμπί «Επανάληψη αποστολής» στην οθόνη παραγγελίας χωρίς να χρειάζεται να ανανεώσετε τη σελίδα (αυτό θα σας εξοικονομήσει μερικά δευτερόλεπτα). Μόλις τροποποιήσετε το θέμα του εισιτηρίου ώστε να ταιριάζει με το δικό σας σχέδιο, δοκιμάστε το σε διαφορετικά σενάρια. Φροντίστε να δοκιμάσετε τόσο μεμονωμένα εισιτήρια όσο και email εισιτηρίων που περιλαμβάνουν πολλά εισιτήρια (που αποστέλλονται στους αγοραστές).

Τελικοί έλεγχοι πριν από την έναρξη λειτουργίας

Δείτε το email στο Gmail, στο Outlook, στο Apple Mail και, αν είναι δυνατόν, στο κινητό σας. Αν χρησιμοποιείτε μια υπηρεσία προεπισκόπησης όπως Λίτκους, εκτελέστε μια σάρωση σε κοινούς πελάτες. Όταν είστε ικανοποιημένοι με το σχεδιασμό του εισιτηρίου, ανεβάστε το φάκελο με το θέμα του εισιτηρίου στον ιστότοπό σας και ενεργοποιήστε το για τα προϊόντα σας. Εκτελέστε έναν επιπλέον γύρο δοκιμών για να βεβαιωθείτε ότι οι αλλαγές σας αντικατοπτρίζονται σωστά και ότι οι διαδρομές των εικόνων σας λειτουργούν.

Τελική λέξη

Η προσαρμογή ενός θέματος εισιτηρίου FooEvents είναι εξαιρετικά απλή. Ξεκινήστε με μια σταθερή βάση, μετονομάστε την, προσθέστε το γραφικό σας και, στη συνέχεια, επαναλάβετε το CSS/HTML σε μικρά, δοκιμασμένα βήματα. Διατηρήστε τη σήμανση απλή όπως σε ένα email και μην επιδιώκετε περίτεχνα CSS που οι πελάτες θα αγνοήσουν.

Μη διστάσετε να κατεβάσετε και να τροποποιήσετε το σχέδιο του θέματος Halloween Ticket, καθώς και το ολοκληρωμένο θέμα Halloween Ticket, από τους παρακάτω συνδέσμους.