A megjegyzések kialakítása nagyon egyszerű lehet. És ez! De szerintem ebben az esetben az egyszerű hatékony. A megjegyzések a CSS-trükkök olyan fontos részét képezik, szeretném, ha nagyon olvashatók és kényelmesek lennének.
Most be fogunk ugrani a WordPressbe, és valósággá tesszük ezt a megjegyzésszálat. Az első dolog, amit találunk, megtalálunk egy sablont, amelyben megjegyzéseket jelenítünk meg. single.phpvalószínűleg a legfontosabb (egyedi blogbejegyzések). Abban a sablonban találjuk meg, hogy csak a függvényt comments_template()kell meghívnunk, hogy megkapjuk a teljes megjegyzés területet. Lényegében az a funkció, hogy megy, szerezze be a fájlt, comments.phpés tegye be oda. Tehát elkezdjük ezt vizsgálni.
A fájl kódja ezzel kezdődik . Ez nagyon megfelelő. A megjegyzések minden bizonnyal szakaszok, és azonosítóval kell rendelkezniük. Ne feledje, hogy nem csinálunk semmilyen stílust az azonosítók alapján, de jó, ha a megjegyzéseket egy elembe csomagoljuk a megjegyzés azonosítójával, mert:
- A megjegyzésekhez mindig hash-linket tehet, ha # megjegyzést fűz az URL-hez.
- Azok a felhasználók, akik utálják a megjegyzéseket, elrejthetik őket felhasználói stíluslapjukba, kitalálható azonosítóval.
Folyamatosan áttekintjük a fájl kódját. Törölünk néhány olyan dolgot, amelyet biztosan biztosan nem fogunk használni. Néhány dolgot úgy módosítunk, hogy megfeleljen a Photoshopban tervezetteknek.
Ezután találkozunk azzal a funkcióval, wp_list_comments()amely a teljes megjegyzésszál kiköpéséért felelős funkció. Aztán tovább köpi a dolgokat, mint a megjegyzés űrlap. Mindeközben van egy logika a dolgok megjelenítésére különböző helyzetekben, például amikor a megjegyzések zárva vannak, vagy amikor a megjegyzések nyitottak, de nincsenek.
Találunk egy kicsit furcsa függvényt, cancel_comment_reply_link()amelyet megnézünk és látjuk, amely kezeli a megjegyzés űrlap visszalépésének funkcióját, ha egy Válasz linkre kattintottak és az űrlap feljebb került, de nem azt.
Ezután belemélyedünk a HTML-be, amelyből kapunk wp_list_comments(). Semmit nem téve, HTML-t kapunk ettől a funkciótól, amely teljesen ésszerű. De ez az is, ami van, és nem felel meg minden lehetséges kivitelnek. Személy szerint jobban szeretem, ha teljes mértékben kontrollálom a jelöléseket. Tehát ahelyett, hogy csak azt vennénk, amit ad nekünk, átvesszük az irányítást azáltal, hogy a fájlunkban egy olyan egyedi funkciót használunk, functions.phpamely felülírja az alapértelmezett jelölést.
Most, hogy rendelkezünk HTML vezérléssel, egyfajta „tervezési módba” léphetünk, ahol előre-hátra ugrálunk a CSS és a HTML között, amikor elkészül a tervezésünk. A CSS megjegyzései, csakúgy, mint a projekt bármely más kis moduláris bitje a CSS-ben, egy _comments.scss fájlba kerülünk, amelyet felvehetünk a globálisba. Tökéletes eset, amikor a CSS elválasztása saját fájlba van értelme. Bár annyi globális stílust kellene használnunk, amennyit csak tudunk. Például minden megjegyzés minden bizonnyal a .module, a fejlécstílusoknak itt teljesen rendben kell lenniük a neveknél, és a tipográfiának általában csak a globális tipográfiai stílusokból kell származnia.
Még a rácsrendszert is használjuk a megjegyzésekben, mivel minden megjegyzés lényegében két oszlopos rács. Más apróságok teljesen megszokottak a megjegyzéseknél, például hol és hogyan helyezzük el a válaszlinkeket.
A képernyőfelvétel végén kitaláljuk, hogy a Photoshop tervezésünknek egyetlen végzetes hibája van. A beágyazott megjegyzések a szülő megjegyzésén belül élnek, és nagyon nehéz úgy létrehozni a beágyazott modulokat, mintha külön lennének. Lehet, hogy itt kompromisszumokat kell kötnünk.