# 111: Navoj komentarja - CSS-triki

Anonim

Oblika komentarjev je lahko videti zelo preprosta. In je! Mislim pa, da je preprosto v tem primeru učinkovito. Komentarji so tako pomemben del CSS-trikov. Želim, da so zelo berljivi in ​​udobni.

Zdaj bomo skočili v WordPress in to nit komentarjev uresničili. Najprej najdemo predlogo, v kateri bomo prikazali komentarje. single.phpje verjetno najpomembnejši (posamezne objave v spletnem dnevniku). V tej predlogi ugotovimo, da je funkcija comments_template()vse, kar moramo poklicati, da dobimo celotno področje komentarjev. V bistvu tisto, kar naredi ta funkcija, je, da comments.phppokličete datoteko in jo strpate tja. Torej, to začnemo gledati.

Koda v tej datoteki se začne z . To je zelo primerno. Pripombe so zagotovo del in bi moral imeti identifikator. Ne pozabite, da ne delamo nobenega stylinga na podlagi ID-jev, vendar je vaše komentarje ovite v element z ID-jem komentarjev dobro, ker:

  1. Vedno lahko razpršite povezave do komentarjev, tako da URL-ju dodate #comments.
  2. Ljudje, ki sovražijo komentarje, jih lahko skrijejo v svojem uporabniškem slogu z ugibljivim ID-jem.

V tej datoteki nadaljujemo s kodo. Izbrišemo nekaj stvari, za katere smo prepričani, da jih ne bomo uporabili. Nekatere stvari spremenimo tako, da se ujemajo s tistim, kar smo oblikovali v Photoshopu.

Nato naletimo na funkcijo, wp_list_comments()ki je odgovorna za izpljuvanje celotne niti komentarjev. Nato pa izpljune stvari, kot je obrazec za komentar. Ves čas obstaja logika, ki prikazuje stvari v različnih situacijah, na primer, ko so komentarji zaprti ali ko so komentarji odprti, vendar jih ni.

Najdemo malo čudno funkcijo, cancel_comment_reply_link()ki jo pogledamo in vidimo, da obravnava funkcionalnost za premik obrazca za komentar nazaj na dno, če je bila kliknjena povezava Reply in obrazec premaknjen navzgor, vendar nismo želeli to do.

Nato se poglobimo v HTML, ki ga dobimo wp_list_comments(). Ne da bi karkoli storili, bomo s to funkcijo dobili povsem razumen HTML. Je pa tudi to, kar je, in ne ustreza vsakemu možnemu dizajnu. Osebno imam raje popoln nadzor nad označevanjem. Torej, namesto da bi prevzeli samo tisto, kar nam daje, prevzamemo nadzor nad njim z uporabo funkcije po meri v naši functions.phpdatoteki, ki preglasi privzeto oznako.

Zdaj, ko imamo nadzor nad HTML, lahko pridemo v nekakšen "način oblikovanja", kjer se med oblikovanjem CSS in HTML premetavamo naprej in nazaj. Komentira CSS, tako kot kateri koli drugi modularni bit CSS v tem projektu, se bomo preselili v datoteko _comments.scss, ki jo lahko vključimo v globalno. Popoln primer, ko je ločevanje CSS-ja v lastno datoteko smiselno. Vendar bi morali uporabljati čim več globalnih stilov. Na primer, vsak komentar je zagotovo a .module, slogi glav bi morali biti tukaj popolnoma v redu za imena, tipografija pa bi na splošno morala izhajati iz svetovnih slogov tipografije.

Naš sistem mrež uporabljamo celo znotraj komentarjev, saj je vsak komentar v bistvu dvostopenjska mreža. Druge malenkosti so povsem prilagojene komentarjem, na primer kje in kako postavimo povezave za odgovor.

Na koncu predvajanja zaslona ugotovimo, da ima naša zasnova Photoshopa eno usodno napako. Vgnezdeni komentarji živijo v nadrejenem komentarju in precej težko je, da naši ugnezdeni moduli izgledajo, kot da so ločeni. Tu bomo morda morali narediti nekaj kompromisov.