Dizajn komentara može izgledati vrlo jednostavno. I to je! Ali mislim da je jednostavno djelotvorno u ovom slučaju. Komentari su tako važan dio CSS-trikova. Želim da budu vrlo čitljivi i ugodni.
Sada ćemo uskočiti u WordPress i pretvoriti ovu nit komentara u stvarnost. Prvo što napravimo je pronaći predložak u kojem ćemo prikazivati komentare. single.phpje vjerojatno najvažniji (pojedinačni blogovi). U tom predlošku nalazimo da je funkcija comments_template()sve što trebamo nazvati da bismo dobili cijelo područje komentara. U osnovi ono što ta funkcija radi jest otići po datoteku comments.phpi ubaciti je tamo. Dakle, počinjemo to gledati.
Kôd u toj datoteci započinje s . To je krajnje prikladno. Komentari su sigurno dio i on bi trebao imati identifikator. Imajte na umu da ne radimo nikakav styling na temelju ID-a, ali umotavanje komentara u element s ID-om komentara je dobro jer:
- Uvijek možete heširati vezu do komentara dodavanjem #komentara URL-u.
- Ljudi koji mrze komentare mogu ih sakriti u svojoj korisničkoj tablici stilova s pretpostavljivim ID-om.
Nastavljamo prolaziti kroz kod u ovoj datoteci. Izbrišemo neke stvari za koje smo prilično sigurni da ih nećemo koristiti. Neke stvari mijenjamo tako da odgovaraju onome što smo dizajnirali u Photoshopu.
Zatim nailazimo na funkciju wp_list_comments()koja je funkcija odgovorna za ispljuvanje cijele niti komentara. Zatim nastavlja ispljuvati stvari poput obrasca za komentar. Sve to vrijeme postoji logika da se stvari prikazuju u različitim situacijama, na primjer kada su komentari zatvoreni ili kada su komentari otvoreni, ali ih nema.
Pronalazimo malu čudnu funkciju koja se zove i cancel_comment_reply_link()koju gledamo i vidimo da rukuje funkcionalnošću za premještanje obrasca za komentar natrag na dno u slučaju da je kliknuta veza Reply i obrazac je premješten gore, ali nismo željeli to da.
Zatim kopamo u HTML-u iz kojeg dolazimo wp_list_comments(). Ne poduzimajući ništa, od ove ćemo funkcije dobiti HTML koji je sasvim razuman. Ali također je takav kakav jest i neće odgovarati svim mogućim dizajnom. Osobno više volim imati potpunu kontrolu nad oznakama. Dakle, umjesto da samo uzmemo ono što nam daje, mi preuzimamo kontrolu nad njim pomoću prilagođene funkcije u našoj functions.phpdatoteci koja nadjačava zadano označavanje.
Sad kad imamo HTML kontrolu, možemo ući u nekako "način dizajniranja" gdje prelazimo naprijed-natrag između CSS-a i HTML-a kako bismo izvršili naš dizajn. Komentira CSS, kao i bilo koji drugi mali modularni bit CSS-a u ovom projektu, preusmjerit ćemo se na datoteku _comments.scss koju možemo uključiti u globalnu. Savršen slučaj kada razdvajanje CSS-a u vlastitu datoteku ima smisla. Iako bismo trebali koristiti što više globalnih stilova. Na primjer, svaki je komentar zasigurno a .module, stilovi zaglavlja ovdje bi trebali biti sasvim u redu za imena, a tipografija bi općenito trebala potjecati iz globalnih stilova tipografije.
Čak koristimo i svoj mrežni sustav unutar komentara, jer je svaki komentar u osnovi mreža s dva stupca. Druge sitnice potpuno su prilagođene komentarima, poput mjesta i načina postavljanja veza s odgovorima.
Na kraju screencasta otkrivamo da naš Photoshop dizajn ima jednu fatalnu manu. Ugnježđeni komentari žive uživo u roditeljskom komentaru i prilično je teško učiniti da naši ugniježđeni moduli izgledaju kao da su odvojeni. Možda ćemo ovdje morati napraviti neke kompromise.