Share
In het eerste deel van deze zelfstudie hebben we gekeken naar het soort dingen dat u moet overwegen voordat u aan het werk gaat en uw sjabloon voor de ticketsjabloon samenstelt. Nu gaan we alle functionaliteit toevoegen die u van een ticketingsite wilt hebben.
We duiken rechtstreeks in de sjabloon die is gemaakt met de standaard WordPress-installatie van Twenty Eleven en bouwen een snazzy-query met aangepaste veldgegevens. Dan gaan we ons aanmelden bij TicketTailor en leren hoe we calls-to-action kunnen creëren om ervoor te zorgen dat onze gebruikers gemakkelijk kunnen kopen.
Een van de dingen waar ik constant verbaasd over ben als ik code schrijf voor gebruik met WordPress is de hoeveelheid geavanceerde taken die kunnen worden uitgevoerd met een relatief eenvoudig codefragment en een beetje lateraal denken. Ik ben de tel kwijt van het aantal keren dat ik een al te gecompliceerde oplossing voor een probleem heb gebruikt om te ontdekken dat het wijzigen van een regel code op een later tijdstip de noodzaak voor 100 regels elimineert die ik schreef toen ik het project aan mijn cliënt.
De ticketingsite is daar een van. Mijn klant wilde een site die een scheiding maakte tussen toekomstige en eerdere gebeurtenissen. Ik loste het probleem op met een plug-in die op een bepaalde tijd op een bepaalde dag automatisch de categorie van een evenement veranderde van 'toekomst' in 'verleden'. Dit was helemaal niet nodig.
Met WordPress-postquery's kunnen we zoeken op aangepast veld. Dat betekent dat we bijvoorbeeld een aangepast veld kunnen instellen op onze berichten met de naam 'Date' en onze posts daarop kunnen rangschikken. Zoals je waarschijnlijk kunt zien, betekent dit dat we berichten ook kunnen laten verdwijnen of iets anders kunnen doen wat we willen, gewoon door een goede zoekopdracht te schrijven en dan onze aangepaste velden zorgvuldig te gebruiken.
Laten we verder gaan en een vraag stellen voor onze indexpagina. We willen de volgende dingen doen:
Hier is de vraag die we gaan gebruiken om dat te doen:
Accentsconagua
query_posts (array ('post_type' => 'post', 'posts_per_page' => 4, 'meta_key' => 'Datum', 'meta_value' => datum ("Y / m / d"), 'meta_compare' => '> =', 'orderby' => 'meta_value', 'order' => 'ASC', 'paged' => get_query_var ('paged'))); Er zitten veel symbolen en letters in, dus laten we het opsplitsen:
Wauw! Diepe adem. We hebben zojuist de code geschreven die vanaf nu het grootste deel van ons werk gaat voeden - goed werk! Laten we het nu in ons index.php-bestand plaatsen. Dit is hoe het index.php-bestand er daarna zou moeten uitzien:
'post', 'posts_per_page' => 4, 'meta_key' => 'Datum', 'meta_value' => datum ("Y / m / d"), 'meta_compare' => '> =', 'orderby' = > 'meta_value', 'order' => 'ASC', 'paged' => get_query_var ('paged'))); ?>
Klik op Opslaan en laad vervolgens uw site. Er lijkt hier iets mis te zitten toch? Al je berichten zijn verdwenen:
Geen zorgen! Dat betekent dat onze vraag heeft gewerkt. Weet je nog dat je WordPress hebt verteld om het aangepaste veld 'Datum' te gebruiken om je berichten weer te geven? Nou, zo slim als WordPress is, als je geen aangepast veld 'Datum' in je berichten instelt, worden je berichten niet weergegeven! Nu moeten we ons probleem oplossen.
Laad je WordPress-dashboard en navigeer naar een van je berichten. Klik op 'bewerken'. Als u nog nooit eerder aangepaste velden op uw site heeft gebruikt, is de kans groot dat de velden worden verborgen in uw paneel voor het bewerken van berichten. Om ze in te schakelen, klikt u op 'Schermopties' in de rechterbovenhoek van uw venster en vinkt u het selectievakje aan naast 'Aangepaste velden'. Dat zou u de mogelijkheid moeten bieden om aangepaste velden toe te voegen door vanaf nu naar de onderkant van het venster te scrollen. Voeg een nieuw aangepast veld toe met de naam 'Datum'
Het aangepaste veld is hoofdlettergevoelig. Het maakt niet uit wat u typt, zolang het maar overeenkomt met de naam van het aangepaste veld in uw query.
Nu moet je ook een datum in het juiste formaat toevoegen. Eerder hebben we in onze vraag aangegeven dat we het datumformaat gingen gebruiken: JJJJ / MM / DD - U moet deze indeling volgen voor deze zelfstudie. Als u dat niet doet, werkt uw code niet. Dat komt omdat WordPress ongelooflijk efficiënt is in het vergelijken van datums en om te beginnen met het jaar ervoor zorgt ervoor dat alleen posts dit jaar en in de toekomst zullen verschijnen. Dan doet het hetzelfde voor maanden. Dan dagenlang.
Hoewel dit datumformaat waarschijnlijk niet natuurlijk voor u is, bespaart het u veel gedoe. Je zou iets moeten hebben dat er zo uitziet:
Voeg datums toe aan al uw berichten met het aangepaste veld 'Datum' nu. Laad vervolgens je index.php bestand opnieuw en je zult zien dat je de vier concerten (berichten) hebt met de dichtstbijzijnde 'Datum' weergegeven. Vier zijn ook verdwenen (ervan uitgaande dat je het XML-bestand hebt gebruikt dat ik je in het eerste deel heb gegeven). Daar is een reden voor en we zullen daar zo meteen naar kijken.
TicketTailor is een geweldige site die een ticket- en kassaservice biedt aan promotors van concerten. Naast een ongelooflijke klantenservice hebben ze ook een uitgebreid back-endplatform met kaartverkoopstatistieken, affiliate link-mogelijkheden, geavanceerde ticketingmogelijkheden zoals verschillende tarieventypes en de mogelijkheid om gebruiksvriendelijke gastenlijsten voor concerten af te drukken..
Hoewel je die mogelijkheden misschien elders kunt krijgen, kun je nergens anders de aanpassingshulp vinden van de medewerkers van TicketTailor. Met de drie beste plannen in hun tariefplan, stelt het team achter TicketTailor uw verkooppagina op hun server in om er precies zo uit te zien als uw WordPress-site - ongeacht wat u ermee hebt gedaan. Dat is behoorlijk slim.
Dit is niet inbegrepen bij de Basic- of Promoter-pakketten, maar als u niet wilt betalen, kunt u die services ook gebruiken.
Meld je aan voor TicketTailor en stel een evenement in zodat je een ticketing-URL hebt om mensen naartoe te sturen en te gebruiken in deze tutorial.
Als je stap 3 hebt overgeslagen, heb je je niet aangemeld voor TicketTailor en ben je nu verloren. Je zou terug moeten gaan en het nu doen.
U hebt dus uw testgebeurtenis ingesteld op TicketTailor en u hebt toegang tot uw 'winkel' via de link in het configuratiescherm van TicketTailor. Laten we nu onze WordPress-site en onze TicketTailor-site verbinden. We doen dit met behulp van call-to-action knoppen die dynamisch worden aangedreven.
Weet je nog hoe we in stap 2 een aangepast veld voor 'Datum' hebben toegevoegd? Nu gaan we hetzelfde doen voor onze ticketlink. Behalve dat we deze keer geen vraag hoeven te schrijven.
Open de berichteditor en voeg het aangepaste veld 'Ticket' toe en voer vervolgens de URL in van de testgebeurtenis die u hebt ingesteld op TicketTailor zodat uw postpaneel er als volgt uitziet:
We moeten het aangepaste veld 'Ticket' gebruiken om een knop onder de poster voor het concert te genereren, maar we willen alleen dat de knop wordt weergegeven als er een aangepast veld 'Ticket' voor het bericht is. Open het content.php-bestand en plaats de volgende code in net onder regel 14 (die de inhoud van het bericht aanroept)
ID, 'Ticket', waar); if ($ Ticket):?> "> Tickets ophalen
Vernieuw nu uw indexpagina en zo lang uw evenement is:
Je zou zoiets als dit moeten zien:
Het internet zit vol met buzz-woorden - geen veld staat meer vol met buzz-woorden dan de wereld van webdesign. Een van de grote trends in design is het idee om een knop te gebruiken om iemand iets te laten doen. Dit wordt een 'call to action' genoemd en ze werken echt - dus we gaan die eenvoudige ticketlink omzetten in een call-to-action met behulp van een paar regels CSS en een class-tag in onze HTML. Ik heb de volgende CSS als voorbeeld gebruikt, maar je kunt alles gebruiken wat je maar wilt. Voeg gewoon het volgende toe aan uw style.css-bestand:
a.btn width: 100px; opvulling: 10px 10px 10px 10px; margin-bottom: 10px; lettergrootte: 16px; tekstdecoratie: geen; kleur wit; text-shadow: -1px -1px 2px #fff; achtergrond: # ff00cc; border: 1px solid #ccc; grensradius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; a.btn: hover text-shadow: -1px -1px 2px #fff; achtergrond: # 00bafb; border: 1px solid #ccc;
En werk dan je content.php-bestand bij om aan die nieuwe stijlen tegemoet te komen door je link hiernaar te wijzigen:
"> Tickets ophalen
Vernieuw dat en je hebt een leuk uitziend sjabloonbestand dat linkt naar een TicketTailor-pagina met een mooi uitziende call-to-action knop, een slimme lus en een beetje lateraal denken om je een heel leuke ticketing-website te geven die er als volgt uitziet:
Hoewel we daar gewoon kunnen stoppen en een echt functionele website hebben, zijn er nog een paar dingen die we kunnen doen.
Er zijn een paar dingen die iedereen die naar concerten concerten gaat luisteren zoals:
Aangezien u al de meeste tools ter beschikking hebt om uw klanten nog gelukkiger te maken, kunt u beter twee stappen verder gaan - ze zullen eerder naar uw shows komen als u ze een beetje gelukkiger maakt dan andere promotors.
Weet je nog dat we de helft van onze concertposters uit onze vraag hebben gehaald door het aantal optredens in stap 1 als '4' terug te zetten? Nu zijn we daar tot de reden voor gekomen. Zou het niet een leuk idee zijn om uw klanten alle shows te laten zien die u ooit hebt gemaakt naast alle shows die u hebt gepland? Natuurlijk zou het!
Open hiervoor je index.php-bestand en verander het naar het volgende:
'post', 'posts_per_page' => -1, 'meta_key' => 'Date', 'meta_value' => date ("Y / m / d"), 'meta_compare' => '> =', 'orderby' => 'meta_value', 'order' => 'ASC',)); ?>Vorige evenementen
'post', 'posts_per_page' => -1, 'meta_key' => 'Datum', 'meta_value' => datum ("Y / m / d"), 'meta_compare' => '<', 'orderby' => 'meta_value', 'order' => 'DESC', 'paged' => get_query_var ('paged'))); ?>Dat is een groot deel van de code, dus laten we het opsplitsen in hanteerbare brokken.
Het eerste deel dat u al herkent omdat het de query is die we eerder hebben gebruikt. Het enige verschil is dat ik het argument posts_per_page op -1 heb gezet, wat betekent dat de voorpagina nooit pagineert.
De tweede vraag, de tweede helft van de code, zou je ook heel bekend moeten voorkomen, want het is bijna precies hetzelfde als de code die we eerder hebben geschreven met twee uitzonderingen:
- 'meta_compare' is ingesteld op '<' so that WordPress knows we want to display posts which are in the past.
- 'volgorde' is ingesteld op aflopend om de meest recente gebeurtenissen in het verleden eerst weer te geven. Als u eerst de oudste gebeurtenissen wilt weergeven, kunt u dit instellen op ASC in plaats van DESC.
Het andere verschil in de code is dat we een nieuw sjabloongedeelte hebben genoemd voor de afgelopen evenementen omdat tickets voor eerdere evenementen niet meer te koop zijn. We zouden enkele voorwaardelijke uitspraken kunnen schrijven en gewoon de standaard content.php kunnen gebruiken, maar dat is onnodig moeilijk, dus dupliceer gewoon het bestand content.php en verwijder de regels die de knop 'Tickets ophalen' bevatten:
ID, 'Ticket', waar); if ($ Ticket):?> "> Tickets ophalenEn hoe zit het met het verkopen van sommige koopwaar?
U weet al hoe u dit moet doen omdat u eerder ticketkoppelingen en aangepaste velden voor hen heeft ingesteld. Het verkopen van posters of t-shirts via BigCartel of een gelijkwaardige dienst is precies hetzelfde. U hoeft alleen maar een aangepast veld in te stellen met de naam 'Merch', voer bijvoorbeeld de URL van uw product in en druk op update. Voeg vervolgens een regel code toe net onder uw code 'Tickets ophalen' die er als volgt uitziet:
ID, 'Merch', waar); if ($ Merch):?> "> Koop MerchU kunt dit fragment ook toevoegen aan uw bestand met eerdere gebeurtenissen (content-past.php), zodat klanten altijd merchandise van u kunnen kopen.
Conclusie
Dat is dat! Nu hebt u een ticketingsite die WordPress integreert met een fantastische ticketaanbieder, call-to-action-knoppen weergeeft en uw inhoud organiseert zonder dat u ooit een categorie, aangepast berichttype of taxonomie gebruikt.
Er zijn zoveel dingen waar je dit idee voor zou kunnen gebruiken. Laat een reactie achter om ons te laten weten wat je maakt met de code in deze tutorial. Veel plezier!
