Share
La începutul anului trecut, un promotor de concerte locale a venit la mine și mi-a cerut să construiesc compania sa un site de ticketing. El a vrut să poată vinde bilete pentru concertele pe care le promovează. Anul trecut, volumul emisiunilor sale a fost prea mare pentru a scrie doar postarea ocazională pe blog, promovându-le sau tweet-urile către un box office online.
Vroia un loc în care toți cei care voiau să vadă muzică live în orașul meu (Cardiff, Marea Britanie) ar putea să cumpere bilete pentru spectacole grozave.
Am hotărât că WordPress ar fi cel mai bun mod de a-și satisface nevoile și m-am gândit să vă gândesc cum să implementați cea mai bună idee. Acest tutorial din două părți vă va arăta cum puteți rula un site similar.
În prima parte, vom vorbi despre etapele de planificare a proiectului și vom analiza ce este într-adevăr necesare pentru un sistem de ticketing, aruncați o privire la modul de utilizare a WordPress pentru a construi un mediu plăcut pentru utilizatorii / clienții dvs. și vom analiza construirea unui schelet gata pentru partea a doua.
În partea a doua ne vom baza pe deciziile pe care le-am luat în prima parte a seriei și vom examina domeniile personalizate și modul în care putem automatiza butoanele "Cumpărați bilete" care vor fi generate la fiecare concert. Vom folosi de asemenea ideea câmpului personalizat pentru a examina modul în care putem vinde mărfurile pentru concert (în special, arta posterului pe care am comandat-o pentru publicitate) și cum putem elimina necesitatea de a utiliza categorii pentru a face diferența între viitor și trecut evenimente.
Apoi vom arunca o privire la TicketTailor, care oferă un serviciu superb de excepție pentru site-urile de bilete și pentru a construi un magazin personalizat pentru dvs., folosind foaia de stil a instalației dvs. WordPress.
Pentru început, trebuie să ne planificăm proiectul. Cea mai simplă cale pentru a face acest lucru este să ne îndeplinim cerințele. Spre deosebire de alte proiecte pe care am putea lucra pentru clienti, un site de ticketing este foarte simplu pentru ca nu avem de-a face cu multe tipuri diferite de continut sau mult stil de text. De fapt, vom folosi doar două sau trei stiluri de text în întregul tutorial. CSS-ul nostru se va ocupa în principal de structura arhivelor noastre.
Un site web pentru tichete are trei cerințe:
Când am început munca de proiectare pentru clientul meu, m-am gândit că cel mai simplu mod de a gestiona o separare între evenimentele viitoare pe care clienții le-ar putea cumpăra bilete și informații generale despre compania promoțională la care lucram ar fi înregistrarea diferitelor taxonomii / tipuri.
Probabil sunteți deja familiarizați cu caracteristica personalizată a tipului postului personalizat al WordPress, care vă permite să creați o modalitate de a procesa toate tipurile de informații. Dar nu uitați utilizatorul dvs. aici!
Nu căutăm să profităm la maximum de Codul WordPress! Vrem să ușuram utilizarea de către utilizatorul nostru a site-ului Web. În realitate, utilizarea inteligentă a câmpurilor meta și a interogărilor personalizate ar elimina chiar și necesitatea de a folosi categorii în sistemul nostru de ticketing.
Vorbind despre ceea ce vom avea nevoie să luăm în considerare înainte de a ajunge la lucru, ne putem gândi acum cum vom construi site-ul nostru. Pentru acest tutorial, vom presupune că faceți câteva concerte și că pe pagina de pornire doriți ca utilizatorii să vadă posterele dvs. pentru a ști exact unde să faceți clic.
Pentru acest tutorial, vom folosi o instalare super bază de WordPress și vom lucra cu tema TwentyEleven care vine ca standard. Vom folosi acest lucru pentru că este deja frumos și este foarte flexibil dacă vrem să continuăm munca.
Pentru a începe, să lămurim puțin din codul care este implicit cu TwentyEleven. Nu avem nevoie de o imagine aleatoare furnizată de WordPress, deschideți header.php și scoateți următorul cod:
„> ID) && (/ * $ src, $ lățime, $ înălțime * / $ image = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), array (HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH)) && $ image [1] / Houston, avem o nouă imagine antet! echo get_the_post_thumbnail ($ post-> ID, 'post-thumbnail'); altfel:?>; ?>)
Puteți să eliminați imaginea de antet utilizând opțiunile temei TwentyEleven, dacă preferați
Desigur, ați putea să eliminați imaginea antetului folosind opțiunile temei TwentyEleven, dacă preferați, dar îmi place să curăț codul pe care nu îl voi folosi ori de cîte ori voi șterge acest lucru direct de la header.php. Celălalt lucru pe care nu îl vom folosi este bara laterală pentru că vrem să folosim bogat opera de artă a posterului nostru. Deci, vom elimina și asta din cod.
Deschideți index.php și ștergeți această linie:
Acum, dacă previzualizați acest lucru, pare ciudat că fișierul nostru CSS încă mai crede că există o bară laterală. Să remediem asta și să deschidem stil.css.
Numărul de linie al codului care controlează spațiul nostru pentru bara laterală este 89. Deci, căutați linia respectivă în CSS și schimbați-o de la aceasta:
#content marja: 0 34% 0 7,6%; lățime: 58,4%;
la acest:
#content margin: 10px;
Acum, apăsați salvați, reîmprospătați pagina de pornire a site-ului dvs. în browser-ul dvs. și veți vedea că spațiul pentru bara laterală a dispărut. Minunat. Acum ne putem ajuta să ne prezentăm concertele. Pentru a fi ușor de explicat, am inclus un fișier XML cu câteva exemple de postări în el, precum și o imagine poster mockup pe care o vom folosi în restul acestui tutorial.
Importați postările în zona de administrare a WordPress și apoi aruncați o privire la site-ul dvs. și veți vedea că acum aveți 8 date de concert cu postere ca singurul conținut din corpul postului. Este OK.
Mai târziu, vom folosi un serviciu de ticketing pentru concerte, numit TicketTailor, pentru a gestiona informațiile despre spectacole și astfel singurul lucru important în ceea ce privește conținutul pentru WordPress este posterul pentru concert.
Acum, să o afișăm într-o manieră clară. Deschideți content.php pentru a putea scoate toate lucrurile de care nu avem nevoie de aici. Indepartati totul altceva decat continutul postului si veti ramane cu aceasta:
> →', 'douazeci unsprezece' ) ); ?>
Pentru moment, acest lucru este tot ce trebuie să includeți în content.php. Acum că avem doar imaginile posterului, ne-am concentrat mai mult pe concerte în sine decât pe informațiile din jurul lor. Acest lucru face foarte simplu pentru noi și utilizatorii noștri. Dar nu vrem ca utilizatorul să trebuiască să parcurgă ore întregi pentru a vedea conținutul pe care doresc să îl vadă. Să folosim un truc CSS curat pentru a obține totul pentru a arăta un pic mai strâns.
Mergeți la linia 701 din fișierul dvs. CSS și ar trebui să găsiți clasele .hentry. Ele arata astfel:
.hentry, .no-rezultate border-bottom: 1px solid #ddd; marja: 0 0 1,625em; umplutură: 0 0 1,625em; poziție: relativă; .numărul: ultimul copil, .no-rezultate border-bottom: none;
Vom schimba valorile primei proprietăți și apoi vom șterge complet ultimul copil, pentru că nu mai avem nevoie de un stil pentru acesta. Iata cateva CSS actualizate pentru a ne da un layout frumos curat:
.hentry, .no-rezultate marja: 0.5em; umplutură: 0 0 1,625em; plutește la stânga;
Pentru moment, asta e tot ce vom face. În a doua jumătate a tutorialului, vom face următoarele:
Accentsconagua
; ?>)