Teraz máme návrh Photoshopu, z ktorého môžeme pracovať na domovskej stránke oblasti Snippets. Je oveľa prehľadateľnejší ako predtým, ale zachováva si dúhového ducha, aký mal predtým. Teraz môžeme skočiť na to, aby sme ho skutočne vytvorili v našich šablónach WordPress. Píšete všetky HTML a PHP a CSS a VY VIEŠ DREVU!
Prvým krokom je presunutie našej vlastnej hlavičky, ktorú sme mali pripraviť v našom statickom dizajne. To znamená obmieňať si kúsok HTML, aby ste mali správne obalové prvky. Znamená to tiež zaistiť, aby bola podmienená logika v hlavičke zavedená, aby bolo dobré načítať CSS špecifické pre túto oblasť. Toto ma vždy prinúti myslieť na pravidlo 1, 2 alebo 3, ktoré mám pre súbory CSS a súbory JavaScript na danom webe. CSS-Tricks je dokonalým príkladom webového servera „2“, kde máme globálne štýly a CSS pre každú špeciálnu sekciu webu, kde má svojský štýl dosť jedinečný. Toto rozloženie úryvkov je určite jedinečné.
Aby sme získali všetok potrebný výstup na tejto stránke, znova použijeme množstvo volaní wp_list_pages (). Hovoríme o tom, ako to môže byť problematické, pretože je to taký intenzívny hovor a my sme s ním mali problémy v minulosti, keď sme vytvorili oblasť Almanachu. Pretože sme však zvýšili využitie pamäte a využívame ukladanie do vyrovnávacej pamäte, nejde o veľký problém.
Ukončujeme screencast so všetkým, čo potrebujeme, aby sme sa dostali na stránku a aby sme vytvorili veľmi základné nastavenie mriežky. Teraz môžeme prejsť k tomu, aby to vyzeralo ako naša maketa, a nakoniec pridať interakcie.