Hur man bygger en biljettförsäljningssida med WordPress och TicketTailor, Dag två Byggnad

I den första delen av denna handledning såg vi på vilken typ av saker du måste tänka på innan du sätter på jobbet och bygger din webbplatskarta för biljettförsäljning. Nu ska vi lägga till all funktionalitet du vill ha från en biljettsida.

Vi dyker rakt in i mallen som skapats från standardversionen av WordPress av tjugo elva och bygger oss en snygg sökfråga som använder egna fältdata. Då ska vi anmäla dig till TicketTailor och lära oss hur vi kan skapa samtal till handling för att se till att våra användare enkelt kan köpa.


Steg 1 Frågor om frågor

En av de saker som jag ständigt förvånad över när jag skriver kod för användning med WordPress är mängden avancerade uppgifter som kan uppnås med ett relativt enkelt kodstycke och lite lateraltänkande. Jag har tappat räkna med antalet gånger jag har använt en alltför komplicerad lösning på ett problem bara för att upptäcka att ändra en kodrad vid ett senare tillfälle eliminerar behovet av 100 linjer som jag skrev när jag levererade projektet till min klient.

Biljettsidan är ett av dessa exempel. Min klient ville ha en webbplats som skilde mellan framtida och tidigare händelser. Jag löste problemet med ett plugin som automatiskt ändrade kategorin av en händelse från "framtid" till "förflutet" vid en viss tid på en viss dag. Detta var inte alls nödvändigt.

WordPress-postfrågor tillåter oss att fråga efter anpassat fält. Det betyder att vi kan ange ett anpassat fält på våra inlägg som heter "Date", och sedan ordna våra inlägg med det. Som du säkert kan se betyder det att vi också kan göra inlägg försvinner eller göra något annat vi vill ha genom att skriva en bra fråga och sedan använda våra anpassade fält noga.

Låt oss fortsätta och skriva en fråga till vår indexsida. Vi vill göra följande saker:

  1. Visa de 4 följande konserterna
  2. Dölj vilka som redan har passerat
  3. Ordna dem vid det datum då de kommer att hända i stället för det datum vi skapade posten på

Här är frågan vi ska använda för att göra det:

 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')));

Det har många symboler och bokstäver i det, så låt oss bryta ner det:

  • post_type - Det här berättar bara WordPress att vi vill använda inlägg snarare än sidor eller annan posttyp
  • posts_per_page - Ange antal inlägg som du vill visa. Vi har använt 4 för exemplet men du kan ange ett tal som är 1 eller högre
  • meta_key - Kom ihåg att vi kan fråga inlägg från ett anpassat fält? Detta berättar WordPress vad det fält vi använder kallas
  • meta_value - Eftersom vi använder ett datum som vår fråga berättar detta WordPress vilket datumformat du kan förvänta dig
  • meta_compare - Det gör precis vad det står: jämför meta värdena för alla inlägg i slingan. Här jämförs dem till det datum som anges på din webbserver och ser till att det bara visar inlägg som har datum som är idag eller i framtiden
  • order_by - Berättar WordPress att vi vill att våra inlägg ska visas i meta_value istället för standardpostdatumet
  • order - det här låter WordPress veta att vi ska visa inlägg i stigande datum ordning: närmaste show först, längst bort datum längre ner på sidan
  • paged - om pagination är aktiverad på ditt tema behöver du det här. Om det inte är det påverkar inte din mall

Wow! Djupt andetag. Vi har just skrivit koden som kommer att driva majoriteten av vårt arbete från och med nu - bra jobb! Låt oss nu släppa det i vår index.php-fil. Här är vad index.php-filen ska se ut efter det:

  
'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'))); ?>

Klicka på Spara och ladda sedan din webbplats. Något ser fel här? Alla dina inlägg har försvunnit:

Var har mina inlägg gått?!

Oroa dig inte! Det betyder att vår fråga har fungerat. Kom ihåg att du sa till WordPress att använda fältet "Datum" för att visa dina inlägg? Tja, så smart som WordPress är, om du inte anger ett "Datum" anpassat fält på dina inlägg, visas det inte dina inlägg! Nu måste vi åtgärda vårt problem.


Steg 2 Lägga till det anpassade fältet "Datum"

Ladda upp din WordPress-kontrollpanel och navigera till en av dina inlägg. Klicka på "redigera". Om du aldrig har använt anpassade fält på din webbplats tidigare är risken att fälten kommer att gömmas på din postredigeringspanel. För att aktivera dem klickar du på "Skärmalternativ" i det övre högra hörnet av ditt fönster och markerar sedan rutan bredvid "Anpassade fält". Det bör ge dig möjlighet att lägga till egna fält genom att rulla till botten av fönstret från och med nu. Lägg till ett nytt anpassat fält med namnet "Datum"

Det anpassade fältet är skiftlägeskänsligt. Det spelar ingen roll vad du skriver så länge det matchar namnet på det egna fältet i din fråga.

Nu måste du också lägga till ett datum i rätt format. Tidigare påpekade vi i vår fråga att vi skulle använda datumformatet: ÅÅÅÅ / MM / DD - Du måste hålla fast vid det här formatet för den här handledningen. Om du inte gör det fungerar inte koden. Det beror på att WordPress är otroligt effektiv vid jämförelse av datum och börjar med det första, så att endast inlägg i år och i framtiden kommer att visa. Då gör det samma i månader. Sedan för dagar.

Även om det här datumformatet förmodligen inte känns naturligt för dig, kommer det att spara mycket besvär. Du borde ha något som ser ut så här:

Lägg till datum för alla dina inlägg med hjälp av anpassningsfältet "Datum" nu. Ladda sedan om din index.php-fil och du ser att du har de fyra konserterna (inlägg) med närmaste "Datum" som visas. Fyra kommer också att försvinna (förutsatt att du använde XML-filen som jag gav dig i första delen). Det finns en anledning till det och vi tittar på det på ett ögonblick.


Steg 3 Registrera dig till TicketTailor

TicketTailor är en bra webbplats som tillhandahåller biljettservice och kundtjänst för konserter av konserter. Förutom att ha otroligt kundservice har de också en omfattande back-end-plattform som ger biljettförsäljningsstatistik, affiliate-länkfunktioner, avancerade biljettförmågor som olika prisnivåer, samt möjligheten att skriva ut användarvänliga gästlistor för konserter.

Medan du kanske kan få de funktionerna på andra håll, kan du inte få någon annanstans hjälp med hjälp av TicketTailor-personalen. Med de tre bästa planerna i sin prisplan anpassar teamet bakom TicketTailor din försäljningssida på deras server för att se exakt ut som din WordPress-webbplats - oavsett vad du har gjort med det. Det är ganska smart.

Detta ingår inte i paketet Basic eller Promoter, men om du inte vill betala kan du använda dessa tjänster också.

Anmäl dig till TicketTailor och skapa en händelse så att du har en biljettadress för att skicka folk till och använda i den här handledningen.


Steg 4 Lägga till en biljettlänk

Om du hoppat över steg 3, har du inte anmält dig till TicketTailor och nu kommer du att gå vilse. Du borde gå tillbaka och göra det nu.

Så du har din testhändelse ställd på TicketTailor och du kan komma åt din "butik" med länken på TicketTailor admin panel. Låt oss nu ansluta vår WordPress-webbplats och vår TicketTailor-webbplats. Vi gör detta med hjälp av funktionsknappar som drivs dynamiskt.

Ett anpassat fält för biljettlänkar

Kom ihåg hur vi lade till ett anpassat fält för "Datum" i steg 2? Nu ska vi göra detsamma för vår biljettlänk. Förutom att den här gången behöver vi inte skriva en fråga.

Öppna postredigeraren och lägg till det anpassade fältet 'Ticket' och ange sedan webbadressen för testhändelsen som du ställt in på TicketTailor så att din postpanel ser ut så här:

Vi behöver använda fältet "Biljett" för att skapa en knapp under affischen för konserten - men vi vill bara att den ska visa knappen om det finns ett "Biljett" -fält för posten. Öppna filen content.php och släpp den följande koden i just under linje 14 (som kallar inläggets innehåll)

  ID, "Biljett", sant); om ($ Ticket):?> "> Hämta biljetter 

Uppdatera nu din indexsida och så länge som din händelse är:

  • Inte tidigare,
  • En av de fyra följande händelserna,

Du borde se något så här:


Steg 5 som vänder sig till ett uppmaning till handling

Internet är fullt av buzz ord - inget fält är mer fullt av buzz ord än webbdesign världen. En av de stora trenderna i design är idén att använda en knapp för att få någon att göra någonting. Detta kallas en "call to action" och de jobbar verkligen - så vi ska göra den enkla biljettlänken till ett anrop till handling med ett par linjer CSS och en klassmärke på vår HTML. Jag använde följande CSS som ett exempel men du kan använda allt du vill. Lägg bara till följande i din style.css-fil:

 a.btn bredd: 100px; vaddering: 10px 10px 10px 10px; marginal-botten: 10px; typsnittstorlek: 16px; text-dekoration: ingen; färg vit; textskugga: -1px -1px 2px #fff; bakgrund: # ff00cc; gränsen: 1px solid #ccc; gränsstråle: 3px; -moz-gränsen-radien: 3px; -webkit-gränsen-radien: 3px;  a.btn: svep text-skugga: -1px -1px 2px #fff; bakgrund: # 00bafb; gränsen: 1px solid #ccc; 

Och uppdatera sedan din content.php-fil för att tillgodose de nya stilar genom att ändra länken till det här:

 "> Få biljetter

Uppdatera det och du har en snygg mallfil som länkar till en TicketTailor-sida som använder en härlig snygg åtkomstknapp, en smart loop och lite lateraltänkande för att få dig en riktigt trevlig biljettwebbplats som ser ut så här:


Ytterligare steg lägger till några blommor

Medan vi bara kunde stanna där och ha en väldigt funktionell hemsida finns det några fler saker vi kan göra.

Det finns några saker som alla som går att leva musik konserter som och de är:

  • Återuppleva minnena av deras favoritkonserter
  • Köpa varor

Eftersom du redan har de flesta verktygen på fingertoppen för att göra dina kunder ännu lyckligare, varför inte gå två steg längre - de är mer benägna att vilja komma till dina shows om du gör dem lite lyckligare än andra promotorer.

Hjälp dem att återuppleva sina minnen

Kom ihåg att vi klippt hälften av våra konsertaffischer ut ur vår sökning genom att ange antalet spelningar som ska visas som "4" tillbaka i steg 1? Nu har vi kommit till anledningen till det. Skulle det inte vara en fin touch för att dina kunder ska kunna se alla de visar du någonsin har satt på bredvid alla de visar du har kommit upp? Visst det skulle!

För att göra det, öppna din index.php-fil och ändra den till följande:

  
'Post', 'posts_per_page' => -1, 'meta_key' => 'Date', 'meta_value' => datum ( "J / m / d"), 'meta_compare' => '> =', 'orderby' => 'meta_value', 'order' => 'ASC',))); ?>

Tidigare händelser

'Post', 'posts_per_page' => -1, 'meta_key' => 'Date', 'meta_value' => datum ( "J / m / d"), 'meta_compare' => '<', 'orderby' => 'meta_value', 'order' => 'DESC', 'paged' => get_query_var ('paged'))); ?>

Det är en stor del av kod så låt oss bryta upp det i hanterbara bitar.

Den första delen kommer du redan att känna igen eftersom det är den fråga vi använde tidigare. Den enda skillnaden är att jag har ställt in posts_per_page-argumentet till -1 vilket innebär att framsidan aldrig kommer att paginera.

Den andra frågan, den senare halvan av koden, borde också vara mycket bekant för dig, eftersom den är nästan exakt samma som den kod vi tidigare skrev med två undantag:

  • 'meta_compare' är inställd på '<' so that WordPress knows we want to display posts which are in the past.
  • "order" är inställt på att avmarkera för att visa senaste händelser i tidigare händelser. Om du vill visa de äldsta händelserna först kan du ställa in detta till ASC istället för DESC.

Den andra skillnaden i koden är att vi har ringt en ny malldel för de senaste evenemangen eftersom biljetter till tidigare evenemang inte längre är till salu. Vi kunde skriva några villkorssatser och bara använda standard content.php men det är onödigt svårt så bara duplicera content.php filen och ta bort raderna som visar de 'få biljetter' -knappen:

  ID, "Biljett", sant); om ($ Ticket):?> "> Hämta biljetter 

Och hur man säljer vissa varor?

Du vet redan hur du gör det här eftersom du har skapat biljettlänkar och de anpassade fälten för dem tidigare. Att sälja affischer eller t-shirts via BigCartel eller en motsvarande tjänst är exakt densamma. Ställ in ett anpassat fält som heter "Merch", till exempel, ange adressen till din produkt och tryck uppdateringen. Lägg sedan till en kodlinje strax under din "Get Tickets" -kod som ser ut så här:

  ID, "Merch", sant); om ($ Merch):?> "> Få Merch 

Du kan också lägga till det här snippet till din tidigare händelsefil (content-past.php) så att kunder alltid kan köpa varor från dig.


Slutsats

Det var det! Nu har du fått en biljett webbplats som integrerar Wordpress med en fantastisk biljettleverantör, visar ringa till åtgärdsknappar och organiserar ditt innehåll utan att du någonsin att använda en kategori, anpassad post typ eller taxonomi.

Det finns så många saker du kan använda den här idén till. Lämna en kommentar för att meddela vad du gör med koden i denna handledning. Ha så kul!