Дизајн коментара може изгледати врло једноставно. И то је! Али мислим да је једноставно ефикасно у овом случају. Коментари су тако важан део ЦСС-трикова. Желим да буду врло читљиви и удобни.
Сада ћемо ускочити у ВордПресс и претворити ову нит коментара у стварност. Прво што радимо је да пронађемо образац у којем ћемо приказивати коментаре. single.phpје вероватно најважнији (појединачни блогови). У том предлошку налазимо да је функција comments_template()све што треба да позовемо да бисмо добили цело подручје коментара. У основи оно што та функција ради је да узме датотеку comments.phpи убаци је тамо. Дакле, почињемо да гледамо на то.
Код у тој датотеци започиње са . То је крајње прикладно. Коментари су сигурно део и он треба да има идентификатор. Имајте на уму да не радимо никакав стил на основу ИД-а, али умотавање коментара у елемент са ИД-ом коментара је добро јер:
- Увек можете хеширати везу до коментара додавањем # коментара УРЛ-у.
- Људи који мрзе коментаре могу их сакрити у свом корисничком листу стилова са погодљивим ИД-ом.
Непрестано пролазимо кроз код у овој датотеци. Избришемо неке ствари за које смо прилично сигурни да их нећемо користити. Неке ствари мењамо тако да одговарају ономе што смо дизајнирали у Пхотосхопу.
Затим наилазимо на функцију wp_list_comments()која је функција одговорна за испљување читаве нити коментара. Затим наставља да испљува ствари попут форме за коментар. Све то време постоји логика да се ствари приказују у различитим ситуацијама, на пример када су коментари затворени или када су коментари отворени, али их нема.
Налазимо малу чудну функцију која се зове и cancel_comment_reply_link()коју гледамо и видимо да рукује функционалношћу за премештање обрасца за коментар назад на дно у случају да се кликне на везу Одговори и образац се помери горе, али нисмо желели то да.
Затим копамо у ХТМЛ-у из којег долазимо wp_list_comments(). Не радећи ништа, добићемо ХТМЛ од ове функције који је сасвим разуман. Али такође је то што јесте и неће одговарати сваком могућем дизајну. Лично више волим да имам потпуну контролу над ознакама. Дакле, уместо да само узмемо оно што нам даје, ми преузимамо контролу над њим користећи прилагођену функцију у нашој functions.phpдатотеци која замењује подразумевано означавање.
Сад кад имамо ХТМЛ контролу, можемо да уђемо у некако „режим дизајна“ где прелазимо напред-назад између ЦСС-а и ХТМЛ-а завршавајући наш дизајн. Коментариши ЦСС, као и било који други мали модуларни бит ЦСС-а у овом пројекту, преусмерићемо се у датотеку _цомментс.сцсс коју можемо укључити у глобалну. Савршен случај када раздвајање ЦСС-а у сопствену датотеку има смисла. Иако би требало да користимо што више глобалних стилова. На пример, сваки коментар је сигурно .module, стилови заглавља овде би требало да буду сасвим у реду за имена, а типографија би уопште требало да потиче из глобалних стилова типографије.
Чак користимо и свој мрежни систем унутар коментара, јер је сваки коментар у основи мрежа од две колоне. Друге ситнице су потпуно прилагођене коментарима, попут места и начина на који постављамо везе за одговор.
На крају екранизације откривамо да наш Пхотосхоп дизајн има једну фаталну ману. Угњежђени коментари живе у родитељском коментару и прилично је тешко учинити да наши угнежђени модули изгледају као да су одвојени. Овде ћемо можда морати направити неке компромисе.