Share
I begynnelsen av året kom en lokal konsertpromotor til meg og spurte meg om å bygge firmaet et billettsalgsside. Han ønsket å kunne selge billetter til konserter som han fremmer. I fjor var volumet av showene for høyt til å bare skrive sporadisk blogginnlegg som promoterer dem eller tweet linker til et nettbasert kontor.
Han ønsket et sted hvor alle som ønsket å se live musikk i min by (Cardiff, Storbritannia) kunne gå for å kjøpe billetter til flotte forestillinger.
Vi bestemte oss for at WordPress ville være den beste måten å møte hans behov på, og jeg satte på å tenke på hvordan jeg best kunne gjennomføre ideen. Denne todelte opplæringen vil vise deg hvordan du kan kjøre et lignende nettsted.
I del ett snakker vi om planleggingsstadiene av prosjektet og vurderer hva som er egentlig nødvendig for et billettsystem, ta en titt på hvordan du bruker WordPress til å bygge et hyggelig miljø for dine brukere / kunder, og vi vil se på å bygge et skjelett klar for del to.
I del to bygger vi på de avgjørelsene vi har gjort i første del av serien, og ser på tilpassede felt og hvordan vi kan automatisere "Kjøp billetter" -knappene som skal genereres på hver konsert. Vi bruker også den egendefinerte feltideen til å se på hvordan vi kan selge varer til konserten (spesielt plakatkunst vi har bestilt for annonsering), og hvordan vi kan eliminere behovet for å bruke kategorier for å skille mellom fremtid og fortid arrangementer.
Så tar vi en titt på TicketTailor som gir en glimrende premium service for billetter til billettsalg og bygger en spesialbutikk for deg som bruker stilarket til WordPress-installasjonen din..
Til å begynne med må vi planlegge vårt prosjekt. Den enkleste måten for oss å gjøre dette på er å utarbeide våre krav. I motsetning til andre prosjekter som vi kan jobbe med for kunder, er et billettside veldig enkelt fordi vi ikke trenger å håndtere mange forskjellige typer innhold eller mye styling av tekst. Faktisk bruker vi bare to eller tre tekststiler i hele denne opplæringen. Vårt CSS vil hovedsakelig håndtere strukturen i våre arkiver.
Et billettsted har tre krav:
Da jeg startet designjobben for klienten min, trodde jeg at den enkleste måten å håndtere en skille mellom kommende hendelser som kundene kunne kjøpe billetter til og generell informasjon om kampanjeselskapet jeg jobbet for, ville være å registrere forskjellige taksonomier / innlegg typer.
Du er sannsynligvis allerede kjent med WordPress 'flotte tilpassede innleggstype-funksjon som lar deg lage en måte å behandle all slags informasjon på. Men ikke glem brukeren din her!
Vi ønsker ikke å få mest mulig ut av WordPress Codex! Vi ønsker å gjøre det enkelt for brukeren å bruke nettstedet. I virkeligheten vil en smart bruk av metafelt og tilpassede spørringer eliminere selv behovet for å bruke kategorier i vårt billettsystem.
Etter å ha snakket om hva vi skal vurdere før vi går på jobb, kan vi nå tenke på hvordan vi skal bygge vår nettside. For denne opplæringen skal vi anta at du bruker ganske mange konserter, og at du på hjemmesiden vil at folk skal kunne se plakatene dine slik at de vet nøyaktig hvor de skal klikke.
For denne opplæringen bruker vi en super grunnleggende installasjon av WordPress og arbeider med TwentyEleven-temaet som kommer som standard. Vi bruker dette fordi det allerede er pent stylet og er veldig fleksibelt hvis vi bare ønsker å fortsette vårt arbeid.
For å starte, la oss rydde ut noen av koden som kommer som standard med TwentyEleven. Vi trenger ikke et tilfeldig bilde som levert av WordPress, så åpner header.php og ta ut følgende kode:
"> ID) && (/ * $ src, $ bredde, $ høyde * / $ image = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), array (HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH))) og& $ bilde [1]> = HEADER_IMAGE_WIDTH): / / Houston, vi har et nytt topptekstbilde! echo get_the_post_thumbnail ($ post-> ID, 'post-miniatyrbilde'); ellers:?>; ?>)
Du kan bare fjerne topptekstbildet ved hjelp av TwentyEleven-temaalternativene hvis du foretrekker det
Selvfølgelig kan du bare fjerne topptekstbildet med TwentyEleven-temaalternativene hvis du foretrekker det, men jeg liker å rydde ut kode som jeg aldri vil bruke når jeg kan, så jeg sletter alltid dette fra header.php med en gang. Den andre tingen vi ikke skal bruke, er sidebjellet fordi vi vil gjøre en rik bruk av plakatbildet vårt. Så vi fjerner bare det fra koden også.
Åpne opp index.php og slett denne linjen:
Nå, hvis du forhåndsviser det, ser det litt rart ut fordi vår CSS-fil fremdeles tror at det er et sidebjelke. La oss rette opp det og åpne opp style.css.
Linjenummeret til koden som styrer plass til sidefeltet er 89. Så søk etter den linjen i CSS og endre den fra dette:
#content margin: 0 34% 0 7.6%; bredde: 58,4%;
til dette:
#content margin: 10px;
Trykk nå på lagre, oppdater hjemmesiden til nettstedet ditt i nettleseren din, og du vil se at plassen til sidelinjen er forsvunnet. Rått. Nå kan vi komme til å jobbe med hvordan vi viser våre konserter. For enkel forklaring har jeg tatt med en XML-fil med noen prøveposter i den, samt et mockup-plakatbilde som vi skal bruke i resten av denne opplæringen.
Importer innleggene i administrasjonsområdet til WordPress, og ta en titt på nettstedet ditt, og du får se at du nå har 8 konsertdatoer med plakater som det eneste innholdet i postens kropp. Dette er greit.
Senere bruker vi en konsertbillettstjeneste, kalt TicketTailor, for å håndtere informasjonen om showene, og det eneste som er viktig for innholdet for WordPress, er plakaten til konserten..
La oss nå vise det på en fin måte. Åpne opp content.php slik at vi kan ta ut alt det vi ikke trenger herfra. Strip bort alt annet enn innleggets innhold, og du vil bli igjen med dette:
> →',' twentyeleven ')); ?>
For nå er dette alt vi trenger å inkludere i content.php. Nå som vi bare har plakatbildene, har vi mye fokus på konsertene i stedet for informasjonen rundt dem. Det gjør det veldig enkelt for oss og våre brukere. Men vi vil ikke at brukeren må rulle i timevis for å se innholdet de virkelig vil se. La oss bruke et pent CSS-triks for å få alt til å se litt strammere ut.
Gå til linje 701 i CSS-filen din, og du bør finne .hentry-klassene. De ser slik ut:
.henty, .no-resultater border-bottom: 1px solid #ddd; margin: 0 0 1.625em; polstring: 0 0 1.625em; stilling: relativ; .hentry: siste barn, .no-resultater border-bottom: none;
Vi endrer verdiene til den første egenskapen og sletter sist barnet helt siden vi ikke trenger en stil for det lenger. Her er noen oppdaterte CSS for å gi oss et fint rent oppsett:
.hentry, .no-results margin: 0.5em; polstring: 0 0 1.625em; flyte: venstre;
For nå er det alt vi skal gjøre. I andre halvdel av opplæringen skal vi gjøre følgende:
Accentsconagua
; ?>)