Il design per i commenti potrebbe sembrare molto semplice. E questo è! Ma penso che semplice sia efficace in questo caso. I commenti sono una parte così importante dei CSS-Tricks che voglio che siano molto leggibili e comodi.
Ora passeremo a WordPress e renderemo questo thread di commenti una realtà. La prima cosa che facciamo è trovare un modello in cui verranno visualizzati i commenti. single.phpè probabilmente il più importante (singoli post del blog). Troviamo in quel modello che la funzione comments_template()è tutto ciò che dobbiamo chiamare per ottenere l'intera area dei commenti. Essenzialmente quello che fa quella funzione è andare a prendere il file comments.phpe inserirlo lì. Quindi, iniziamo a guardarlo.
Il codice in quel file inizia con . È molto appropriato. I commenti sono sicuramente una sezione e dovrebbero avere un identificatore. Ricorda che non eseguiamo stili basati sugli ID, ma avere i tuoi commenti racchiusi in un elemento con un ID di commenti è utile perché:
- Puoi sempre eseguire il collegamento hash ai commenti aggiungendo #comments all'URL.
- Le persone che odiano i commenti possono nasconderli nel loro foglio di stile utente con un ID intuibile.
Continuiamo a leggere il codice in questo file. Eliminiamo alcune cose che siamo abbastanza sicuri di non utilizzare. Modifichiamo alcune cose per adattarle a ciò che abbiamo progettato in Photoshop.
Quindi ci imbattiamo nella funzione wp_list_comments()che è la funzione responsabile dello sputo dell'intero thread di commenti. Quindi continua a sputare cose come il modulo di commento. Per tutto il tempo, esiste una logica per mostrare le cose in situazioni diverse, come quando i commenti sono chiusi o quando i commenti sono aperti ma non ce ne sono.
Troviamo una piccola funzione strana chiamata cancel_comment_reply_link()che guardiamo e vediamo che gestisce la funzionalità per spostare il modulo di commento indietro verso il basso nel caso in cui sia stato cliccato un collegamento di risposta e il modulo sia stato spostato in alto, ma non volevamo a.
Quindi approfondiamo l'HTML da cui ricaviamo wp_list_comments(). Senza fare nulla, otterremo HTML da questa funzione che è perfettamente ragionevole. Ma è anche quello che è e non si adatta a tutti i design possibili. Personalmente, preferisco avere il controllo completo sul markup. Quindi, invece di prendere solo ciò che ci dà, ne assumiamo il controllo utilizzando una funzione personalizzata nel nostro functions.phpfile che sovrascrive il markup predefinito.
Ora che abbiamo il controllo HTML, possiamo entrare in una sorta di "modalità di progettazione" in cui rimbalziamo avanti e indietro tra CSS e HTML per completare il nostro design. Commenti CSS, come qualsiasi altro piccolo frammento modulare di CSS in questo progetto, lo relegheremo in un file _comments.scss che possiamo includere nel file globale. Caso perfetto in cui ha senso separare i CSS nel proprio file. Tuttavia, dovremmo utilizzare il maggior numero possibile di stili globali. Ad esempio, ogni commento è certamente una .module, gli stili di intestazione dovrebbero andare perfettamente a posto qui per i nomi e la tipografia in generale dovrebbe provenire solo dagli stili di tipografia globali.
Usiamo anche il nostro sistema di griglia all'interno dei commenti poiché ogni commento è essenzialmente una griglia di due colonne. Altre piccole cose sono totalmente personalizzate per i commenti, come dove e come posizioniamo i link di risposta.
Alla fine dello screencast, scopriamo che il nostro design di Photoshop ha un difetto fatale. I commenti nidificati vivono all'interno di un commento principale ed è piuttosto difficile far sembrare i nostri moduli nidificati separati. Potremmo dover fare alcuni compromessi qui.