Desain komentar mungkin terlihat sangat sederhana. Dan itu benar! Tapi menurut saya sederhana efektif dalam kasus ini. Komentar adalah bagian penting dari Trik CSS. Saya ingin komentar tersebut sangat mudah dibaca dan nyaman.
Sekarang kita akan beralih ke WordPress dan membuat utas komentar ini menjadi kenyataan. Hal pertama yang kami lakukan adalah menemukan templat di mana kami akan menampilkan komentar. single.phpmungkin yang paling penting (posting blog individu). Kami menemukan di template itu bahwa hanya fungsinya comments_template()yang perlu kami panggil untuk mendapatkan seluruh area komentar. Pada dasarnya apa yang dilakukan fungsi itu adalah mendapatkan file comments.phpdan memasukkannya ke sana. Jadi, kami mulai melihat itu.
Kode dalam file itu dimulai dengan . Itu sangat tepat. Komentar tentu saja merupakan bagian dan harus memiliki pengenal. Ingat kami tidak melakukan gaya apa pun berdasarkan ID, tetapi komentar Anda dibungkus dalam elemen dengan ID komentar itu bagus karena:
- Anda selalu dapat melakukan hash-link ke komentar dengan menambahkan #comments ke URL.
- Orang yang membenci komentar dapat menyembunyikannya di stylesheet pengguna mereka dengan ID yang dapat ditebak.
Kami terus menelusuri kode di file ini. Kami menghapus beberapa hal yang kami yakin tidak akan kami gunakan. Kami mengubah beberapa hal agar sesuai dengan apa yang telah kami rancang di Photoshop.
Kami kemudian menemukan fungsi wp_list_comments()yang merupakan fungsi yang bertanggung jawab untuk mengeluarkan seluruh utas komentar. Kemudian ia melanjutkan dengan hal-hal seperti formulir komentar. Sementara itu, ada logika untuk menunjukkan hal-hal dalam situasi yang berbeda, seperti saat komentar ditutup atau saat komentar dibuka tetapi tidak ada.
Kami menemukan fungsi aneh yang disebut cancel_comment_reply_link()yang kami lihat dan lihat yang menangani fungsionalitas untuk memindahkan formulir komentar kembali ke bawah jika tautan Balas telah diklik dan formulir telah naik, tetapi kami tidak menginginkannya. untuk.
Lalu kami menggali HTML yang kami dapatkan wp_list_comments(). Tanpa melakukan apa pun, kita akan mendapatkan HTML dari fungsi ini yang sangat masuk akal. Tapi juga, itu apa adanya dan tidak akan cocok dengan setiap desain yang mungkin. Secara pribadi, saya lebih suka memiliki kendali penuh atas markup. Jadi, alih-alih hanya mengambil apa yang diberikannya, kami mengambil kendali atasnya dengan menggunakan fungsi kustom di functions.phpfile kami yang menimpa markup default.
Sekarang kita memiliki kontrol HTML, kita bisa masuk ke "mode desain" di mana kita bolak-balik antara CSS dan HTML untuk menyelesaikan desain kita. Komentar CSS, seperti bit CSS modular kecil lainnya dalam proyek ini, kita akan beralih ke file _comments.scss yang dapat kita sertakan di global. Kasus sempurna di mana memisahkan CSS menjadi file itu sendiri masuk akal. Meskipun, kita harus menggunakan gaya global sebanyak mungkin. Misalnya, setiap komentar tentu a .module, gaya tajuk harus baik-baik saja di sini untuk nama, dan tipografi secara umum seharusnya hanya berasal dari gaya tipografi global.
Kami bahkan menggunakan sistem kisi kami di dalam komentar karena setiap komentar pada dasarnya adalah kisi dua kolom. Hal-hal kecil lainnya benar-benar sesuai dengan komentar, seperti di mana dan bagaimana kami memposisikan tautan balasan.
Di akhir screencast, kami mengetahui bahwa desain Photoshop kami memiliki satu kelemahan fatal. Komentar bersarang ada di dalam komentar induk dan cukup sulit untuk membuat modul bertingkat kami terlihat terpisah. Kami mungkin harus membuat kompromi di sini.