Дизайнът на коментари може да изглежда много прост. И това е! Но мисля, че простото е ефективно в този случай. Коментарите са толкова важна част от CSS-трикове. Искам да бъдат много четливи и удобни.
Сега ще преминем към WordPress и ще превърнем тази нишка за коментари в реалност. Първото нещо, което правим, е да намерим шаблон, в който ще показваме коментари. single.phpе може би най-важното (отделни публикации в блога). В този шаблон откриваме, че функцията comments_template()е всичко, което трябва да извикаме, за да получим цялата област за коментари. По същество това, което прави тази функция, е да вземете файла comments.phpи да го поставите там. И така, започваме да разглеждаме това.
Кодът в този файл започва с . Това е изключително подходящо. Коментарите със сигурност са раздел и той трябва да има идентификатор. Не забравяйте, че не правим никакъв стил на базата на идентификатори, но вашите коментари, обвити в елемент с идентификатор на коментари, е добре, защото:
- Винаги можете да хеш-връзка до коментари, като добавите #comments към URL адреса.
- Хората, които мразят коментарите, могат да ги скрият в потребителската си таблица със стилове с познат идентификатор.
Продължаваме да преглеждаме кода в този файл. Изтриваме някои неща, които сме почти сигурни, че няма да използваме. Променяме някои неща, за да съответстват на това, което сме проектирали във Photoshop.
След това се натъкваме на функцията, wp_list_comments()която е функцията, отговорна за изплюването на цялата нишка на коментарите. След това продължава да изплюва нещата като формата за коментар. През цялото време има логика да се показват нещата в различни ситуации, например когато коментарите са затворени или когато коментарите са отворени, но няма такива.
Намираме малко странна функция, наречена, cancel_comment_reply_link()която разглеждаме и виждаме, че обработва функционалността за преместване на формуляра за коментар обратно надолу в случай, че е щракната връзка към отговор и формулярът се е преместил нагоре, но ние не искахме то да.
След това ровим в HTML, от който получаваме wp_list_comments(). Без да правим нищо, ще получим HTML от тази функция, което е напълно разумно. Но също така е това, което е и няма да се побере във всеки възможен дизайн. Лично аз предпочитам да имам пълен контрол над маркирането. Така че вместо просто да вземем това, което ни дава, ние поемаме контрола върху него, като използваме персонализирана функция в нашия functions.phpфайл, която заменя маркирането по подразбиране.
Сега, след като разполагаме с HTML контрол, можем да влезем в някакъв „режим на проектиране“, където прескачаме напред-назад между CSS и HTML, за да направим дизайна си. Коментира CSS, както всеки друг малък модулен бит CSS в този проект, ние ще преминем към файл _comments.scss, който можем да включим в глобалния. Перфектен случай, когато разделянето на CSS в собствен файл има смисъл. Въпреки това трябва да използваме колкото се може повече глобални стилове. Например, всеки коментар със сигурност е a .module, стиловете на заглавките трябва да са напълно фини тук за имена, а типографията като цяло трябва просто да идва от глобалните типографски стилове.
Ние дори използваме нашата мрежа мрежа в коментарите, тъй като всеки коментар е по същество мрежа от две колони. Други малки неща са изцяло персонализирани за коментари, като например къде и как позиционираме връзките за отговор.
В края на скринкаста установяваме, че нашият дизайн на Photoshop има един фатален недостатък. Вложените коментари живеят в родителски коментар и е доста трудно да накараме нашите вложени модули да изглеждат така, сякаш са отделни. Може да се наложи да направим някои компромиси тук.