Návrh komentárov môže vyzerať veľmi jednoducho. A to je! Myslím si však, že v tomto prípade je jednoduché. Komentáre sú takou dôležitou súčasťou CSS-trikov. Chcem, aby boli veľmi čitateľné a pohodlné.
Teraz skočíme na WordPress a uskutočňujeme toto vlákno komentárov v realitu. Prvá vec, ktorú urobíme, je nájsť šablónu, v ktorej budeme zobrazovať komentáre. single.phpje pravdepodobne najdôležitejší (jednotlivé príspevky na blogu). V tejto šablóne nájdeme, že funkcia comments_template()je všetko, čo musíme zavolať, aby sme získali celú oblasť poznámok. To, čo táto funkcia v podstate robí, je získať súbor comments.phpa vložiť ho tam. Takže sa na to začneme pozerať.
Kód v tomto súbore začína . To je veľmi vhodné. Komentáre sú určite sekciou a mala by mať identifikátor. Pamätajte, že nerobíme žiadne úpravy na základe ID, ale mať svoje komentáre zabalené v prvku s ID komentárov je dobré, pretože:
- Pripojením # komentárov k adrese URL sa môžete kedykoľvek spojiť s hašovaním odkazov na komentáre.
- Ľudia, ktorí nenávidia komentáre, ich môžu skryť vo svojej šablóne štýlov používateľov s hádateľným ID.
Ďalej prechádzame kódom v tomto súbore. Vymazávame niektoré veci, o ktorých sme si dosť istí, že ich nebudeme používať. Niektoré veci meníme, aby zodpovedali tomu, čo sme navrhli vo Photoshope.
Potom narazíme na funkciu, wp_list_comments()ktorá je funkciou zodpovednou za vypľutie celého vlákna komentárov. Potom to vypľúva veci ako formulár na komentár. Stále existuje logika, ktorá umožňuje ukazovať veci v rôznych situáciách, napríklad keď sú komentáre uzavreté alebo keď sú otvorené, ale nijaké neexistujú.
Nájdeme trochu čudnú funkciu s názvom, na cancel_comment_reply_link()ktorú sa pozrieme a uvidíme, ktorá ovláda funkcie presunu formulára komentára späť dole na spodok v prípade, že došlo ku kliknutiu na odkaz Odpovedať a formulár sa posunul nahor, ale nechceli sme to na.
Potom sa prehĺbime do kódu HTML, z ktorého vychádzame wp_list_comments(). Bez toho, aby sme niečo robili, získame z tejto funkcie HTML, ktoré je úplne rozumné. Ale tiež je to, čo to je, a nezmestí sa do každého možného dizajnu. Osobne uprednostňujem úplnú kontrolu nad značkami. Takže namiesto toho, aby sme vzali to, čo nám dáva, preberáme nad ním kontrolu pomocou vlastnej funkcie v našom functions.phpsúbore, ktorá prepíše predvolené označenie.
Teraz, keď máme kontrolu nad HTML, sa môžeme dostať do tak trochu „návrhového režimu“, kde sa skákame tam a späť medzi CSS a HTML a dokončujeme náš dizajn. Komentáre CSS, ako každý iný malý modulárny kúsok CSS v tomto projekte, zostúpime do súboru _comments.scss, ktorý môžeme zahrnúť do globálu. Perfektný prípad, keď má rozdelenie CSS do vlastného súboru zmysel. Mali by sme však používať čo najviac globálnych štýlov. Napríklad každý komentár určite je .module, štýly hlavičiek by tu mali byť úplne v poriadku, pokiaľ ide o mená, a typografia všeobecne by mala vychádzať z globálnych štýlov typografie.
V rámci komentárov dokonca používame náš mriežkový systém, pretože každý komentár je v podstate dvojstĺpcový. Ostatné maličkosti sú úplne bežné v komentároch, napríklad kde a ako umiestnime odkazy na odpovede.
Na konci obrazovky sme zistili, že náš dizajn Photoshopu má jednu fatálnu chybu. Vnorené komentáre žijú v rámci nadradeného komentára a je dosť ťažké dosiahnuť, aby naše vnorené moduly vyzerali, akoby boli samostatné. Možno tu budeme musieť urobiť nejaké kompromisy.