Kommenttien suunnittelu saattaa näyttää hyvin yksinkertaiselta. Ja se on! Mutta mielestäni yksinkertainen on tehokas tässä tapauksessa. Kommentit ovat niin tärkeä osa CSS-temppuja, että haluan niiden olevan erittäin luettavissa ja mukavia.
Nyt aiomme siirtyä WordPressiin ja tehdä tästä kommenttiketjusta todellisuuden. Ensimmäinen asia, jonka teemme, on löytää malli, jossa näytämme kommentteja. single.phpon luultavasti tärkein (yksittäiset blogiviestit). Löydämme tuosta mallista, että toiminto comments_template()on kaikki mitä meidän on soitettava saadaksemme koko kommenttialueen. Pohjimmiltaan mitä tämä toiminto tekee, on mennä hakemaan tiedosto comments.phpja lisäämään se sinne. Joten alamme tarkastella sitä.
Tiedoston koodi alkaa . Se on erittäin sopiva. Kommentit ovat varmasti osa, ja niillä tulisi olla tunniste. Muista, ettemme tee tyyliä henkilöllisyystodistusten perusteella, mutta kommenttien kääriminen elementtiin, jolla on kommenttien tunnus, on hyvä, koska:
- Voit aina linkittää kommentteihin liittämällä #kommentit URL-osoitteeseen.
- Ihmiset, jotka vihaavat kommentteja, voivat piilottaa ne käyttäjän tyylitaulukkoon arvattavalla tunnuksella.
Käymme läpi tämän tiedoston koodin. Poistamme joitain juttuja, joita olemme melko varmoja, ettemme aio käyttää. Muutamme joitain asioita vastaamaan Photoshopissa suunnittelemiamme.
Sitten törmäämme toimintoon, wp_list_comments()joka on vastuussa koko kommenttiketjun purkamisesta. Sitten se sylkee tavaraa, kuten kommenttilomake. Koko ajan on olemassa logiikkaa näyttää asioita eri tilanteissa, kuten silloin, kun kommentit on suljettu tai kun kommentit ovat avoimia, mutta niitä ei ole.
Löydämme pienen oudon toiminnon, jota kutsutaan cancel_comment_reply_link()katsomaan ja näkemään, joka käsittelee toiminnon kommenttilomakkeen siirtämiseksi takaisin alaspäin, jos Vastaus-linkkiä on napsautettu ja lomake on siirtynyt ylöspäin, mutta emme halunneet siihen.
Sitten kaivetaan HTML-koodiin, josta saamme wp_list_comments(). Tekemättä mitään, saamme HTML: n tästä täysin kohtuullisesta toiminnosta. Mutta se on myös se mitä se ei sovi kaikkiin mahdollisiin muotoiluihin. Henkilökohtaisesti pidän mieluummin siitä, että hallitsen täydellisesti merkintöjä. Joten sen sijaan, että ottaisimme vain sen, mitä se antaa meille, otamme sen hallintaan käyttämällä functions.phptiedostossa mukautettua toimintoa, joka ohittaa oletusmerkinnät.
Nyt kun meillä on HTML-ohjaus, voimme siirtyä tavallaan "suunnittelutilaan", jossa pomppimme edestakaisin CSS: n ja HTML: n välillä, kun suunnittelu tehdään. Kommentoi CSS: ää, kuten mikä tahansa muu tämän projektin pieni modulaarinen bitti CSS: ää, siirrymme _comments.scss-tiedostoon, jonka voimme sisällyttää globaaliin tiedostoon. Täydellinen tapaus, jossa CSS: n erottaminen omaan tiedostoon on järkevää. Meidän pitäisi kuitenkin käyttää niin monta globaalia tyyliä kuin voimme. Esimerkiksi jokainen kommentti on varmasti a .module, otsikkotyylien tulisi olla tässä nimien osalta täysin hienoja, ja typografian tulisi yleensä tulla vain globaaleista typografiatyyleistä.
Käytämme jopa ruudukkojärjestelmäämme kommenteissa, koska jokainen kommentti on olennaisesti kahden sarakkeen ruudukko. Muut pienet asiat ovat täysin tapana kommentoida, kuten missä ja miten sijoitamme vastauslinkit.
Kuvaruudun lopussa selvitämme, että Photoshop-suunnittelullamme on yksi kohtalokas virhe. Sisäkkäiset kommentit elävät vanhemman kommentin sisällä, ja on melko vaikeaa saada sisäkkäiset moduulimme näyttämään siltä kuin ne olisivat erillisiä. Saatamme joutua tekemään tässä kompromisseja.