Designul pentru comentarii ar putea arăta foarte simplu. Si e! Dar cred că simplu este eficient în acest caz. Comentariile sunt o parte atât de importantă a CSS-Tricks, aș vrea să fie foarte lizibile și confortabile.
Acum vom intra în WordPress și vom face acest fir de comentarii o realitate. Primul lucru pe care îl facem este să găsim un șablon în care vom afișa comentarii. single.phpeste probabil cel mai important (postări individuale pe blog). Găsim în acel șablon că funcția comments_template()este tot ce trebuie să apelăm pentru a obține întreaga zonă de comentarii. În esență, ceea ce face această funcție este să luați fișierul comments.phpși să-l introduceți acolo. Deci, începem să ne uităm la asta.
Codul din fișierul respectiv începe cu . Este foarte potrivit. Comentariile sunt cu siguranță o secțiune și ar trebui să aibă un identificator. Amintiți-vă că nu facem niciun stil bazat pe ID-uri, dar să aveți comentariile dvs. înfășurate într-un element cu un ID de comentarii este bun pentru că:
- Puteți oricând să faceți un hash-link până la comentarii adăugând #comments la adresa URL.
- Persoanele care urăsc comentariile le pot ascunde în foaia de stil a utilizatorului cu un ID de ghicit.
Continuăm să parcurgem codul din acest fișier. Ștergem câteva lucruri pe care suntem destul de siguri că nu le vom folosi. Schimbăm unele lucruri pentru a se potrivi cu ceea ce am proiectat în Photoshop.
Apoi întâlnim funcția wp_list_comments()care este funcția responsabilă pentru scuiparea întregului fir de comentarii. Apoi continuă să scuipe lucrurile, cum ar fi formularul de comentarii. În tot acest timp, există logică pentru a arăta lucruri în situații diferite, cum ar fi când comentariile sunt închise sau când comentariile sunt deschise, dar nu există.
Găsim o funcție puțin ciudată numită pe cancel_comment_reply_link()care o privim și vedem care gestionează funcționalitatea pentru a muta formularul de comentariu înapoi în jos în cazul în care s-a făcut clic pe un link Răspuns și s-a deplasat formularul în sus, dar nu am vrut pentru a.
Apoi, săpăm în codul HTML din care obținem wp_list_comments(). Fără a face nimic, vom obține HTML din această funcție care este perfect rezonabilă. Dar, de asemenea, este ceea ce este și nu se potrivește cu orice design posibil. Personal, prefer să am un control complet asupra marcajului. Deci, în loc să luăm doar ceea ce ne oferă, luăm controlul asupra acesteia utilizând o funcție personalizată în functions.phpfișierul nostru care înlocuiește marcajul implicit.
Acum, că avem control HTML, putem intra într-un fel de „mod de proiectare”, unde săriți înainte și înapoi între CSS și HTML, realizând proiectarea noastră. Comentarii CSS, ca orice alt bit modular mic de CSS din acest proiect, vom retrograda într-un fișier _comments.scss pe care îl putem include în global. Caz perfect în care separarea CSS în propriul fișier are sens. Deși ar trebui să folosim cât mai multe stiluri globale posibil. De exemplu, fiecare comentariu este cu siguranță un .module, stilurile de antet ar trebui să fie foarte bine aici pentru nume, iar tipografia în general ar trebui să provină doar din stilurile de tipografie globale.
Ne folosim chiar și sistemul de grilă în cadrul comentariilor, deoarece fiecare comentariu este în esență o grilă cu două coloane. Alte lucruri mici sunt complet personalizate pentru comentarii, cum ar fi unde și cum poziționăm linkurile de răspuns.
La sfârșitul screencast-ului, ne dăm seama că designul nostru Photoshop are un defect fatal. Comentariile imbricate trăiesc în cadrul unui comentariu părinte și este destul de dificil să facem modulele noastre imbricate să arate ca și cum ar fi separate. S-ar putea să trebuiască să facem unele compromisuri aici.