Das Design für Kommentare könnte sehr einfach aussehen. Und es ist! Aber ich denke einfach ist in diesem Fall effektiv. Kommentare sind ein so wichtiger Bestandteil von CSS-Tricks, dass ich möchte, dass sie sehr lesbar und komfortabel sind.
Jetzt springen wir in WordPress und lassen diesen Kommentarthread Wirklichkeit werden. Als erstes finden wir eine Vorlage, in der Kommentare angezeigt werden. single.phpist wahrscheinlich das wichtigste (einzelne Blog-Beiträge). In dieser Vorlage finden wir, dass die Funktion comments_template()alles ist, was wir aufrufen müssen, um den gesamten Kommentarbereich abzurufen. Im Wesentlichen comments.phpholt diese Funktion die Datei und legt sie dort ab. Also fangen wir an, uns das anzuschauen.
Der Code in dieser Datei beginnt mit . Das ist sehr angemessen. Die Kommentare sind sicherlich ein Abschnitt und sollten eine Kennung haben. Denken Sie daran, dass wir kein Styling basierend auf IDs durchführen. Es ist jedoch gut, wenn Ihre Kommentare in ein Element mit einer ID von Kommentaren eingeschlossen werden, weil:
- Sie können jederzeit einen Hash-Link zu Kommentaren erstellen, indem Sie #comments an die URL anhängen.
- Personen, die Kommentare hassen, können sie mit einer erratenen ID in ihrem Benutzer-Stylesheet ausblenden.
Wir gehen den Code in dieser Datei weiter durch. Wir löschen einige Dinge, von denen wir ziemlich sicher sind, dass wir sie nicht verwenden werden. Wir ändern einige Dinge, um sie an das anzupassen, was wir in Photoshop entworfen haben.
Wir stoßen dann auf die Funktion, wp_list_comments()die für das Ausspucken des gesamten Kommentarthreads verantwortlich ist. Dann spuckt es das Zeug wie das Kommentarformular aus. Währenddessen gibt es eine Logik, um Dinge in verschiedenen Situationen anzuzeigen, z. B. wenn Kommentare geschlossen sind oder wenn Kommentare geöffnet sind, aber keine vorhanden sind.
Wir finden eine etwas seltsame Funktion namens, cancel_comment_reply_link()die wir uns ansehen und sehen, die die Funktionalität zum Verschieben des Kommentarformulars nach unten für den Fall übernimmt, dass auf einen Antwortlink geklickt wurde und das Formular nach oben verschoben wurde, aber wir wollten nicht es zu.
Dann graben wir uns in den HTML-Code ein, aus dem wir stammen wp_list_comments(). Ohne etwas zu tun, erhalten wir HTML von dieser Funktion, die durchaus vernünftig ist. Aber es ist auch das, was es ist und passt nicht zu jedem möglichen Design. Persönlich bevorzuge ich die vollständige Kontrolle über das Markup. Anstatt nur das zu übernehmen, was es uns gibt, übernehmen wir die Kontrolle darüber, indem wir eine benutzerdefinierte Funktion in unserer functions.phpDatei verwenden, die das Standard-Markup überschreibt.
Jetzt, da wir über HTML-Kontrolle verfügen, können wir in den „Design-Modus“ wechseln, in dem wir zwischen CSS und HTML hin und her springen, um unser Design fertigzustellen. Kommentare CSS wird, wie jedes andere kleine modulare Bit von CSS in diesem Projekt, in eine _comments.scss-Datei verwiesen, die wir in die globale Datei aufnehmen können. Perfekter Fall, in dem es sinnvoll ist, CSS in eine eigene Datei zu unterteilen. Wir sollten jedoch so viele globale Stile wie möglich verwenden. Zum Beispiel ist jeder Kommentar sicherlich ein .module, die Kopfzeilenstile sollten hier für Namen vollkommen in Ordnung sein, und Typografie im Allgemeinen sollte nur aus den globalen Typografiestilen stammen.
Wir verwenden sogar unser Rastersystem innerhalb der Kommentare, da jeder Kommentar im Wesentlichen ein zweispaltiges Raster ist. Andere kleine Dinge sind ganz auf Kommentare zugeschnitten, z. B. wo und wie wir die Antwortlinks positionieren.
Am Ende des Screencasts stellen wir fest, dass unser Photoshop-Design einen schwerwiegenden Fehler aufweist. Verschachtelte Kommentare befinden sich in einem übergeordneten Kommentar, und es ist ziemlich schwierig, unsere verschachtelten Module so aussehen zu lassen, als wären sie getrennt. Möglicherweise müssen wir hier einige Kompromisse eingehen.