Komentarų dizainas gali atrodyti labai paprastas. Ir tai yra! Bet manau, kad šiuo atveju veiksminga paprasta. Komentarai yra tokia svarbi CSS-Tricks dalis. Noriu, kad jie būtų labai lengvai skaitomi ir patogūs.
Dabar pereisime prie „WordPress“ ir paversime šią komentarų giją realybe. Pirmas dalykas, kurį mes darome, yra rasti šabloną, kuriame bus rodomi komentarai. single.phpyra bene svarbiausias (individualūs tinklaraščio įrašai). Tame šablone randame, kad funkcija comments_template()yra viskas, ko mums reikia iškviesti, kad gautume visą komentarų sritį. Iš esmės tai, ką daro ši funkcija, yra gauti failą comments.phpir jį įdėti. Taigi, mes pradedame į tai žiūrėti.
Kodas tame faile prasideda . Tai labai tikslinga. Komentarai, be abejo, yra skiltis ir turi turėti identifikatorių. Atminkite, kad mes nedarome stiliaus pagal ID, tačiau gerai, kad jūsų komentarai yra suvynioti į elementą su komentarų ID, nes:
- Visada galite susieti su komentarais prie URL pridėdami #komentarus prie URL.
- Žmonės, nekenčiantys komentarų, gali juos paslėpti savo vartotojo stilių su atspėjamu ID.
Mes nuolat tikriname kodą šiame faile. Ištriname kai kuriuos dalykus, kurių esame tikri, kad nenaudosime. Keletą dalykų keičiame, kad jie atitiktų tai, ką sukūrėme „Photoshop“.
Tada mes susidūrėme su funkcija, wp_list_comments()kuri yra atsakinga už visos komentaro gijos išpjautymą. Tada jis išspjauna tokius dalykus kaip komentaro forma. Visą laiką yra logika rodyti dalykus skirtingose situacijose, pavyzdžiui, kai komentarai uždaromi arba kai komentarai yra atviri, bet jų nėra.
Mes randame šiek tiek keistą funkciją, vadinamą, cancel_comment_reply_link()kurią mes žiūrime ir matome, kuri valdo komentaro formos perkėlimo atgal į apačią funkcionalumą, jei spustelėjama nuoroda Atsakyti ir forma juda aukštyn, bet mes nenorėjome tai.
Tada įsigiliname į HTML, iš kurio gauname wp_list_comments(). Nieko nedarydami gausime HTML iš šios visiškai pagrįstos funkcijos. Bet jis yra toks, koks yra ir netiks kiekvienam įmanomam dizainui. Aš asmeniškai norėčiau visiškai kontroliuoti žymėjimą. Taigi užuot tik paėmę tai, ką mums duoda, mes kontroliuojame tai naudodami pasirinktinę functions.phpfailo funkciją, kuri nepaiso numatytojo žymėjimo.
Dabar, kai turime HTML valdymą, galime pereiti į kažkokį „dizaino režimą“, kur mes sukame pirmyn ir atgal tarp CSS ir HTML, kurdami savo dizainą. Komentuodami CSS, kaip ir bet kurį kitą nedidelį modulinį CSS bitą šiame projekte, mes perkelsime į failą _comments.scss, kurį galėsime įtraukti į globalųjį. Puikus atvejis, kai prasminga atskirti CSS į savo failą. Nors turėtume naudoti kuo daugiau globalių stilių. Pvz., Kiekvienas komentaras tikrai yra a .module, antraštės stiliai čia turėtų būti visiškai tinkami vardams, o tipografija apskritai turėtų kilti iš pasaulinių tipografijos stilių.
Mes net naudojame savo tinklelio sistemą komentaruose, nes kiekvienas komentaras iš esmės yra dviejų stulpelių tinklelis. Kitos smulkmenos yra visiškai pritaikytos komentarams, pavyzdžiui, kur ir kaip išdėstome atsakymo nuorodas.
Ekrano pabaigoje išsiaiškiname, kad mūsų „Photoshop“ dizainas turi vieną lemtingą trūkumą. Įterpti komentarai yra tėvų komentare, todėl sunku įdėtus modulius padaryti taip, lyg jie būtų atskiri. Čia gali tekti daryti kompromisus.