We hebben nu een Photoshop-ontwerp om vanuit te werken voor de startpagina van het gedeelte Snippets. Het is veel meer bladerbaar dan voorheen, maar behoudt de regenbooggeest die het eerder had. Nu kunnen we beginnen met het daadwerkelijk bouwen in onze WordPress-sjablonen. Het schrijven van alle HTML en PHP en CSS en JE KENT DE BOOR!
Stap één is het verplaatsen van onze aangepaste koptekst die we klaar hadden om te gaan in ons statische ontwerp. Dat betekent dat je een beetje HTML moet veranderen om de juiste wrapper-elementen te hebben. Het betekent ook dat u ervoor moet zorgen dat de voorwaardelijke logica in de header aanwezig is om de CSS die specifiek is voor dit gebied goed te laden. Dit doet me altijd denken aan de 1, 2 of 3 regel die ik heb voor CSS-bestanden en JavaScript-bestanden op een bepaalde website. CSS-Tricks is een perfect voorbeeld van een "2" -website waar we globale stijlen hebben en een CSS voor elk speciaal gedeelte van de site waar het nogal wat unieke styling heeft. Deze lay-out van fragmenten is zeker uniek.
Om alle output op deze pagina te krijgen die we nodig hebben, gebruiken we weer een aantal wp_list_pages () aanroepen. We praten erover hoe dit problematisch kan zijn, omdat het zo'n intensief gesprek is en we hebben er in het verleden problemen mee gehad toen we het Almanak-gebied creëerden. Omdat we echter ons geheugengebruik hebben verhoogd en caching gebruiken, is dat geen probleem.
We eindigen de screencast met alles wat we nodig hebben op de pagina en een zeer eenvoudige rasteropstelling. Nu kunnen we het laten lijken op onze mockup en uiteindelijk de interacties toevoegen.