#111: Kommentar-Thread erstellen

Das Design für die Kommentare mag sehr einfach aussehen. Und das ist es auch! Aber ich denke, einfach ist in diesem Fall effektiv. Kommentare sind ein so wichtiger Teil von CSS-Tricks, dass ich möchte, dass sie sehr gut lesbar und komfortabel sind.

Nun springen wir in WordPress und machen diesen Kommentar-Thread zu einer Realität. Als erstes suchen wir eine Vorlage, in der wir Kommentare anzeigen werden. `single.php` ist wahrscheinlich die wichtigste (individuelle Blog-Posts). Wir finden in dieser Vorlage, dass die Funktion `comments_template()` alles ist, was wir aufrufen müssen, um den gesamten Kommentarbereich zu erhalten. Im Wesentlichen holt diese Funktion die Datei `comments.php` und fügt sie dort ein. Also schauen wir uns das an.

Der Code in dieser Datei beginnt mit `<section id="comments">`. Das ist sehr passend. Die Kommentare sind sicherlich ein Abschnitt und sollten eine Kennung haben. Denken Sie daran, dass wir keine Stilregeln basierend auf IDs anwenden, aber es ist gut, Ihre Kommentare in einem Element mit der ID "comments" zu verpacken, weil

1. Sie immer zu den Kommentaren verlinken können, indem Sie #comments an die URL anhängen.
2. Leute, die Kommentare hassen, können sie in ihrer Benutzer-Stylesheet mit einer erratenen ID ausblenden.

Wir gehen weiter durch den Code in dieser Datei. 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.

Dann stoßen wir auf die Funktion `wp_list_comments()`, die für die Ausgabe des gesamten Kommentar-Threads verantwortlich ist. Dann gibt sie auch Dinge wie das Kommentarformular aus. Währenddessen gibt es 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 feststellen, dass sie die Funktionalität für das Verschieben des Kommentarformulars zurück nach unten übernimmt, falls auf einen Antwort-Link geklickt wurde und das Formular nach oben verschoben wurde, wir aber nicht wollten, dass es das tut.

Dann tauchen wir in das HTML ein, das wir von `wp_list_comments()` erhalten. Ohne etwas zu tun, erhalten wir von dieser Funktion ein perfekt vernünftiges HTML. Aber es ist auch, was es ist, und passt nicht zu jedem möglichen Design. Persönlich bevorzuge ich die vollständige Kontrolle über das Markup. Anstatt einfach das zu nehmen, was es uns gibt, übernehmen wir die Kontrolle, indem wir eine benutzerdefinierte Funktion in unserer `functions.php`-Datei verwenden, die das Standard-Markup überschreibt.

Da wir jetzt HTML-Kontrolle haben, können wir uns in den "Designmodus" begeben, wo wir zwischen CSS und HTML hin- und herspringen, um unser Design fertigzustellen. Kommentar-CSS, wie jeder andere kleine modulare CSS-Teil in diesem Projekt, werden wir in eine `_comments.scss`-Datei auslagern, die wir in die globale Datei aufnehmen können. Ein perfektes Beispiel, wo die Trennung von CSS in eine eigene Datei sinnvoll ist. Wir sollten jedoch so viele globale Stile wie möglich verwenden. Zum Beispiel ist jeder Kommentar sicherlich ein `.module`, die Header-Stile sollten hier für Namen perfekt sein, und die Typografie im Allgemeinen sollte einfach von den globalen Typografie-Stilen stammen.

Wir verwenden sogar unser Grid-System innerhalb der Kommentare, da jeder Kommentar im Wesentlichen ein Zwei-Spalten-Grid ist. Andere Kleinigkeiten sind völlig spezifisch für Kommentare, wie z. B. wo und wie wir die Antwort-Links positionieren.

Am Ende des Screencasts stellen wir fest, dass unser Photoshop-Design einen fatalen Fehler hat. Verschachtelte Kommentare leben innerhalb eines übergeordneten Kommentars und es ist ziemlich schwierig, unsere verschachtelten Module so aussehen zu lassen, als wären sie separat. Hier müssen wir vielleicht einige Kompromisse eingehen.