Designet for kommentarer kan se veldig enkelt ut. Og det er! Men jeg tror enkelt er effektivt i dette tilfellet. Kommentarer er en så viktig del av CSS-triks. Jeg vil at de skal være veldig lesbare og komfortable.
Nå skal vi hoppe inn i WordPress og gjøre denne kommentartråden til virkelighet. Det første vi gjør er å finne en mal der vi skal vise kommentarer. single.phper sannsynligvis det viktigste (individuelle blogginnlegg). Vi finner i den malen at funksjonen comments_template()er alt vi trenger å ringe for å få hele kommentarområdet. I hovedsak hva den funksjonen gjør, er å hente filen comments.phpog plukke den der inne. Så vi begynner å se på det.
Koden i den filen starter med . Det er veldig passende. Kommentarene er absolutt en seksjon, og den skal ha en identifikator. Husk at vi ikke gjør noen styling basert på ID-er, men å ha kommentarene dine pakket i et element med en ID med kommentarer er bra fordi:
- Du kan alltid hashlenke ned til kommentarer ved å legge til #kommentarer til URL-en.
- Folk som hater kommentarer kan gjemme dem i brukerstilsiden med en gjettbar ID.
Vi fortsetter gjennom koden i denne filen. Vi sletter noen ting som vi er ganske sikre på at vi ikke kommer til å bruke. Vi endrer noen ting for å matche det vi har designet i Photoshop.
Vi kommer over funksjonen wp_list_comments()som er funksjonen som er ansvarlig for å spytte ut hele kommentartråden. Så fortsetter det å spytte ut tingene som kommentarskjemaet. Hele tiden er det logikk på plass for å vise ting i forskjellige situasjoner, som når kommentarer lukkes eller når kommentarer er åpne, men det ikke er noen.
Vi finner en litt rar funksjon kalt cancel_comment_reply_link()som vi ser på og ser som håndterer funksjonaliteten for å flytte kommentarskjemaet ned til bunnen i tilfelle at det er klikket på en Svar-lenke og skjemaet har flyttet opp, men vi ønsket ikke det også.
Deretter graver vi oss inn i HTML-en som vi får fra wp_list_comments(). Uten å gjøre noe får vi HTML fra denne funksjonen som er helt rimelig. Men også, det er hva det er og passer ikke til alle mulige design. Personlig foretrekker jeg å ha full kontroll over markeringen. Så i stedet for bare å ta det det gir oss, tar vi kontroll over det ved å bruke en egendefinert funksjon i functions.phpfilen vår som overstyrer standardmarkeringen.
Nå som vi har HTML-kontroll, kan vi komme i ganske "designmodus" hvor vi spretter frem og tilbake mellom CSS og HTML for å få designet vårt. Kommentarer CSS, som enhver annen liten modulær bit av CSS i dette prosjektet, vil vi henvise til en _comments.scss-fil som vi kan inkludere i det globale. Perfekt tilfelle der det er fornuftig å skille ut CSS i sin egen fil. Selv om vi burde bruke så mange globale stiler som vi kan. For eksempel er hver kommentar absolutt en .module, topptekstene skal være helt fine her for navn, og typografi generelt bør bare komme fra de globale typografistilene.
Vi bruker til og med vårt rutenett i kommentarene, siden hver kommentar i hovedsak er et to kolonnegitter. Andre små ting er helt tilpasset kommentarer, som hvor og hvordan vi plasserer svarlenker.
På slutten av screencasten finner vi ut at Photoshop-designet vårt har en dødelig feil. Nestede kommentarer lever i en foreldrekommentar, og det er ganske vanskelig å få våre nestede moduler til å se ut som om de er separate. Vi må kanskje inngå noen kompromisser her.