# 122: Membangun Arsip Video, Bagian 1 - Trik CSS

Anonim

Halaman arsip video adalah bagian dari situs tempat orang dapat menelusuri semua video gratis yang tersedia untuk ditonton. Itu untuk browsing, harus seperti beranda untuk cuplikan atau beranda untuk demo.

Halaman-halaman ini adalah templatnya sendiri, yang dapat kami bentuk dengan sangat cepat dan mudah seperti yang telah kami lakukan berkali-kali sebelumnya. Kami meletakkan pembungkus kami sendiri di sekitar hal-hal dan menggunakan struktur kisi kami untuk memberikan tata letak 2/3 1/3.

Yang sangat menarik bagi saya di sini adalah kami mendapat kesempatan untuk merobek beberapa markup kotor lama dan menggantinya dengan markup yang lebih cerdas dan dihasilkan secara otomatis. Di masa lalu, saya menulis tangan setiap entri ke arsip video sebagai daftar definisi. Sebagai permulaan, itu mungkin bukan markup semantik yang tepat untuk daftar video, terutama ketika setiap entri memulai daftar baru.

Sebagai gantinya, kami merobek semua markup lama itu dan sebagai gantinya menjalankan kueri yang dibuat dengan hati-hati untuk mengambil semua data yang kami butuhkan dari WordPress. Kami menjalankan loop di atas kueri itu dan mengeluarkan markup baru yang lebih bersih (hanya div dengan kelas). Ini akan menghemat waktu kita di masa depan, tidak perlu mengelola halaman arsip ini secara manual.

Saat kami menulis markup baru ini, kami membumbui dengan fungsi WordPress yang mengisi bit-bit yang kami butuhkan untuk menjadi dinamis. Judulnya adalah the_title(). Tautannya adalah the_permalink(). Thumbnail adalah bidang khusus. Cheezy yang mudah.

Div menggunakan nama kelas dari sistem grid kami sehingga semua floating dan sizing dan barang-barang secara otomatis bekerja. Bukankah kita efisien? Beberapa CSS perlu disesuaikan, dan kami menulis itu yang kami butuhkan. Misalnya menyesuaikan padding untuk modul secara khusus di bagian ini (terlalu banyak, kami menguranginya). Hal semacam ini mudah dilakukan melalui nama kelas yang tersedia bagi kita karena kita secara cerdas menggunakan body_class()kembali saat kita mengerjakan kepala.