Vi har nu et Photoshop-design at arbejde fra til startsiden for området Snippets. Det er meget mere gennemsigtigt, end det var før, men holder regnbuens ånd, som det havde før. Nu kan vi springe ind i at bygge det i vores WordPress-skabeloner. Skriver al HTML og PHP og CSS, og du kender øvelsen!
Trin et bevæger sig over vores brugerdefinerede header, vi havde klar til at gå i vores statiske design. Det betyder at skifte lidt HTML for at have de rigtige indpakningselementer. Det betyder også at sikre, at den betingede logik i overskriften er på plads for at indlæse CSS, der er specifik for dette område, er god. Dette får mig altid til at tænke på 1, 2 eller 3-reglen, jeg har for CSS-filer og JavaScript-filer på et givet websted. CSS-Tricks er et perfekt eksempel på "2" -website, hvor vi har globale stilarter og en CSS til hver specielle sektion på webstedet, hvor den har en hel del styling, der er unik for den. Dette uddragslayout er bestemt unikt.
For at få al den output på denne side, som vi har brug for, bruger vi en masse wp_list_pages () opkald igen. Vi taler om, hvordan dette kan være problematisk, fordi det er et så intensivt opkald, og vi har haft problemer med det tidligere, da vi oprettede Almanac-området. Men da vi har øget vores hukommelsesforbrug og bruger cache, er det ikke en big deal.
Vi afslutter screencast med alt, hvad vi har brug for, output på siden og et meget grundlæggende gitteropsætning. Nu kan vi gå videre og få det til at ligne vores mockup og i sidste ende tilføje interaktionerne.