Kami kini mempunyai reka bentuk Photoshop untuk bekerja dari halaman utama kawasan Snippets. Ini jauh lebih mudah dilihat daripada sebelumnya, tetapi mengekalkan semangat pelangi yang ada sebelumnya. Sekarang kita boleh benar-benar membuatnya dalam templat WordPress kita. Menulis semua HTML dan PHP dan CSS dan ANDA MENGETAHUI DRILL!
Langkah pertama bergerak ke atas tajuk khas yang telah kami siapkan dalam reka bentuk statik kami. Itu bermaksud mengubah sedikit HTML untuk mempunyai elemen pembungkus yang betul. Ini juga bermaksud memastikan logik bersyarat di header ada untuk memuatkan CSS khusus untuk kawasan ini baik. Ini selalu membuat saya memikirkan peraturan 1, 2, atau 3 yang saya ada untuk fail CSS dan fail JavaScript di laman web tertentu. CSS-Tricks adalah contoh sempurna laman web "2" di mana kami mempunyai gaya global dan CSS untuk setiap bahagian khas laman web di mana ia mempunyai sedikit gaya yang unik untuknya. Susun atur coretan ini tentunya unik.
Untuk mendapatkan semua output di halaman ini yang kami perlukan, kami menggunakan banyak panggilan wp_list_pages () sekali lagi. Kami bercakap tentang bagaimana ini mungkin bermasalah kerana ia adalah panggilan intensif dan kami pernah menghadapi masalah pada masa lalu ketika kami membuat kawasan Almanac. Namun, kerana kami telah meningkatkan penggunaan memori dan menggunakan caching, ini bukan masalah besar.
Kami menamatkan screencast dengan semua yang kami perlukan output ke halaman dan penyediaan grid yang sangat asas. Sekarang kita boleh terus menjadikannya seperti mockup kita dan akhirnya menambahkan interaksi.