Reka bentuk untuk komen mungkin kelihatan sangat sederhana. Dan ia! Tetapi saya rasa sederhana berkesan dalam kes ini. Komen adalah bahagian penting dalam CSS-Tricks Saya mahu mereka sangat mudah dibaca dan selesa.
Sekarang kita akan masuk ke WordPress dan menjadikan utas komen ini menjadi kenyataan. Perkara pertama yang kita lakukan ialah mencari templat di mana kita akan memaparkan komen. single.phpmungkin yang paling penting (catatan blog individu). Kami temui dalam templat bahawa fungsi comments_template()adalah semua yang perlu kita panggil untuk mendapatkan keseluruhan kawasan komen. Pada dasarnya apa fungsi yang dilakukan adalah mendapatkan fail comments.phpdan memasukkannya ke sana. Oleh itu, kita mula melihatnya.
Kod dalam fail itu bermula dengan . Itu sangat sesuai. Komen pasti bahagian dan semestinya mempunyai pengecam. Ingat, kami tidak melakukan gaya berdasarkan ID, tetapi memberi komen anda dalam elemen dengan ID komen adalah baik kerana:
- Anda sentiasa boleh mencantumkan pautan ke komen dengan menambahkan #komen ke URL.
- Orang yang membenci komen boleh menyembunyikannya dalam helaian gaya pengguna mereka dengan ID yang dapat diteka.
Kami terus mencari kod dalam fail ini. Kami memadamkan beberapa perkara yang kami pasti tidak akan kami gunakan. Kami mengubah beberapa perkara agar sesuai dengan apa yang telah kami reka di Photoshop.
Kami kemudian menemui fungsi wp_list_comments()yang merupakan fungsi yang bertanggungjawab untuk meludahkan keseluruhan utas komen. Kemudian terus mengeluarkan barang seperti borang komen. Selama ini, ada logik untuk menunjukkan perkara dalam situasi yang berbeza, seperti ketika komen ditutup atau ketika komen terbuka tetapi tidak ada.
Kami menjumpai fungsi pelik yang disebut cancel_comment_reply_link()yang kami lihat dan lihat yang mengendalikan fungsi untuk memindahkan borang komen kembali ke bawah sekiranya pautan Balas telah diklik dan borangnya naik, tetapi kami tidak mahu ke.
Kemudian kami menggali HTML yang kami perolehi wp_list_comments(). Tanpa melakukan apa-apa, kami akan mendapat HTML dari fungsi ini yang sangat wajar. Tetapi juga, apa adanya dan tidak sesuai dengan setiap reka bentuk yang mungkin. Secara peribadi, saya lebih suka mempunyai kawalan penuh ke atas markup. Oleh itu, bukannya mengambil apa yang diberikan kepada kita, kita mengendalikannya dengan menggunakan fungsi khusus dalam functions.phpfail kita yang menggantikan markup lalai.
Sekarang kita mempunyai kawalan HTML, kita dapat masuk ke dalam "mod reka bentuk" di mana kita bolak-balik antara CSS dan HTML untuk menyelesaikan reka bentuk kita. Komen CSS, seperti sedikit modular kecil CSS lain dalam projek ini, kami akan memasukkan fail _comments.scss yang dapat kami sertakan dalam global. Kes yang sempurna apabila memisahkan CSS ke dalam failnya sendiri masuk akal. Walaupun, kita harus menggunakan gaya global sebanyak mungkin. Sebagai contoh, setiap komen tentu saja .module, gaya header harus baik-baik saja di sini untuk nama, dan tipografi pada umumnya harus berasal dari gaya tipografi global.
Kami bahkan menggunakan sistem grid kami dalam komen kerana setiap komen pada dasarnya adalah grid dua lajur. Perkara-perkara kecil lain benar-benar sesuai untuk komen, seperti di mana dan bagaimana kita meletakkan pautan balasan.
Pada akhir screencast, kami mengetahui bahawa reka bentuk Photoshop kami mempunyai satu kelemahan yang fatal. Komen bersarang tinggal dalam komen ibu bapa dan agak sukar untuk menjadikan modul bersarang kami kelihatan seolah-olah terpisah. Kita mungkin perlu membuat kompromi di sini.