Share
Nella prima parte di questo tutorial abbiamo esaminato il tipo di cose che è necessario prendere in considerazione prima di iniziare a lavorare e creare il modello del sito Web di ticketing. Ora, aggiungeremo tutte le funzionalità che vorresti da un sito di ticketing.
Ci immergeremo direttamente nel modello creato dall'installazione predefinita di WordPress di Twenty Eleven e creeremo una query accattivante che utilizza dati di campo personalizzati. Poi registreremo su TicketTailor e scopriremo come possiamo creare inviti all'azione per assicurarci che i nostri utenti possano acquistare facilmente.
Una delle cose di cui sono costantemente sorpreso quando si scrive codice da utilizzare con WordPress è la quantità di attività avanzate che possono essere eseguite con un frammento di codice relativamente semplice e un po 'di pensiero laterale. Ho perso il conto del numero di volte in cui ho utilizzato una soluzione troppo complicata per un problema solo per scoprire che cambiare una riga di codice in una data successiva elimina la necessità di 100 righe che ho scritto quando ho consegnato il progetto al mio cliente.
Il sito web di ticketing è uno di quegli esempi. Il mio cliente desiderava un sito che facesse una separazione tra eventi futuri e passati. Ho risolto il problema con un plug-in che modificava automaticamente la categoria di un evento da "futuro" a "passato" in un determinato momento in un determinato giorno. Questo non era affatto necessario.
Le query post di WordPress ci consentono di eseguire query per campo personalizzato. Ciò significa che possiamo impostare un campo personalizzato sui nostri post chiamato "Data", ad esempio, e quindi organizzare i nostri post con quello. Come probabilmente puoi vedere, significa che possiamo anche far scomparire i post o fare qualsiasi altra cosa vogliamo solo scrivendo una buona query e poi usando attentamente i nostri campi personalizzati.
Andiamo avanti e scriviamo una query per la nostra pagina indice. Vogliamo fare le seguenti cose:
Ecco la query che useremo per farlo:
Accentsconagua
query_posts (array ('post_type' => 'post', 'posts_per_page' => 4, 'meta_key' => 'Date', 'meta_value' => date ("Y / m / d"), 'meta_compare' => '> =', 'orderby' => 'meta_value', 'order' => 'ASC', 'paged' => get_query_var ('paged'))); Ci sono un sacco di simboli e lettere, quindi scomporli:
Wow! Respiro profondo. Abbiamo appena scritto il codice che alimenterà la maggior parte del nostro lavoro da ora in poi - buon lavoro! Ora inseriamolo nel nostro file index.php. Ecco come dovrebbe apparire il file index.php dopo:
'post', 'posts_per_page' => 4, 'meta_key' => 'Date', 'meta_value' => date ("Y / m / d"), 'meta_compare' => '> =', 'orderby' = > 'meta_value', 'order' => 'ASC', 'paged' => get_query_var ('paged'))); ?>
Fai clic su Salva e carica il tuo sito. Qualcosa sembra sbagliato qui, giusto? Tutti i tuoi post sono scomparsi:
Da non preoccuparsi! Ciò significa che la nostra query ha funzionato. Ricorda che hai detto a WordPress di utilizzare il campo personalizzato "Data" per visualizzare i tuoi post? Bene, come WordPress è intelligente, se non si imposta un campo personalizzato 'Data' sui tuoi messaggi, non mostrerà i tuoi messaggi! Ora dobbiamo rimediare al nostro problema.
Carica il tuo dashboard WordPress e naviga verso uno dei tuoi post. Fai clic su "modifica". Se non hai mai utilizzato campi personalizzati nel tuo sito, è probabile che i campi siano nascosti nel tuo pannello di modifica del post. Per attivarli, fai clic su "Opzioni schermo" nell'angolo in alto a destra della finestra, quindi seleziona la casella accanto a "Campi personalizzati". Questo dovrebbe darti la possibilità di aggiungere campi personalizzati scorrendo fino alla fine della finestra d'ora in poi. Aggiungi un nuovo campo personalizzato con il nome "Data"
Il campo personalizzato è case sensitive. Non importa ciò che scrivi purché corrisponda al nome del campo personalizzato nella tua query.
Ora devi anche aggiungere una data nel formato corretto. In precedenza abbiamo specificato nella nostra query che avremmo utilizzato il formato della data: AAAA / MM / GG - È necessario attenersi a questo formato per questo tutorial. Se non lo fai, il tuo codice non funzionerà. Questo perché WordPress è incredibilmente efficiente nel confrontare le date e, a partire dall'anno, fa in modo che solo i post di quest'anno e in futuro vengano visualizzati. Quindi fa lo stesso per mesi. Quindi per giorni.
Anche se questo formato di data probabilmente non ti sembra naturale, ti farà risparmiare un sacco di problemi. Dovresti avere qualcosa che assomigli a questo:
Aggiungi le date a tutti i tuoi post utilizzando il campo personalizzato 'Data' ora. Quindi ricarica il tuo file index.php e vedrai che hai i quattro concerti (post) con la 'Data' più vicina visualizzata. Anche quattro saranno scomparsi (supponendo che tu abbia usato il file XML che ti ho dato nella prima parte). C'è una ragione per questo e vedremo che tra un momento.
TicketTailor è un ottimo sito che offre un servizio di biglietteria e check-out per i promotori di concerti. Oltre ad avere un incredibile servizio clienti, hanno anche una vasta piattaforma di back-end che offre statistiche di vendita dei biglietti, funzionalità di link di affiliazione, capacità di ticketing avanzate come diversi livelli di prezzo e anche la possibilità di stampare elenchi di utenti user friendly per i concerti.
Mentre potresti essere in grado di ottenere quelle funzionalità altrove, ciò che non puoi ottenere da nessun'altra parte è l'aiuto di personalizzazione dello staff di TicketTailor. Con i primi tre piani del piano tariffario, il team dietro TicketTailor personalizzerà la pagina di vendita sul proprio server in modo che assomigli esattamente al tuo sito WordPress, indipendentemente da ciò che hai fatto. È abbastanza intelligente.
Questo non è incluso nei pacchetti Basic o Promoter, ma se non vuoi pagare, puoi usare anche questi servizi.
Iscriviti a TicketTailor e imposta un evento in modo da avere un URL di ticketing per inviare e utilizzare le persone in questo tutorial.
Se hai saltato il passaggio 3, non ti sarai iscritto a TicketTailor e ora ti perderai. Dovresti tornare indietro e farlo ora.
Quindi hai impostato il tuo evento di prova su TicketTailor e puoi accedere al tuo "negozio" utilizzando il link sul pannello di amministrazione di TicketTailor. Colleghiamo ora il nostro sito WordPress e il nostro sito TicketTailor. Lo faremo usando i pulsanti call to action che sono dinamicamente alimentati.
Ti ricordi come abbiamo aggiunto un campo personalizzato per "Data" al passaggio 2? Ora faremo lo stesso per il nostro link al biglietto. Tranne che questa volta non abbiamo bisogno di scrivere una query.
Apri l'editor dei post e aggiungi il campo personalizzato "Ticket", quindi inserisci l'URL dell'evento di prova che hai impostato su TicketTailor in modo che il riquadro del post sia simile al seguente:
Abbiamo bisogno di utilizzare il campo personalizzato "Ticket" per generare un pulsante sotto il poster per il concerto, ma vogliamo solo che mostri il pulsante se c'è un campo personalizzato "Ticket" per il post. Apri il file content.php e rilascia il seguente codice appena sotto la riga 14 (che chiama il contenuto del post)
ID, "Ticket", vero); if ($ Ticket):?> "> Ottieni biglietti
Ora aggiorna la pagina dell'indice e finché il tuo evento è:
Dovresti vedere qualcosa di simile a questo:
Internet è pieno di parole divertenti: nessun campo è più pieno di parole d'ordine rispetto al mondo del web design. Una delle grandi tendenze del design è l'idea di usare un pulsante per convincere qualcuno a fare qualcosa. Questo è chiamato "call to action" e funzionano davvero, quindi trasformeremo quel semplice link ticket in un call to action usando un paio di righe di CSS e un tag di classe sul nostro HTML. Ho usato il seguente CSS come esempio ma potresti usare qualsiasi cosa tu voglia. Basta aggiungere quanto segue al tuo file style.css:
a.btn larghezza: 100px; imbottitura: 10px 10px 10px 10px; margin-bottom: 10px; font-size: 16px; decorazione del testo: nessuna; colore bianco; text-shadow: -1px -1px 2px #fff; sfondo: # ff00cc; border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; a.btn: hover text-shadow: -1px -1px 2px #fff; sfondo: # 00bafb; border: 1px solid #ccc;
E poi aggiorna il tuo file content.php per accomodare quei nuovi stili cambiando il tuo link a questo:
"> Ottieni i biglietti
Aggiungilo e avrai un bel file modello che si collega a una pagina TicketTailor che utilizza un pulsante call to action dall'aspetto gradevole, un loop intelligente e un po 'di pensiero laterale per ottenere un sito web di ticketing davvero carino che assomiglia a questo:
Mentre potremmo semplicemente fermarci e avere un sito web davvero funzionale, ci sono alcune altre cose che possiamo fare.
Ci sono alcune cose che tutti quelli che vanno a vivere concerti di musica come e quelli sono:
Visto che hai già ottenuto la maggior parte degli strumenti a portata di mano per rendere ancora più felici i tuoi clienti, perché non fare ancora due passi: è più probabile che ti piacciano i tuoi spettacoli se li rendi un po 'più felici di altri promotori.
Ricorda che abbiamo tagliato metà dei nostri poster di concerti dalla nostra query impostando il numero di concerti da mostrare come "4" indietro nel passaggio 1? Ora siamo arrivati alla ragione per quello. Non sarebbe un bel tocco per consentire ai tuoi clienti di vedere tutti gli spettacoli che hai mai messo accanto a tutti gli spettacoli che hai in programma? Certo che lo farebbe!
Per fare ciò, apri il tuo file index.php e modificalo nel modo seguente:
'post', 'posts_per_page' => -1, 'meta_key' => 'Date', 'meta_value' => date ("Y / m / d"), 'meta_compare' => '> =', 'orderby' => 'meta_value', 'order' => 'ASC',)); ?>Eventi passati
"post", "posts_per_page" => -1, "meta_key" => "Date", "meta_value" => date ("Y / m / d"), "meta_compare" => "<', 'orderby' => 'meta_value', 'order' => 'DESC', 'paged' => get_query_var ('paged'))); ?>Questa è una grande sezione di codice, quindi dividiamola in pezzi gestibili.
La prima parte la riconoscerai già perché è la query che abbiamo usato in precedenza. L'unica differenza è che ho impostato l'argomento posts_per_page su -1, il che significa che la prima pagina non impaginerà mai.
Anche la seconda query, la seconda metà del codice, dovrebbe sembrarti molto familiare poiché è quasi esattamente uguale al codice che abbiamo scritto in precedenza con due eccezioni:
- 'meta_compare' è impostato su '<' so that WordPress knows we want to display posts which are in the past.
- 'ordine' è impostato su discendente per visualizzare per primi gli eventi passati più recenti. Se si desidera visualizzare prima gli eventi più vecchi, è possibile impostarli su ASC anziché su DESC.
L'altra differenza nel codice è che abbiamo chiamato una nuova parte modello per gli eventi passati perché i biglietti per gli eventi passati non sono più in vendita. Potremmo scrivere alcune dichiarazioni condizionali e usare semplicemente lo standard content.php, ma questo è inutilmente difficile, quindi basta duplicare il file content.php e rimuovere le linee che visualizzano il pulsante "Ottieni biglietti":
ID, "Ticket", vero); if ($ Ticket):?> "> Ottieni bigliettiE per quanto riguarda la vendita di alcuni prodotti?
Sai già come farlo perché hai già impostato i link dei ticket e i campi personalizzati per loro. La vendita di poster o magliette tramite BigCartel o un servizio equivalente è esattamente la stessa cosa. Basta impostare un campo personalizzato chiamato 'Merch' ad esempio, inserire l'URL del prodotto e premere update. Quindi aggiungi una riga di codice appena sotto il codice "Ottieni biglietti" che assomiglia a questo:
ID, "Merch", vero); se ($ Merch):?> "> Ottieni MerchPuoi anche aggiungere questo snippet al file degli eventi passati (content-past.php) in modo che i clienti possano sempre acquistare la merce da te.
Conclusione
Questo è quanto! Ora hai un sito web di bigliettazione che integra WordPress con un fantastico fornitore di biglietti, visualizza i pulsanti di invito all'azione e organizza i tuoi contenuti senza che tu usi mai una categoria, un tipo di post personalizzato o una tassonomia.
Ci sono così tante cose per cui puoi usare questa idea. Lascia un commento per farci sapere cosa fai con il codice in questo tutorial. Divertiti!
