# 122: Membina Arkib Video, Bahagian 1 - Trik CSS

Anonim

Halaman arkib video adalah bahagian laman web di mana orang dapat melihat semua video percuma yang tersedia untuk ditonton. Ini untuk melayari, mesti menyukai beranda untuk coretan atau beranda untuk demo.

Halaman-halaman ini adalah templat mereka sendiri, yang dapat kita bentuk dengan cepat dan mudah seperti yang telah kita lakukan berkali-kali sebelumnya. Kami meletakkan pembungkus kita sendiri dan menggunakan struktur grid untuk memberikan susun atur 2/3 1/3.

Apa yang sangat menggembirakan saya di sini adalah kita mendapat peluang untuk menghilangkan beberapa markup kasar lama dan menggantinya dengan markup yang lebih bijak dan dihasilkan secara automatik. Pada masa lalu, saya menulis sendiri setiap entri ke dalam arkib video sebagai senarai definisi. Sebagai permulaan, itu mungkin bukan penanda semantik yang tepat untuk senarai video, terutamanya apabila setiap entri memulakan senarai baru.

Sebagai gantinya, kami menghapus semua markup lama dan sebaliknya menjalankan pertanyaan yang dibuat dengan teliti untuk mendapatkan semua data yang kami perlukan dari WordPress. Kami menjalankan pengulangan pertanyaan dan mengeluarkan markup baru yang lebih bersih (hanya membahagi dengan kelas). Ini akan menjimatkan masa kita di masa depan, tidak perlu mengurus halaman arkib ini dengan betul.

Semasa kami menulis markup baru ini, kami menggunakan fungsi WordPress yang mengisi bit yang kami perlukan untuk menjadi dinamik. Tajuknya adalah the_title(). Pautan adalah the_permalink(). Gambar kecil adalah medan tersuai. Mudah cheezy.

Div menggunakan nama kelas dari sistem grid kami sehingga semua apungan dan ukuran dan barang berfungsi secara automatik. Bukankah kita cekap? Beberapa CSS perlu menjadi kebiasaan, dan kami menulis bahawa kami perlu. Sebagai contoh, menyesuaikan padding untuk modul secara khusus di bahagian ini (terlalu banyak, kami mengurangkannya). Perkara seperti ini mudah dilakukan melalui nama kelas yang tersedia untuk kita kerana kita secara bijak menggunakan body_class()jalan belakang ketika kita sedang berusaha.