Share
Begin vorig jaar kwam een lokale concertpromotor naar me toe en vroeg me om zijn bedrijf een ticketingsite te bouwen. Hij wilde kaartjes kunnen verkopen voor de concerten die hij promoot. Vorig jaar was het volume van zijn shows te hoog om slechts af en toe een blogpost te schrijven waarin ze werden gepromoot of links naar een online kassa te tweeten.
Hij wilde een plek waar iedereen die livemuziek in mijn stad wilde kijken (Cardiff, VK) tickets kon kopen voor geweldige shows.
We hebben besloten dat WordPress de beste manier is om aan zijn behoeften te voldoen en ik ben gaan nadenken over hoe het idee het beste kan worden geïmplementeerd. Deze tweedelige tutorial laat je zien hoe je een vergelijkbare website kunt runnen.
In deel een zullen we het hebben over de planningsfasen van het project en bekijken wat er is werkelijk nodig voor een ticketsysteem, kijk eens hoe WordPress te gebruiken om een aangename omgeving voor uw gebruikers / klanten te bouwen, en we zullen een kijkje nemen bij het bouwen van een skelet klaar voor deel twee.
In deel twee bouwen we verder op de beslissingen die we in het eerste deel van de serie hebben genomen, en kijken we naar aangepaste velden en hoe we 'Koop tickets'-knoppen kunnen automatiseren die bij elk concert moeten worden gegenereerd. We gebruiken ook het aangepaste veldidee om te kijken hoe we merchandise voor het concert kunnen verkopen (met name de posters die we hebben laten maken voor advertenties) en hoe we de noodzaak om categorieën te gebruiken om onderscheid te maken tussen toekomst en verleden, kunnen elimineren. events.
Daarna gaan we naar TicketTailor die een schitterende premium service biedt voor het plaatsen van websites en een aangepaste winkel voor u bouwen met behulp van de stylesheet van uw WordPress-installatie.
Om te beginnen moeten we ons project plannen. De eenvoudigste manier voor ons om dit te doen, is om onze eisen uit te werken. In tegenstelling tot andere projecten waar we misschien aan werken voor klanten, is een ticketingsite heel eenvoudig, omdat we niet te maken hebben met veel verschillende soorten inhoud of veel stijl van tekst. In feite gebruiken we in deze hele tutorial slechts twee of drie tekststijlen. Onze CSS zal zich voornamelijk bezighouden met de structuur van onze archieven.
Een ticketingsite heeft drie vereisten:
Toen ik de ontwerpopdracht voor mijn klant startte, dacht ik dat de eenvoudigste manier om een scheiding te beheren tussen aankomende evenementen waar klanten tickets voor konden kopen en algemene informatie over het promotiebedrijf waar ik voor werkte, zou zijn om verschillende taxonomieën / berichten te registreren types.
U bent waarschijnlijk al bekend met de geweldige aangepaste functie van het type bericht van WordPress waarmee u een manier kunt creëren om allerlei soorten informatie te verwerken. Maar vergeet uw gebruiker hier niet!
We proberen niet het maximale uit de WordPress Codex te halen! We willen het onze gebruiker gemakkelijk maken om de website te gebruiken. In werkelijkheid zou een slim gebruik van metavelden en aangepaste query's zelfs de noodzaak elimineren om categorieën in ons kaartensysteem te gebruiken.
Nadat we hebben gesproken over wat we moeten overwegen voordat we aan het werk gaan, kunnen we nu nadenken over hoe we onze website gaan bouwen. Voor deze zelfstudie gaan we ervan uit dat je behoorlijk wat concerten opzet en dat je op de startpagina wilt dat mensen je posters kunnen zien zodat ze precies weten waar ze moeten klikken.
Voor deze zelfstudie gebruiken we een super eenvoudige installatie van WordPress en werken we met het TwentyEleven-thema dat standaard wordt geleverd. We zullen dit gebruiken omdat het al aardig gestyled is en echt flexibel is als we gewoon door willen gaan met ons werk.
Laten we beginnen met het opschonen van een deel van de code die standaard met TwentyEleven komt. We hebben geen willekeurige afbeelding nodig zoals geleverd door WordPress dus open de header.php en verwijder de volgende code:
"> ID) && (/ * $ src, $ width, $ height * / $ image = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), array (HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH)) && $ image [1]> = HEADER_IMAGE_WIDTH): / / Houston, we hebben een nieuwe headerafbeelding! echo get_the_post_thumbnail ($ post-> ID, 'post-thumbnail'); anders:?>; ?>)
U kunt de koptekstafbeelding gewoon verwijderen met de thema-opties van TwentyEleven, als u dat wilt
Natuurlijk kun je de header-afbeelding gewoon verwijderen met de TwentyEleven-thema-opties, maar ik vind het leuk om code op te ruimen die ik nooit zal gebruiken wanneer ik kan, dus ik verwijder dit altijd meteen van header.php. Het andere ding dat we niet zullen gebruiken is de zijbalk omdat we een rijk gebruik willen maken van onze posterillustraties. Dus we zullen dat ook gewoon uit de code verwijderen.
Open index.php en verwijder deze regel:
Nu, als u een voorbeeld daarvan bekijkt, ziet het er een beetje raar uit, omdat ons CSS-bestand nog steeds denkt dat er een zijbalk is. Laten we dat verhelpen en style.css openen.
Het regelnummer van de code die onze spatie voor de zijbalk bepaalt, is 89. Dus zoek naar die regel in de CSS en verander dit uit dit:
#content marge: 0 34% 0 7,6%; breedte: 58,4%;
hieraan:
#content margin: 10px;
Druk nu op opslaan, vernieuw de startpagina van uw site in uw browser en u zult zien dat de ruimte voor de zijbalk is verdwenen. Geweldig. Nu kunnen we aan de slag om onze concerten te laten zien. Voor het gemak van de uitleg heb ik een XML-bestand met een aantal voorbeeldberichten erin toegevoegd, evenals een mockup-posterafbeelding die we in de rest van deze tutorial zullen gebruiken..
Importeer de berichten in het admin gedeelte van WordPress en kijk dan op je site en je zult zien dat je nu 8 concertdatums met posters hebt als de enige inhoud in de body van de post. Dit is oke.
Later gebruiken we een ticketservice voor tickets, genaamd TicketTailor, om de informatie over de shows te verwerken. Het enige belangrijke wat inhoud voor WordPress betreft, is de poster voor het concert..
Laten we het nu op een nette manier weergeven. Open content.php zodat we alle dingen die we niet nodig hebben, hieruit kunnen verwijderen. Verwijder alles behalve de inhoud van het bericht en je blijft achter:
> →', 'twintig elf' ) ); ?>
Voor nu is dit alles wat we nodig hebben om op te nemen in content.php. Nu we alleen de posterafbeeldingen hebben, hebben we veel aandacht voor de concerten zelf en niet voor de informatie om hen heen. Dat maakt het heel eenvoudig voor ons en onze gebruikers. Maar we willen niet dat de gebruiker uren moet scrollen om de inhoud te zien die hij echt wil zien. Laten we een nette CSS-truc gebruiken om alles een beetje strakker te laten lijken.
Ga naar regel 701 in je CSS-bestand en je zou de .hentry klassen moeten vinden. Ze zien er als volgt uit:
.hentry, .no-results border-bottom: 1px solid #ddd; marge: 0 0 1.625em; opvulling: 0 0 1.625em; positie: relatief; .hentry: last-child, .no-results border-bottom: none;
We zullen de waarden van de eerste eigenschap wijzigen en vervolgens het laatste kind verwijderen, omdat we daar geen stijl voor meer nodig hebben. Hier is wat bijgewerkte CSS om ons een mooie, overzichtelijke indeling te geven:
.hentry, .no-results margin: 0.5em; opvulling: 0 0 1.625em; zweven: links;
Voor nu, dat is alles wat we gaan doen. In de tweede helft van de zelfstudie doen we het volgende:
Accentsconagua
; ?>)