Nyní máme návrh Photoshopu, ze kterého můžeme pracovat na domovské stránce oblasti Úryvky. Je mnohem přehlednější, než tomu bylo dříve, ale zachovává duhového ducha, který měl předtím. Nyní můžeme skočit do jeho skutečného vytváření v našich šablonách WordPress. Psaní všech HTML a PHP a CSS a vy znáte vrtačku!
Prvním krokem je přesun nad naší vlastní hlavičkou, kterou jsme měli připravenou v našem statickém designu. To znamená střídat trochu HTML, abyste měli správné prvky obalu. Znamená to také zajistit, aby podmíněná logika v záhlaví byla na místě, aby bylo dobré načíst CSS specifické pro tuto oblast. Vždy mě to přiměje myslet na pravidlo 1, 2 nebo 3, které mám pro soubory CSS a soubory JavaScript na daném webu. CSS-Tricks je dokonalým příkladem „2“ webu, kde máme globální styly a CSS pro každou speciální sekci webu, kde má pro sebe dost stylů. Toto rozložení úryvků je určitě jedinečné.
Abychom získali veškerý potřebný výstup na této stránce, znovu použijeme spoustu volání wp_list_pages (). Mluvíme o tom, jak by to mohlo být problematické, protože je to tak intenzivní volání a my jsme s tím měli problémy v minulosti, když jsme vytvářeli oblast Almanachu. Protože jsme ale zvýšili využití paměti a využíváme ukládání do mezipaměti, není to velký problém.
Ukončíme screencast se vším, co potřebujeme, výstup na stránku a velmi základní nastavení mřížky. Nyní můžeme přejít k tomu, aby to vypadalo jako naše maketa, a nakonec přidat interakce.