Vi har nu en Photoshop-design att arbeta från för hemsidan för området Snippets. Det är mycket mer bläddringsförmåga än det var tidigare, men håller regnbågsandan som den hade tidigare. Nu kan vi hoppa i att faktiskt bygga det i våra WordPress-mallar. Skriva alla HTML och PHP och CSS och du känner till borrningen!
Steg ett går över vår anpassade rubrik som vi hade redo att gå i vår statiska design. Det innebär att du byter lite HTML för att ha rätt omslagselement. Det innebär också att se till att den villkorliga logiken i sidhuvudet är på plats för att ladda CSS specifikt för detta område är bra. Detta får mig alltid att tänka på 1, 2 eller 3-regeln som jag har för CSS-filer och JavaScript-filer på en viss webbplats. CSS-Tricks är ett perfekt exempel på "2" -webbplats där vi har globala stilar och en CSS för varje speciell sektion på webbplatsen där den har en hel del styling som är unik för den. Den här utdragslayouten är verkligen unik.
För att få all utdata på den här sidan som vi behöver använder vi en massa wp_list_pages () samtal igen. Vi pratar om hur detta kan vara problematiskt eftersom det är ett så intensivt samtal och vi har haft problem med det tidigare när vi skapade Almanac-området. Eftersom vi har ökat minnesanvändningen och använder cachning är det dock inte så farligt.
Vi avslutar skärmutsändningen med allt vi behöver ut på sidan och en mycket grundläggande rutnätuppsättning. Nu kan vi gå vidare så att det ser ut som vår mockup och i slutändan lägga till interaktionerna.