Designen för kommentarer kan se väldigt enkel ut. Och det är! Men jag tror att enkel är effektiv i det här fallet. Kommentarer är en så viktig del av CSS-Tricks. Jag vill att de ska vara mycket läsbara och bekväma.
Nu ska vi hoppa in i WordPress och göra denna kommentarstråd till verklighet. Det första vi gör är att hitta en mall där vi visar kommentarer. single.phpär förmodligen det viktigaste (enskilda blogginlägg). Vi finner i den mallen att funktionen comments_template()är allt vi behöver ringa för att få hela kommentarområdet. I huvudsak vad den funktionen gör är att hämta filen comments.phpoch plocka in den där. Så vi börjar titta på det.
Koden i den filen börjar med . Det är mycket passande. Kommentarerna är verkligen ett avsnitt och det bör ha en identifierare. Kom ihåg att vi inte gör någon styling baserat på ID: n, men att ha dina kommentarer inslagna i ett element med ett ID med kommentarer är bra för:
- Du kan alltid hashlänka ner till kommentarer genom att lägga till #kommentarer till webbadressen.
- Människor som hatar kommentarer kan dölja dem i sitt användarformat med ett gissningsbart ID.
Vi fortsätter genom koden i den här filen. Vi tar bort några saker som vi är ganska säkra på att vi inte kommer att använda. Vi ändrar några saker för att matcha det vi har designat i Photoshop.
Vi stöter sedan på funktionen wp_list_comments()som är den funktion som är ansvarig för att spotta ut hela kommentarstråden. Sedan fortsätter det att spotta ut grejerna som kommentarformuläret. Under hela tiden finns det logik för att visa saker i olika situationer, som när kommentarer är stängda eller när kommentarer är öppna men det inte finns några.
Vi hittar en lite konstig funktion cancel_comment_reply_link()som vi tittar på och ser som hanterar funktionaliteten för att flytta kommentarformuläret ner till botten i fallet att en svarslänk har klickats och formuläret har flyttat upp, men vi ville inte det till.
Sedan gräver vi in i HTML som vi får från wp_list_comments(). Utan att göra någonting får vi HTML från den här funktionen som är helt rimlig. Men också, det är vad det är och passar inte alla möjliga design. Personligen föredrar jag att ha fullständig kontroll över markeringen. Så istället för att bara ta vad det ger oss tar vi kontroll över det genom att använda en anpassad funktion i vår functions.phpfil som åsidosätter standardmarkeringen.
Nu när vi har HTML-kontroll kan vi komma in i ett ”designläge” där vi studsar fram och tillbaka mellan CSS och HTML för att få vår design klar. Kommentarer CSS, som alla andra små modulära bitar av CSS i detta projekt, kommer vi att förflytta oss till en _comments.scss-fil som vi kan inkludera i den globala. Perfekt fall där det är vettigt att separera CSS i sin egen fil. Även om vi borde använda så många globala stilar som vi kan. Till exempel är varje kommentar verkligen en .module, rubrikstilarna ska vara helt bra här för namn och typografi i allmänhet bör bara komma från de globala typografistilarna.
Vi använder till och med vårt nätverkssystem inom kommentarerna, eftersom varje kommentar i huvudsak är ett tvåkolumn-rutnät. Andra små saker är helt anpassade till kommentarer, som var och hur vi placerar svarlänkarna.
I slutet av screencasten räknar vi ut att vår Photoshop-design har en dödlig brist. Kapslade kommentarer lever i en föräldrakommentar och det är ganska svårt att få våra kapslade moduler att se ut som om de är separata. Vi kan behöva göra några kompromisser här.