Share
All'inizio dell'anno scorso, un promotore locale di concerti venne da me e mi chiese di costruire la sua compagnia un sito di biglietteria. Voleva poter vendere biglietti per i concerti che promuove. L'anno scorso, il volume dei suoi spettacoli era troppo alto per scrivere solo il blog post occasionale promuovendoli o tweet link a un botteghino online.
Voleva un posto dove tutti quelli che volevano vedere la musica dal vivo nella mia città (Cardiff, Regno Unito) potessero andare a comprare i biglietti per grandi spettacoli.
Abbiamo deciso che WordPress sarebbe stato il modo migliore per soddisfare i suoi bisogni e ho iniziato a pensare a come implementare al meglio l'idea. Questo tutorial in due parti ti mostrerà come è possibile eseguire un sito simile.
Nella prima parte, parleremo delle fasi di pianificazione del progetto e considereremo cos'è veramente necessario per un sistema di ticketing, dai un'occhiata a come usare WordPress per creare un ambiente piacevole per i tuoi utenti / clienti, e daremo un'occhiata alla costruzione di uno scheletro pronto per la seconda parte.
Nella seconda parte svilupperemo le decisioni prese nella prima parte della serie e daremo un'occhiata ai campi personalizzati e al modo in cui possiamo automatizzare i pulsanti "Acquista biglietti" da generare in ogni concerto. Useremo anche l'idea del campo personalizzato per vedere come possiamo vendere la merce per il concerto (in particolare, la poster art che abbiamo commissionato per la pubblicità) e come possiamo eliminare la necessità di utilizzare categorie per distinguere tra passato e futuro eventi.
Poi daremo un'occhiata a TicketTailor che fornisce un servizio premium brillante per i siti di biglietteria e crea un negozio personalizzato per te usando il foglio di stile della tua installazione di WordPress.
Per cominciare, dobbiamo pianificare il nostro progetto. Il modo più semplice per noi di farlo è di elaborare le nostre richieste. A differenza di altri progetti sui quali potremmo lavorare per i clienti, un sito web di ticketing è molto semplice perché non abbiamo a che fare con molti tipi diversi di contenuto o molto stile di testo. In effetti, utilizzeremo solo due o tre stili di testo in questo intero tutorial. Il nostro CSS si occuperà principalmente della struttura dei nostri archivi.
Un sito web di bigliettazione ha tre requisiti:
Quando ho iniziato il lavoro di progettazione per il mio cliente, ho pensato che il modo più semplice per gestire una separazione tra gli eventi imminenti ai quali i clienti potessero acquistare i biglietti e le informazioni generali sulla società di promozione per cui lavoravo sarebbe stato registrare diverse tassonomie / post tipi.
Probabilmente hai già familiarità con la funzione di tipo di post personalizzata di WordPress che ti consente di creare un modo per elaborare tutti i tipi di informazioni. Ma non dimenticare il tuo utente qui!
Non stiamo cercando di sfruttare al meglio il codice WordPress! Vogliamo rendere più semplice per il nostro utente l'uso del sito web. In realtà, un uso intelligente dei metadati e delle query personalizzate eliminerebbe anche la necessità di utilizzare categorie nel nostro sistema di ticketing.
Avendo parlato di ciò che avremo bisogno di prendere in considerazione prima di andare al lavoro, ora possiamo pensare a come costruiremo il nostro sito web. Per questo tutorial, assumeremo che stai facendo un bel po 'di concerti e che nella home page, vuoi che le persone siano in grado di vedere i tuoi poster in modo che sappiano esattamente dove fare clic.
Per questo tutorial, utilizzeremo un'installazione di base di WordPress e lavoreremo con il tema TwentyEleven fornito di serie. Lo useremo perché è già ben disegnato ed è davvero flessibile se vogliamo solo andare avanti con il nostro lavoro.
Per iniziare, puliamo parte del codice che viene fornito come predefinito con TwentyEleven. Non abbiamo bisogno di un'immagine casuale come fornita da WordPress, quindi apri l'header.php ed estrai il seguente codice:
"> ID) && (/ * $ src, $ larghezza, $ altezza * / $ immagine = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), array (HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH))) && $ image [1]> = HEADER_IMAGE_WIDTH): / / Houston, abbiamo una nuova immagine di intestazione! echo get_the_post_thumbnail ($ post-> ID, 'post-miniatura'); altro:?>; ?>)
Se lo preferisci, puoi semplicemente rimuovere l'immagine dell'intestazione utilizzando le opzioni del tema TwentyEleven
Naturalmente, se lo preferisci, puoi semplicemente rimuovere l'immagine dell'intestazione usando le opzioni del tema TwentyEleven, ma mi piace pulire il codice che non userò mai ogni volta che posso, quindi lo elimino sempre da header.php immediatamente. L'altra cosa che non useremo è la barra laterale perché vogliamo fare un uso ricco delle nostre illustrazioni per poster. Quindi lo rimuoveremo anche dal codice.
Apri index.php ed elimina questa riga:
Ora, se lo visualizzi in anteprima, sembra un po 'strano perché il nostro file CSS continua a pensare che ci sia una barra laterale. Risolviamolo e apriamo style.css.
Il numero di riga del codice che controlla il nostro spazio per la barra laterale è 89. Quindi cerca la linea nel CSS e cambiala da questa:
#contenuto margine: 0 34% 0 7,6%; larghezza: 58,4%;
a questo:
#content margin: 10px;
Ora premi Salva, aggiorna la homepage del tuo sito nel tuo browser e vedrai che lo spazio per la barra laterale è scomparso. Eccezionale. Ora possiamo lavorare su come mostrare i nostri concerti. Per semplicità di spiegazione, ho incluso un file XML con alcuni post di esempio e un'immagine di poster mockup che utilizzeremo nel resto di questo tutorial.
Importa i post nell'area di amministrazione di WordPress e poi dai un'occhiata al tuo sito e vedrai che ora hai 8 date dei concerti con i poster come unico contenuto nel corpo del post. Questo va bene.
In seguito utilizzeremo un servizio di biglietteria per concerti chiamato TicketTailor per gestire le informazioni sugli spettacoli e quindi l'unica cosa importante per quanto riguarda il contenuto di WordPress è il poster per il concerto.
Ora mostriamolo in modo pulito. Apri content.php in modo che possiamo eliminare tutte le cose di cui non abbiamo bisogno da qui. Rimuovi tutto ciò che è diverso dal contenuto del post e rimarrai con questo:
> →',' venteleven ')); ?>
Per ora, questo è tutto ciò che dobbiamo includere in content.php. Ora che abbiamo solo le immagini dei poster, ci concentriamo molto sugli stessi concerti piuttosto che sulle informazioni che li circondano. Ciò lo rende davvero semplice per noi e per i nostri utenti. Ma non vogliamo che l'utente debba scorrere per ore per vedere il contenuto che vuole davvero vedere. Usiamo un accurato trucco CSS per far sembrare tutto più stretto.
Vai alla riga 701 nel tuo file CSS e dovresti trovare le classi .hentry. Sembrano così:
.hentry, .no-results border-bottom: 1px solid #ddd; margine: 0 0 1.625em; riempimento: 0 0 1.625em; posizione: relativa; .hentry: last-child, .no-results border-bottom: none;
Cambierà i valori della prima proprietà e quindi elimineremo del tutto l'ultimo figlio poiché non avremo più bisogno di uno stile per questo. Ecco alcuni CSS aggiornati per darci un bel layout pulito:
.hentry, .no-results margin: 0.5em; riempimento: 0 0 1.625em; fluttuare: a sinistra;
Per ora, questo è tutto ciò che faremo. Nella seconda parte del tutorial, faremo quanto segue:
Accentsconagua
; ?>)