Designet til kommentarer ser muligvis meget simpelt ud. Og det er! Men jeg synes, at det enkle er effektivt i dette tilfælde. Kommentarer er en så vigtig del af CSS-Tricks. Jeg ønsker, at de skal være meget læsbare og behagelige.
Nu skal vi springe ind i WordPress og gøre denne kommentartråd til virkelighed. Den første ting vi gør er at finde en skabelon, hvor vi viser kommentarer. single.phper sandsynligvis det vigtigste (individuelle blogindlæg). Vi finder i den skabelon, at funktionen comments_template()er alt, hvad vi skal ringe til for at få hele kommentarområdet. I det væsentlige hvad denne funktion gør er at hente filen comments.phpog plukke den derinde. Så vi begynder at se på det.
Koden i den fil starter med . Det er meget passende. Kommentarerne er bestemt et afsnit, og det skal have en identifikator. Husk, at vi ikke laver nogen styling baseret på ID'er, men at have dine kommentarer pakket ind i et element med et ID med kommentarer er godt, fordi:
- Du kan altid hash-link ned til kommentarer ved at tilføje #kommentarer til URL'en.
- Folk, der hader kommentarer, kan skjule dem i deres brugerformat med et gætteligt ID.
Vi fortsætter gennem koden i denne fil. Vi sletter nogle ting, som vi er temmelig sikre på, at vi ikke vil bruge. Vi ændrer nogle ting for at matche det, vi har designet i Photoshop.
Vi støder derefter på den funktion, wp_list_comments()som er den funktion, der er ansvarlig for at spytte ud hele kommentartråden. Derefter fortsætter det med at spytte tingene ud som kommentarformularen. Alt imens er der logik på plads for at vise ting i forskellige situationer, som når kommentarer lukkes, eller når kommentarer er åbne, men der ikke er nogen.
Vi finder en lidt underlig funktion kaldet, cancel_comment_reply_link()som vi ser på og ser, der håndterer funktionaliteten til at flytte kommentarformularen ned til bunden i tilfælde af, at der er klikket på et svarlink, og formularen er flyttet op, men vi ønskede ikke det til.
Derefter graver vi ind i den HTML, som vi kommer fra wp_list_comments(). Uden at gøre noget får vi HTML fra denne funktion, der er helt rimelig. Men også, det er hvad det er og passer ikke til ethvert muligt design. Personligt foretrækker jeg at have fuld kontrol over markup. Så i stedet for bare at tage det, det giver os, tager vi kontrol over det ved at bruge en brugerdefineret funktion i vores functions.phpfil, der tilsidesætter standardmarkeringen.
Nu hvor vi har HTML-kontrol, kan vi komme i lidt "designtilstand", hvor vi hopper frem og tilbage mellem CSS og HTML for at få vores design færdig. Kommentarer CSS, som enhver anden lille modulær bit af CSS i dette projekt, vil vi henvise til en _comments.scss-fil, som vi kan inkludere i det globale. Perfekt tilfælde, hvor det er fornuftigt at adskille CSS i sin egen fil. Selvom vi skal bruge så mange globale stilarter, som vi kan. For eksempel er hver kommentar helt sikkert en .module, overskriftstilarterne skal være helt fine her for navne, og typografi generelt skal bare komme fra de globale typografistile.
Vi bruger endda vores netsystem inden for kommentarerne, da hver kommentar i det væsentlige er et tosøjlesgitter. Andre små ting er helt tilpassede kommentarer, som hvor og hvordan vi placerer svarlinkene.
I slutningen af screencast finder vi ud af, at vores Photoshop-design har en fatal fejl. Indlejrede kommentarer lever i en forældrekommentar, og det er ret svært at få vores indlejrede moduler til at se ud som om de er adskilte. Vi bliver muligvis nødt til at indgå kompromiser her.