Ora abbiamo un design Photoshop su cui lavorare per la home page dell'area Snippet. È molto più navigabile di prima, ma mantiene lo spirito arcobaleno che aveva prima. Ora possiamo iniziare a costruirlo nei nostri modelli WordPress. Scrivendo tutto l'HTML, il PHP e il CSS e TU CONOSCI L'ESERCIZIO!
Il primo passaggio si sta spostando sulla nostra intestazione personalizzata che avevamo pronto per andare nel nostro design statico. Ciò significa cambiare un po 'di HTML per avere gli elementi wrapper corretti. Significa anche assicurarsi che la logica condizionale nell'intestazione sia a posto per caricare il CSS specifico per quest'area. Questo mi fa sempre pensare alla regola 1, 2 o 3 che ho per i file CSS e JavaScript su qualsiasi sito web. CSS-Tricks è un perfetto esempio di sito web "2" in cui abbiamo stili globali e un CSS per ogni sezione speciale del sito in cui ha un po 'di stile unico. Questo layout di frammenti è sicuramente unico.
Per ottenere tutto l'output su questa pagina di cui abbiamo bisogno, usiamo di nuovo un mucchio di chiamate wp_list_pages (). Parliamo di come questo possa essere problematico perché è una chiamata così intensa e abbiamo avuto problemi in passato quando abbiamo creato l'area Almanacco. Tuttavia, poiché abbiamo aumentato il nostro utilizzo della memoria e stiamo utilizzando la cache, non è un grosso problema.
Terminiamo lo screencast con tutto ciò di cui abbiamo bisogno per l'output sulla pagina e una griglia molto semplice. Ora possiamo passare a far sembrare il nostro mockup e infine aggiungere le interazioni.