Návrh komentářů může vypadat velmi jednoduše. A to je! Ale myslím si, že v tomto případě je efektivní jednoduché. Komentáře jsou tak důležitou součástí CSS-triků. Chci, aby byly velmi čitelné a pohodlné.
Nyní přejdeme na WordPress a provedeme toto vlákno komentářů realitou. První věc, kterou uděláme, je najít šablonu, ve které budeme zobrazovat komentáře. single.phpje pravděpodobně nejdůležitější (jednotlivé příspěvky na blogu). V této šabloně zjistíme, že funkce comments_template()je vše, co musíme volat, abychom získali celou oblast komentářů. To, co tato funkce v podstatě dělá, je získat soubor comments.phpa vložit jej tam. Začneme se tedy na to dívat.
Kód v tomto souboru začíná na . To je velmi vhodné. Komentáře jsou určitě sekcí a měla by mít identifikátor. Nezapomeňte, že neděláme žádné styly založené na ID, ale mít své komentáře zabalené v prvku s ID komentářů je dobré, protože:
- Přidáním #comments k adrese URL můžete vždy přidat hash-link dolů do komentářů.
- Lidé, kteří nenávidí komentáře, je mohou skrýt ve své šabloně uživatelských stylů s uhodnutelným ID.
Pokračujeme v procházení kódu v tomto souboru. Odstraňujeme některé věci, o kterých jsme si docela jisti, že je nebudeme používat. Některé věci měníme, aby odpovídaly tomu, co jsme navrhli ve Photoshopu.
Poté narazíme na funkci, wp_list_comments()která je funkcí odpovědnou za vyplivnutí celého vlákna komentáře. Pak to vyplivne věci jako formulář pro komentář. Po celou dobu existuje logika, která zobrazuje věci v různých situacích, například když jsou komentáře uzavřeny nebo když jsou komentáře otevřené, ale žádné neexistují.
Našli jsme trochu divnou funkci nazvanou, na cancel_comment_reply_link()kterou se podíváme a vidíme, že zpracovává funkce pro přesunutí formuláře komentáře zpět dolů na spodní část v případě, že byl kliknut odkaz na odpověď a formulář se posunul nahoru, ale nechtěli jsme to.
Pak se ponoříme do HTML, ze kterého pocházíme wp_list_comments(). Aniž bychom něco dělali, získáme z této funkce HTML, které je naprosto rozumné. Ale také to je to, čím je, a nebude se hodit ke každému možnému designu. Osobně dávám přednost úplné kontrole nad značkami. Takže místo toho, abychom převzali to, co nám dává, převezmeme nad tím kontrolu pomocí vlastní funkce v našem functions.phpsouboru, která přepíše výchozí označení.
Nyní, když máme kontrolu nad HTML, se můžeme dostat do nějakého „návrhového režimu“, kde se při provádění našeho designu odrážíme tam a zpět mezi CSS a HTML. Komentáře CSS, stejně jako jakýkoli jiný malý modulární kousek CSS v tomto projektu, odsuneme do souboru _comments.scss, který můžeme zahrnout do globálního. Perfektní případ, kdy má rozdělení CSS do vlastního souboru smysl. I když bychom měli používat tolik globálních stylů, kolik můžeme. Například každý komentář je určitě .module, styly záhlaví by zde měly být naprosto v pořádku, pokud jde o názvy, a typografie obecně by měla pocházet pouze z globálních stylů typografie.
V komentářích dokonce používáme náš mřížkový systém, protože každý komentář je v podstatě mřížka se dvěma sloupci. Další maličkosti jsou zcela zvykem v komentářích, například kde a jak umístíme odkazy na odpovědi.
Na konci vysílání jsme zjistili, že náš design Photoshopu má jednu zásadní chybu. Vnořené komentáře žijí v nadřazeném komentáři a je docela obtížné, aby naše vnořené moduly vypadaly, jako by byly oddělené. Možná zde budeme muset udělat nějaké kompromisy.