La conception des commentaires peut sembler très simple. Et c'est! Mais je pense que simple est efficace dans ce cas. Les commentaires sont une partie si importante de CSS-Tricks que je veux qu'ils soient très lisibles et confortables.
Nous allons maintenant sauter dans WordPress et faire de ce fil de commentaires une réalité. La première chose que nous faisons est de trouver un modèle dans lequel nous afficherons des commentaires. single.phpest probablement le plus important (articles de blog individuels). Nous trouvons dans ce modèle que la fonction comments_template()est tout ce que nous devons appeler pour obtenir toute la zone de commentaires. Essentiellement, ce que fait cette fonction est d'aller chercher le fichier comments.phpet de le placer là-dedans. Alors, nous commençons à regarder cela.
Le code de ce fichier commence par . C'est tout à fait approprié. Les commentaires sont certainement une section et il devrait avoir un identifiant. N'oubliez pas que nous ne faisons aucun style basé sur les identifiants, mais avoir vos commentaires enveloppés dans un élément avec un identifiant de commentaires est une bonne chose car:
- Vous pouvez toujours créer un lien de hachage vers les commentaires en ajoutant #comments à l'URL.
- Les personnes qui détestent les commentaires peuvent les masquer dans leur feuille de style utilisateur avec un identifiant devinable.
Nous continuons à parcourir le code de ce fichier. Nous supprimons certains éléments que nous sommes sûrs de ne pas utiliser. Nous modifions certaines choses pour qu'elles correspondent à ce que nous avons conçu dans Photoshop.
Nous tombons alors sur la fonction wp_list_comments()qui est la fonction responsable de cracher tout le fil de commentaires. Ensuite, il crache les choses comme le formulaire de commentaire. Pendant tout ce temps, il y a une logique en place pour montrer les choses dans différentes situations, comme lorsque les commentaires sont fermés ou lorsque les commentaires sont ouverts mais il n'y en a pas.
Nous trouvons une petite fonction étrange appelée cancel_comment_reply_link()que nous regardons et voyons qui gère la fonctionnalité pour déplacer le formulaire de commentaire vers le bas dans le cas où un lien de réponse a été cliqué et le formulaire a été déplacé vers le haut, mais nous ne voulions pas il à.
Ensuite, nous creusons le HTML dont nous tirons wp_list_comments(). Sans rien faire, nous obtiendrons du HTML de cette fonction qui est parfaitement raisonnable. Mais aussi, c'est ce que c'est et ne conviendra pas à tous les designs possibles. Personnellement, je préfère avoir un contrôle total sur le balisage. Donc, au lieu de simplement prendre ce qu'il nous donne, nous en prenons le contrôle en utilisant une fonction personnalisée dans notre functions.phpfichier qui remplace le balisage par défaut.
Maintenant que nous avons le contrôle HTML, nous pouvons entrer dans un "mode de conception" où nous rebondissons entre CSS et HTML pour faire notre conception. Commentaires CSS, comme tout autre petit morceau modulaire de CSS dans ce projet, nous allons reléguer à un fichier _comments.scss que nous pouvons inclure dans le global. Cas parfait où séparer CSS dans son propre fichier a du sens. Cependant, nous devrions utiliser autant de styles globaux que possible. Par exemple, chaque commentaire est certainement un .module, les styles d'en-tête devraient être parfaitement adaptés ici pour les noms, et la typographie en général devrait simplement provenir des styles de typographie globaux.
Nous utilisons même notre système de grille dans les commentaires puisque chaque commentaire est essentiellement une grille à deux colonnes. D'autres petites choses sont totalement personnalisées pour les commentaires, comme où et comment nous positionnons les liens de réponse.
À la fin du screencast, nous découvrons que notre conception de Photoshop a un défaut fatal. Les commentaires imbriqués vivent dans un commentaire parent et il est assez difficile de donner l'impression que nos modules imbriqués sont séparés. Nous devrons peut-être faire des compromis ici.