Kommentaaride kujundus võib tunduda väga lihtne. Ja ongi! Kuid ma arvan, et antud juhul on lihtne. Kommentaarid on CSS-trikkide nii oluline osa. Ma tahan, et need oleksid väga loetavad ja mugavad.
Nüüd läheme WordPressi ja muudame selle kommentaarilõigu reaalsuseks. Esimene asi, mida me teeme, on leida mall, milles kuvame kommentaare. single.phpon ilmselt kõige olulisem (üksikud blogipostitused). Leiame sellest mallist, et comments_template()kogu kommentaaride ala saamiseks on vaja ainult funktsiooni. Põhimõtteliselt on see funktsioon see, et minge fail kätte comments.phpja lisage see sinna. Niisiis, hakkame seda vaatama.
Selle faili kood algab tähega . See on väga asjakohane. Kommentaarid on kindlasti osa ja sellel peaks olema identifikaator. Pidage meeles, et me ei tee ID-de põhjal mingit stiili, kuid kommentaaride ID-ga elementi mähituna on hea, sest:
- Alati saate kommentaaridele räsi linkida, lisades URL-ile # kommentaari.
- Inimesed, kes vihkavad kommentaare, saavad need oma kasutaja stiilitabelisse ära arvata arvatava ID-ga.
Me jätkame selle faili koodi läbimist. Kustutame mõned asjad, mida oleme üsna kindlad, et ei hakka kasutama. Muudame mõningaid asju, et need vastaksid Photoshopi kujundusele.
Seejärel puutume kokku funktsiooniga, wp_list_comments()mis vastutab kogu kommentaarniidi välja sülitamise eest. Siis sülitatakse edasi selliseid asju nagu kommentaarivorm. Kogu aeg on loogika, mis näitab asju erinevates olukordades, näiteks kui kommentaarid on suletud või kui kommentaarid on avatud, kuid neid pole.
Leiame natuke imeliku funktsiooni, cancel_comment_reply_link()mida me vaatame ja näeme, mis haldab funktsiooni kommentaari vormi allapoole viimiseks, kui linki Vastus on klõpsatud ja vorm on liikunud ülespoole, kuid me ei tahtnud seda.
Seejärel süveneme HTML-i, millest saame wp_list_comments(). Midagi tegemata saame selle täiesti mõistliku funktsiooni HTML-i. Kuid see on ka see, mis see on ja mis ei sobi kõigi võimalike kujundustega. Isiklikult eelistan markeeringu üle täielikku kontrolli. Nii et selle asemel, et lihtsalt võtta, mida see meile annab, võtame selle üle kontrolli, kasutades oma functions.phpfailis kohandatud funktsiooni, mis tühistab vaikimärgistuse.
Nüüd, kui meil on HTML-i juhtimine, võime minna teatud kujundusrežiimi, kus põrkame edasi-tagasi CSS-i ja HTML-i vahel, et meie disain saaks valmis. Kommenteerib CSS-i, nagu ka kõiki teisi selle projekti väikeseid modulaarseid CSS-i bitte, viiakse meil üle _comments.scss-faili, mille võime globaalsesse kaasata. Ideaalne juhtum, kus CSS-i eraldamine oma faili on mõistlik. Kuigi me peaksime kasutama nii palju globaalseid stiile kui võimalik. Näiteks on iga kommentaar kindlasti a .module, päise stiilid peaksid siin nimede jaoks täiesti korras olema ja tüpograafia üldiselt peaks tulema lihtsalt globaalsetest tüpograafia stiilidest.
Me kasutame kommentaarides isegi oma ruudustikusüsteemi, kuna iga kommentaar on sisuliselt kahe veeru ruudustik. Muud pisiasjad on kommentaaride jaoks täiesti tavapärased, näiteks kuhu ja kuidas vastulinke paigutame.
Ekraanikuva lõpus selgitame välja, et meie Photoshopi kujundusel on üks saatuslik viga. Pesakommentaarid asuvad vanemkommentaarides ja on üsna keeruline muuta meie pesastatud mooduleid selliseks, nagu oleksid need eraldi. Võib-olla peame siin tegema mõned kompromissid.