Προσαρμοσμένα θέματα εισιτηρίων - Κέντρο βοήθειας FooEvents

Αυτό το έγγραφο δείχνει πώς να δημιουργήσετε ένα προσαρμοσμένο θέμα εισιτηρίων FooEvents ξεκινώντας με το Θέμα εισιτηρίου καμβά. Το Canvas είναι ένα πρότυπο εκκίνησης που έχει σχεδιαστεί ως βάση για προσαρμοσμένα σχέδια εισιτηρίων. Εκδίδει όλα τα δεδομένα των εισιτηρίων FooEvents σε μια απλή, καθαρή μορφή με βασική HTML και λίγη PHP, γεγονός που το καθιστά ιδανικό για επέκταση και branding.

Θα καλύψουμε τη διάταξη των φακέλων, το πού βρίσκονται τα θέματα, πώς λειτουργεί η ρύθμιση παραμέτρων, πώς να αναθέσετε το θέμα σας σε ένα προϊόν και τα βασικά σημεία για να προσαρμόσετε τη σήμανση με ασφάλεια τόσο για email HTML όσο και για έξοδο PDF.

Προαπαιτούμενα

A WooCommerce ιστοσελίδα με FooEvents εγκατασταθεί και ενεργοποιηθεί.
Πρόσβαση FTP/SFTP (ή ισοδύναμο) για τη μεταφόρτωση αρχείων.
Επεξεργαστής κώδικα (VS Code, Sublime, PhpStorm κ.λπ.).
Ένα δοκιμαστικό προϊόν διαμορφωμένο ως συμβάν FooEvents, ώστε να μπορείτε να στέλνετε προεπισκοπήσεις και επαναπροωθήσεις εισιτηρίων.

1) Κατεβάστε το θέμα Canvas Ticket

Κατεβάστε και αποσυμπιέστε το δωρεάν Θέμα εισιτηρίου καμβά στον τοπικό σας υπολογιστή.

2) Αρχεία θέματος

Αυτά είναι τα βασικά αρχεία που θα επεξεργαστείτε όταν εργάζεστε στο προσαρμοσμένο θέμα εισιτηρίων σας:

├─ config.json        ← Δηλώνει όνομα και συμβατότητα (HTML/PDF/POS)
├─ header.php         ← Email/PDF head + markup σώματος ανοίγματος και CSS
├─ ticket.php         ← Κύριο σώμα- εκτελείται μία φορά ανά εισιτήριο
├─ footer.php         ← Κλείσιμο ετικετών body/html, παράκαμψη CSS υποσέλιδου
├─ images/            ← Περιουσιακά στοιχεία εικόνας (συμπεριλαμβανομένης της μικρογραφίας προεπισκόπησης)
├─ readme.txt         ← Μεταδεδομένα θέματος (που απευθύνονται στον άνθρωπο)
└─ Άδεια/           ← GPL
└─ preview.jpg        ← Μικρογραφία που εμφανίζεται στην οθόνη θεμάτων εισιτηρίων.

Τα κύρια αρχεία στα οποία θα εργαστείτε είναι τα ακόλουθα πρότυπα αρχεία:

header.php θα περιλαμβάνει συνήθως έναν αυστηρό τύπο ηλεκτρονικού ταχυδρομείου XHTML, επαναφορές, βελτιώσεις του Outlook/Apple Mail και ένα $font_family placeholder που ο Canvas έχει ήδη καλωδιώσει.
ticket.php αποδίδει το περιεχόμενο του εισιτηρίου- εκτελείται για κάθε εισιτήριο στο email.
footer.php κλείνει το έγγραφο HTML/PDF.

3) Ενημερώστε το όνομα του θέματος του εισιτηρίου

Δημιουργήστε ένα αντίγραφο εργασίας του θέματος Canvas Ticket, ώστε να μπορείτε να το τροποποιήσετε χωρίς να αγγίξετε το πρωτότυπο.

Όνομα φακέλου: #

Μετονομάστε τον φάκελο που αποσυμπιέζεται σε ένα μοναδικό όνομα, για παράδειγμα, αλλάξτε το ‘canvas_custom_theme’ σε κάτι σαν ‘myticket_theme’. Δώστε στο θέμα σας ένα ξεχωριστό όνομα και δηλώστε ποιες εξόδους υποστηρίζει. Χρησιμοποιήστε μόνο πεζά γράμματα και υπογράμμιση (όχι κενά). Αυτό το όνομα του φακέλου θα γίνει το handle του θέματός σας.

config.json (προεπιλογή Canvas): #

{
  "name": "Canvas Ticket Theme",
  "supports-html": "true",
  "supports-pdf": "true",
  "supports-pos": "false"
}

Στο αρχείο config.json μπορείτε επίσης να αποφασίσετε αν αυτό το προσαρμοσμένο θέμα θα υποστηρίζει επίσης εισιτήρια PDF. Αν σκοπεύετε να σχεδιάσετε μόνο για email HTML, ορίστε:

"supports-pdf": "false"

Αν θα υποστηρίζετε τόσο HTML όσο και PDF, κρατήστε το "true" και δοκιμάστε και τις δύο εξόδους ξεχωριστά.

Σημείωση: Οι τιμές αυτές είναι συμβολοσειρές "true"/"false" στο Canvas- διατηρήστε αυτή τη μορφή για λόγους συμβατότητας.

readme.txt #

Ενημερώστε το “Ticket Theme Name” και την περιγραφή ώστε να αντικατοπτρίζουν το προσαρμοσμένο θέμα σας. Αυτό το αρχείο είναι πληροφοριακό, αλλά βοηθάει κατά τη σάρωση πολλών προσαρμοσμένων θεμάτων.

preview.jpg #

Ενημερώστε τη μικρογραφία της εικόνας preview.jpg, ώστε το θέμα του εισιτηρίου σας να είναι εύκολα αναγνωρίσιμο.

4) Ανέβασμα του θέματος εισιτηρίων στον ιστότοπό σας

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

/wp-content/uploads/fooevents/themes/

5) Αναθέστε το προσαρμοσμένο θέμα σε ένα προϊόν

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

Στο WordPress, επεξεργαστείτε το προϊόν της εκδήλωσής σας και ανοίξτε Δεδομένα προϊόντος → Ρυθμίσεις εισιτηρίων. Ρυθμίστε το Θέμα εισιτηρίου HTML στο Θέμα MyTicket, και στη συνέχεια αποθηκεύστε.

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

6) Κεφαλίδα και υποσέλιδο καμβά (ασφαλές για email)

Χρησιμοποιήστε την κεφαλίδα και το υποσέλιδο του Canvas ως βάση για τη συμβατότητα με email HTML (και λογική έξοδο PDF). Η κεφαλίδα περιλαμβάνει CSS υπό όρους για το Outlook (MSO), επαναφορές που αποτρέπουν τη μορφοποίηση του Gmail/Apple Mail και συντηρητικές προεπιλογές που διατηρούν τις διατάξεις σταθερές σε όλους τους πελάτες και την απόδοση PDF.

7) Το `ticket.php` βρόχος: δομή και βασικά μοτίβα

Κατανοήστε τον τρόπο με τον οποίο τα θέματα εισιτηρίων αποδίδουν τα δεδομένα, ώστε να μπορείτε να μετακινείτε/σκαρώνετε στοιχεία με ασφάλεια.

Ο καμβάς εκτελεί ticket.php μία φορά ανά εισιτήριο. Το αρχείο περιέχει συνήθως δύο εννοιολογικά μέρη:

Μια περιοχή “επικεφαλίδας” που αποδίδει μόνο μια φορά (για το πρώτο εισιτήριο στο μήνυμα ηλεκτρονικού ταχυδρομείου δέσμης ή κατά την προεπισκόπηση).
Ένα επαναλαμβανόμενο μπλοκ που αποδίδει για κάθε εισιτήριο.

“Πρώτο εισιτήριο μόνο” φρουρός #

Θα δείτε μια λογική όπως αυτή στην κορυφή:

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

Παράδειγμα HTML vs PDF #

Ο καμβάς συνήθως διακρίνει την έξοδο με βάση τον τύπο του εισιτηρίου. Αυτό γίνεται για να εξασφαλιστεί η συμβατότητα με τη βιβλιοθήκη DOMPDF που χρησιμοποιείται για την απόδοση αρχείων PDF:

<?php if ( ! empty( $ticket['type'] ) && 'PDF' === $ticket['type'] ) : ?>
  <p><strong>Έκδοση PDF</strong></p>
<?php else : ?>
  <p><strong>Έκδοση HTML</strong></p>
<?php endif; ?>

Χρησιμοποιήστε το για να εφαρμόσετε μικρές διαφορές για συγκεκριμένο φορμά, αν το χρειάζεται ο σχεδιασμός σας. Κρατήστε τις αλλαγές ελάχιστες- είναι εύκολο να εισαγάγετε αποκλίσεις μεταξύ HTML και PDF.

Λογότυπα / εικόνες κεφαλίδας #

Ο καμβάς εκτυπώνει το λογότυπο και την εικόνα κεφαλίδας, εάν παρέχονται στο Προϊόν → Ρυθμίσεις εισιτηρίων:

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

  <p><img src="<?php echo esc_attr( $ticket['WooCommerceEventsTicketHeaderImage'] ); ?>" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="max-width:800px"/></p>
<?php endif; ?>

Διακοπές σελίδων (για εκτύπωση/PDF) #

Ο καμβάς χρησιμοποιεί τη λογική modulo στον αριθμό του εισιτηρίου για να εισάγει διαλείμματα σελίδων:

<?php if ( 0 !== $ticket['ticketNumber'] % 2 ) : ?>
  <div style="page-break-before: always;"></div>
<?php endif; ?>

Αυτό το παράδειγμα εισάγει ένα διάλειμμα σελίδας μετά από κάθε μονό αριθμό εισιτηρίων. Προσαρμόστε τη λογική modulo για τη διάταξή σας (π.χ. διάλειμμα κάθε 1, 2 ή 3 εισιτήρια).

Συνήθη δυναμικά πεδία που θα δείτε #

Όνομα εκδήλωσης: <?php echo esc_attr( $ticket['name'] ); ?>
Ημερομηνίες/ώρες (ποικίλλει ανάλογα με τον τύπο της εκδήλωσης): WooCommerceEventsDate, WooCommerceEventsEndDate, WooCommerceEventsHour, WooCommerceEventsMinutes, WooCommerceEventsPeriod, WooCommerceEventsTimeZone, κ.λπ.
Προσθήκη στο ημερολόγιο: fooevents_ics Τελικό σημείο AJAX με εκδήλωση και εισιτήριο params.
Προσθήκη στο πορτοφόλι: fooevents_wallet_pass Τελικό σημείο AJAX με εισιτήριο ID.
Barcode/QR: <?php echo esc_attr( $barcodeURL ); ?>
Παραλλαγές: επανάληψη WooCommerceEventsVariationsFromID
Κρατήσεις: WooCommerceEventsBookingSlot, WooCommerceEventsBookingDate
Καθίσματα: fooevents_seating_options_array
Πεδία συμμετεχόντων: WooCommerceEventsAttendeeName, WooCommerceEventsAttendeeLastName, WooCommerceEventsAttendeeΤηλέφωνο, WooCommerceEventsAttendeeCompany, κ.λπ.
Προσαρμοσμένα πεδία συμμετεχόντων: fooevents_custom_attendee_fields_options_array
Ζουμ: WooCommerceEventsZoomText (αν είναι ενεργοποιημένο)

Ασφάλεια: Ο καμβάς χρησιμοποιεί escaping (esc_attr, wp_kses_post, esc_attr_e) με συνέπεια. Διατηρήστε τα όταν μετακινείτε πεδία.

Διαφορά μεταξύ ενιαίων και πολλαπλών προτύπων θεμάτων εισιτηρίων PDF #

Εάν χρησιμοποιείτε το πρότυπο "Single" και ένας πελάτης αγοράζει πολλαπλά εισιτήρια, τότε κάθε εισιτήριο θα εμφανίζεται στη δική του σελίδα στο ίδιο αρχείο PDF. Κάθε εισιτήριο θα έχει τη δική του εικόνα κεφαλίδας, το δικό του λογότυπο και τις δικές του λεπτομέρειες της εκδήλωσης. Εάν χρησιμοποιείτε το πρότυπο "Πολλαπλό", τότε το λογότυπο και οι λεπτομέρειες της εκδήλωσης θα εμφανίζονται στην κορυφή της σελίδας και θα ακολουθούνται από 3 εισιτήρια και στη συνέχεια πάλι οι λεπτομέρειες της εκδήλωσης που ακολουθούνται από 3 εισιτήρια κ.λπ. Η ιδέα είναι ότι οι λεπτομέρειες της εκδήλωσης και τα 3 εισιτήρια χωράνε σε μία σελίδα, αλλά αν εμφανίζετε πολλές πληροφορίες, τότε αυτά τα εισιτήρια μπορεί να περάσουν στην επόμενη σελίδα. Για να το αλλάξετε αυτό, μπορείτε είτε να εμφανίσετε λιγότερες πληροφορίες είτε να παρακάμψετε το πρότυπο για να αφαιρέσετε κάποια από τα μαξιλάρια ή να μειώσετε το μέγεθος της γραμματοσειράς.

8) Παραπομπή σε εικόνες θέματος

Φορτώστε εικόνες από το θέμα σας images/ φάκελο με μια αξιόπιστη διαδρομή.

Ανάλογα με τη βάση, το Canvas παρέχει μεταβλητές που μπορείτε να συνδέσετε. Συνήθως θα δείτε ένα από αυτά τα μοτίβα:

<img src="<?php echo $theme_packs_url . $theme_name; ?>/images/myimage.png" alt="..." />

<img src="<?php echo $themePacksURL . 'theme/images/'; ?>myimage.png" alt="..." />

Επιθεώρηση header.php στο Canvas για να επιβεβαιώσετε τις μεταβλητές στο αντίγραφό σας. Πάντα να επιλύετε σε ένα απόλυτη διεύθυνση URL για email.

9) Οδηγίες HTML/CSS για email και PDF

Διατηρήστε τη σήμανση συντηρητική, ώστε να αποδίδεται με συνέπεια σε όλους τους πελάτες και στα PDF.

Χρησιμοποιήστε διάταξη βασισμένη σε πίνακες ή ελάχιστη <div>s; όχι πολύπλοκο flex/grid.
Ενσωματώστε κρίσιμα στυλ (ιδίως γραμματοσειρές, χρώματα, διαστήματα).
Αποφύγετε τις γραμματοσειρές ιστού σε PDF ή παρέχετε ισχυρές εναλλακτικές λύσεις.
Ελαχιστοποίηση φωλιασμένων στοιχείων και πλωτών στοιχείων.
Χρήση page-break-before/after για σελιδοποίηση PDF, αλλά δοκιμάστε με το τελικό σας περιεχόμενο.
Διατηρήστε τις εικόνες ανταποκρινόμενες με max-width:100%; height:auto,; και απόλυτη URLs.
Δοκιμάστε τις εξόδους HTML και PDF ξεχωριστά μετά τις αλλαγές.

10) Ανάθεση, προεπισκόπηση και επανάληψη

Επικυρώστε το θέμα με ρεαλιστικά δεδομένα.

Στο Δεδομένα προϊόντος → Ρυθμίσεις εισιτηρίων, επιβεβαιώστε Θέμα εισιτηρίου HTML (και Θέμα εισιτηρίου PDF εάν ισχύει) έχει οριστεί στο προσαρμοσμένο θέμα σας.
Δημιουργήστε μια δοκιμαστική παραγγελία ή επαναποστολή ένα υπάρχον εισιτήριο στα δικά σας εισερχόμενα.
Εάν τα εισιτήρια αποστέλλονται με ηλεκτρονικό ταχυδρομείο στο αγοραστής και μια παραγγελία περιέχει πολλαπλά εισιτήρια, το email θα περιλαμβάνει πολλαπλά μπλοκ εισιτηρίων-επαληθεύστε ότι τα διαστήματα και οι επικεφαλίδες εξακολουθούν να φαίνονται σωστά.

Επαναλάβετε: επεξεργαστείτε, ανεβάστε τα αλλαγμένα αρχεία και στείλτε τα εκ νέου.

11) Κοινές βελτιώσεις & μοτίβα

Εκτέλεση υπό όρους ανά τύπο εξόδου

Εμφάνιση τμήματος μόνο μία φορά για το πρώτο εισιτήριο

Διακοπές σελίδων με βάση το Modulo

<?php if ( 0 === $ticket['ticketNumber'] % 3 && 0 !== $ticket['ticketNumber'] ) : ?>
  <div style="page-break-before: always;"></div>
<?php endif; ?>

Ασφαλής έξοδος

<h2><?php echo esc_attr( $ticket['name'] ); ?></h2>
<p><?php echo wp_kses_post( $ticket['WooCommerceEventsTicketText'] ); ?></p>

12) Κατάλογος ελέγχου δοκιμών

Προεπισκόπηση + επαναποστολή δοκιμών για HTML και PDF (εάν υποστηρίζεται).
Ηλεκτρονικό ταχυδρομείο πολλαπλών εισιτηρίων στο αγοραστής αποδίδει τακτοποιημένα πολλαπλά μπλοκ εισιτηρίων.
Οι εικόνες επιλύονται (χωρίς σπασμένους συνδέσμους, απόλυτες διευθύνσεις URL).
Σημαντικότεροι πελάτες ηλεκτρονικού ταχυδρομείου: Apple Mail, Outlook desktop/web.
Εάν είναι ενεργοποιημένα τα PDF: εκτυπώστε σε PDF ή δημιουργήστε επίσημα εισιτήρια PDF και επιβεβαιώστε τη σελιδοποίηση, τα περιθώρια και τις γραμματοσειρές.

13) Αντιμετώπιση προβλημάτων

Το θέμα δεν εμφανίζεται στο αναπτυσσόμενο μενού: Επιβεβαιώστε τη διαδρομή του φακέλου και config.json "όνομα" είναι μοναδική- καθαρίστε τις προσωρινές μνήμες και επαναφορτώστε την οθόνη επεξεργασίας προϊόντος.
Οι εικόνες δεν φορτώνονται στο email: Βεβαιωθείτε ότι οι διευθύνσεις URL είναι απόλυτες- αποφύγετε τις σχετικές με το πρωτόκολλο διευθύνσεις URL- επιβεβαιώστε τα δικαιώματα περιουσιακών στοιχείων.
Παράξενο διάστημα στο Outlook: Μειώστε τα εμφωλευμένα στοιχεία, βασιστείτε σε πίνακες και απλοποιήστε το CSS.
Ζητήματα διάταξης PDF: Χρησιμοποιήστε απλούστερες δομές, προσθέστε ρητά διαλείμματα σελίδων, αποφύγετε τα floats και την πολύπλοκη τοποθέτηση.

Άλλα θέματα

Η ίδια διαδικασία μπορεί να εφαρμοστεί σε οποιαδήποτε FooEvents Θέμα εισιτηρίων. Ακολουθούν την ίδια βασική δομή και προσέγγιση. Βρείτε ένα θέμα που είναι παρόμοιο με το δικό σας σχέδιο και χρησιμοποιήστε το ως σημείο εκκίνησης.

Περίληψη

Ξεκινήστε με Καμβάς, δώστε του ένα μοναδικό όνομα στο config.json, τοποθετήστε το στο /wp-content/uploads/fooevents/themes/, και αναθέστε το σε ένα προϊόν δοκιμής. Προσαρμόστε τη σήμανση στο header.php, ticket.php, και footer.php, διατηρώντας τη συντηρητική HTML και τα στυλ inline. Χρησιμοποιήστε τον φρουρό πρώτου εισιτηρίου για στοιχεία μονής εκτέλεσης, ρυθμίστε υπό όρους την έξοδο HTML έναντι PDF, αν χρειάζεται, και βασιστείτε σε διαλείμματα σελίδων για σελιδοποίηση PDF. Δοκιμάστε προεπισκοπήσεις, στείλτε ξανά πραγματικά εισιτήρια και επικυρώστε μηνύματα ηλεκτρονικού ταχυδρομείου πολλαπλών εισιτηρίων πριν από την έναρξη λειτουργίας.

Θέματα