Kami sekarang memiliki desain Photoshop untuk bekerja dari beranda area Snippets. Ini jauh lebih dapat dijelajahi daripada sebelumnya, tetapi tetap mempertahankan semangat pelangi seperti sebelumnya. Sekarang kita dapat langsung membuatnya di template WordPress kita. Menulis semua HTML dan PHP dan CSS dan ANDA TAHU BORnya!
Langkah pertama adalah memindahkan tajuk khusus kami, kami telah siap untuk masuk dalam desain statis kami. Itu berarti mengubah sedikit HTML agar memiliki elemen pembungkus yang benar. Ini juga berarti memastikan logika kondisional di header tersedia untuk memuat CSS khusus untuk area ini dengan baik. Ini selalu membuat saya memikirkan aturan 1, 2, atau 3 yang saya miliki untuk file CSS dan file JavaScript di situs web tertentu. CSS-Tricks adalah contoh sempurna dari situs web "2" di mana kita memiliki gaya global dan CSS untuk setiap bagian khusus situs yang memiliki gaya unik yang cukup. Tata letak potongan ini tentu unik.
Untuk mendapatkan semua output di halaman ini yang kita butuhkan, kita menggunakan banyak panggilan wp_list_pages () lagi. Kami berbicara tentang bagaimana ini mungkin menjadi masalah karena ini adalah panggilan yang intensif dan kami pernah mengalami masalah dengannya di masa lalu ketika kami membuat area Almanac. Namun, karena kami telah meningkatkan penggunaan memori dan menggunakan cache, itu bukan masalah besar.
Kami mengakhiri screencast dengan semua yang kami butuhkan output ke halaman dan pengaturan grid yang sangat dasar. Sekarang kita dapat beralih membuatnya terlihat seperti mockup kita dan pada akhirnya menambahkan interaksi.