WordPress: Kommentar-Bereich anpassen und gestalten!

Den WordPress Kommentarbereich individuell gestaltenBlogs leben von Kommentaren und ein schöner Kommentar-Bereich lädt zum Diskutieren, Debattieren und Mitreden ein.

Leider sieht das Kommentarformular unter WordPress und den meisten Themes, die irgendwo runtergeladen werden können, eher mau und langweilig aus.

In den letzten Tagen habe ich den Kommentar-Bereich auf diesem Blog komplett überarbeitet und meinen eigenen Vorstellungen angepasst.

Nun wirkt er aufgeräumt und strukturiert. Dabei bin ich in die Tiefen der WordPress-Templates vorgestoßen und möchte in diesem Artikel erklären, wie der eigene Kommentar-Bereich in WordPress angepasst werden kann.

Das ist manchmal gar nicht so einfach, da der Kommentarbereich in WordPress über drei verschiedene Dateien, von denen eine auf den ersten Blick nicht zu finden ist, gesteuert wird.

Also, werfen wir einen Blick auf den Code, die CSS und schauen, was wir aus unserem Kommentar-Bereich herausholen können.

Den WordPress Kommentar-Bereich anpassen

Den WordPress-Blog nach den eigenen Vorstellungen gestaltenSpätestens, wenn der eigene Blog vernünftig läuft, das Theme nach den eigenen Vorstellungen gestaltet und ein paar Artikel veröffentlicht wurden, trudeln die ersten Kommentare auf dem eigenen Blog ein.

Anfangs siegt dabei natürlich die Freude darüber, dass nun endlich irgendwer auf die eigene Schreibe aufmerksam geworden ist. Doch schnell folgt das Problem: Der Kommentar-Bereich in WordPress soll angepasst werden und irgendwie findet man nirgends die richtigen Codeschnipsel, um das Kontaktformular unter den eigenen Beiträgen individuell zu gestalten.

Meinen eigenen Kommentarbereich habe ich in wenigen Schritten anpassen können.Dafür einfach das Vorher-Nachher-Bild auf der rechten Seiten anschauen. Natürlich hat WordPress noch mehr unter der Template-Haube, aber mir reicht’s so.

Die Befehle, die dafür notwendig sind, sind in Standard-Themes häufig gar nicht auf den ersten Blick zu finden, da es Klassen sind, die wir via CSS ansprechen müssen, ob wohl wir gar nicht wissen, dass es sie überhaupt gibt. Der Kommentar-Bereich in WordPress lässt sich jedoch recht einfach aufspüren und in drei verschiedenen Dateien individuell gestalten.

Werfen wir also einen Blick auf das Naheliegende, was wir in unserem Dashboard ohne Umwege ansteuern können. Die single.php.

Den WordPress Kommentar-Bereich anpassen: single.php

Der erste und einfachste Schritt, die Kommentare zu bearbeiten, führt uns in die single.php. Diese finden wir in der Regel über den Editor. Hier lässt sich jedoch lediglich bestimmen, an welcher Position der Kommentarbereich auftauchen soll oder ob wir die Kommentar-Funktion unter WordPress ganz ausschalten wollen.

So sieht das Ganze im Editor selbst aus:

?php comments_template();

Durch das Anpassen dieses Codeschnipsels lässt sich ferner individuell bestimmen, wo der Kommentarbereich auftaucht oder eben nicht erscheint. Wenn also dieser Code ausgeklammert wird oder temporär entfernt wird, tauchen keineerlei Kommenatre mehr in den eigenen Artikeln auf.

Wer aber lediglich die Kommentarfunktion in WordPress deaktivieren will, kann dies auch einfach über ‚Einstellungen-Diskussion‘ den Haken bei ‚Erlaube Besuchern neue Artikel zu kommentieren‘ entfernen. Das funktioniert jedoch nur für kommende Beiträge und muss rückwirkend für jeden Beitrag individuell angepasst werden.

Über den WordPress-Editor fällt uns aber noch eine andere Datei ins Auge, die schon einen vielversprechenden Namen trägt und wohl eine der ersten Anlaufstellen ist, wenn der eigene WordPress-Kommentar-Bereich überarbeitet werden soll. Die comments.php.

Den WordPress Kommentar-Bereich anpassen: comments.php

Anfangs wird wohl jeder im Editor auf die comments.php gestoßen sein. Diese bietet uns zwar noch keine gestalterischen Möglichkeiten, aber doch ein wenig Spielraum, um den eigenen Kommentar-Bereich unter WordPress anzupassen.

Hier sammeln sich alle Optionen für Kommentare, die über die CSS-ID #comments zu verwalten sind. In diesem Bereich lassen sich die Überschriften des Kommentar-Bereichs unter WordPress steuern, aber ebenso ein paar kleinere Anpassungen vornehmen.

php comments_number(‚Kein Kommentar‘, ‚Ein Kommentar‘, ‚% Kommentare‘ );

Dieser Schnipsel in der comments.php steuert die Überschrift des unteren Kommentar-Bereichs. Dabei gibt es die Option, dass ‚Kein Kommentar‘, ‚Ein Kommentar‘ oder ‚X-Kommentare‘ vorhanden sind. Hierfür lassen sich also individuelle Schriftzüge wählen. Natürlich finden wir diesen Eintrag normalerweise in englischer Sprache.

In der comments.php können wir außerdem einsehen, dass mit dem Befehl ol.commentlist, die Kommentarfunktion aufgerufen und listenartig unter unseren Beiträgen dargestellt wird.

Den WordPress Kommentar-Bereich anpassen: comment-template.php

Richtig spannend wird es jedoch, wenn wir einen Blick auf die comment-template.php selbst werfen. Diese finden wir in unserem WordPress-Ordner (wordpress/wp-includes/comment-template.php). Bevor wir in dieser jedoch Werte verändern, ist es sinnvoll, eine Sicherungskopie der Datei anzulegen.

Hier finden wir fast alle Möglichkeiten, um unseren Kommentar-Bereich individuell zu gestalten und auch die entsprechenden CSS-Klassen, die es uns ermöglichen, ein wenig Farbe, eine sinnvolle Größe oder eine individuelle Gestaltung anzupassen.

Dafür blicken wir doch vorerst auf die wichtigsten Klassen, die wir via CSS ansprechen können und welche Auswirkungen sie auf den WordPress Kommentar-Bereich haben und danach auf die Struktur der Datei selbst.

Der Unterschied liegt einfach darin, dass wir via CSS die Anordnung in unserem WordPress-Kommentar-Bereich einfach so lassen und uns lediglich um die Darstellung kümmern, wenn wir in das Template selbst eingreifen, können wir natürlich auch die Anordnung bestimmen und ganze Bereiche einfach ausblenden respektive löschen.

  • Den Kommentar-Bereich generell anpassen

Hierfür können wir via CSS .commentlist (gesamter Kommentar-Bereich) oder .commentlist li (Alle Antworten im Kommentar-Bereich) ansprechen. Diese beiden haben Auswirkungen auf das Design des gesamten Kommentar-Bereichs, ändern wir hier eventuell Schriftgröße, Farbe oder Hintergrund, wirkt sich das unmittelbar auf die gelisteten Kommentare unter unseren Beiträgen aus.

  • Antworten des Autors im Kommentar-Bereich hervorheben

Den Autor eines Beitrags im Kommentar-Bereich hervorhebenIch habe es gern, wenn meine Besucher wissen, dass ich selbst einen Kommentar unter einem Beitrag verfasst habe. Dafür können wir abermals auf eine CSS-Klasse zurückgreifen, die es uns ermöglicht, farblich den Autor eines Beitrags oder den Admin des gesamten Blogs im WordPress Kommentar-Bereich hervorzuheben. Dafür sprechen wir abermals via CSS das Element

.commentlist li.bypostauthor (Autor des Beitrags) oder

.commentlist li.comment-author-admin (Admin des Blogs) an.

Hier können wir also bestimmte Regeln festlegen, wie die Beiträge aussehen sollen, wenn wir selbst einen Beitrag schreiben. Im Gegnsatz dazu gibt es die Klasse .commentlist li.byuser, die folglich alle Kommentare anspricht, die von einem normalen Besucher hinterlassen wurden.

  • Den Namen im WordPress Kommentar-Bereich verändern

Jeder, der in unserem Kommentar-Bereich einen Beitrag hinterlässt, gibt seinen Namen oder irgendein Pseudonym ein, dieses ist manchmal mit einer URL unterlegt, die zur Seite des Schreibenden führt oder eben nicht.

Deshalb reicht es uns nicht aus, einfach den Namen anzusprechen, sondern wir müssen beide Eventualitäten berücksichtigen. Mit

.commentlist li.comment div.vcard cite.fn

können wir via CSS den Namen des Kommentators ansprechen, hierbei gelten aber nur Namen, die nicht auf eine andere Seite verlinken.

Erweitern wir das ganze also um ein a (steht im Allgemeinen für Verlinkungen), wählen wir also dieses Kürzel und decken mit diesem ab, dass auch Links in unsere Anpassungen aufgenommen werden:

.commentlist li.comment div.vcard cite.fn a

So können wir beide Möglichkeiten in der Darstellung des Nutzer-Kürzels in unserem WordPress Kommentar-Bereich anpassen. Voilá!

  • Das Datum im WordPress Kommentar-Bereich ansprechen

Das Datum kann natürlich auch verändert werden und es muss nicht auf den Standardsatz zurückgegriffen werden. Hierfür können wir via CSS

.commentlist li.comment div.comment-meta a

nutzen und das Datum nach unseren Vorstellungen gestalten. Natürlich ließe sich dieses auch über diesen Weg gänzlich abschalten, indem wir in die Klammern und via CSS mit dem Befehl

display:none;

unserem Kommentar-Bereich verbieten, das Datum auszugeben.

Den WordPress Kommentar-Bereich anpassen: Übersicht über alle Klassen für CSS

Natürlich gibt es, wie versprochen, noch viele, viele Klassen, die via CSS im eigenen WordPress-Kommentar-Bereich angesprochen werden können. Auf jede davon bin ich in keinem Fall eingegangen. Das wäre unnötig, da ich denke, dass mit diesem Einstieg jeder die Möglichkeit hat, ein wenig im eigenen Blog zu experimentieren. Hierbei wünsche ich viel Glück und möchte nun noch auf alle Befehle verweisen, die theoretisch möglich sind und was alles mit CSS zu realisieren ist im eigenen Kommentar-Bereich.

Hier also eine Auflistung aller möglichen Klassen, entwendet vom Blog von Chris Harrison

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} – (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} – (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Den WordPress Kommentar-Bereich anpassen: comment-template.php

Wie oben angekündigt, werfen wir nun noch einen vorsichtigen und kleinen Blick in die comment-template.php selbst. Ich werde jedoch nur auf kleinere Änderungen eingehen, da alles andere den Rahmen dieses Beitrags schlicht und ergreifend sprengen würde.

Alles, was ich bisher zeigte, kann problemlos einfach ausprobiert werden, bei Eingriffen in die Comment-Template selbst, sollten wir aber Vorsicht walten lassen. An dieser Stelle möchte ich nochmals darauf verweisen, dass es sinnvoll ist, ein Backup, also eine Sicherung der .php-Datei vorzunehmen, um am Ende nicht das ganze Design zerschossen zu haben.

  • Den WordPress Kommentar-Bereich anpassen: Besucher ‚meint‘ ausblenden oder umstellen

Im normalen WordPress Kommentarbereich steht hinter jedem Nutzer ein ‚sagt‘ oder ‚says‘, das muss nicht sein. Einerseits haben wir zwar via CSS die Möglichkeit, das ganze auszublenden.

Einfach die Klasse .commentlist li.comment div.vcard span.says {} einbinden und mit einem display:none versehen, aber wir haben natürlich auch die Möglichkeit, den kleinen Text zu verändern. Dafür suchen wir in der comment-template von WordPress nach ebendieser Klasse, also ‚says‘, ungefähr in Zeile 1350.

Hier können wir nun das ‚sagt‘ durch eine individuelle Botschaft im Kommentarbereich anpassen oder einfach löschen.

  • Den WordPress Kommentar-Bereich anpassen: Der Kommentar erwartet Moderation

Wenn auf eurem Blog ein Kommentar im Kommentarbereich noch nicht freigeschaltet ist, erhält der Besucher oder Kommentator den Hinweis, dass sein Beitrag im Blog auf Moderation wartet.

Zwischen zwei <em>-Tags werden wir in der Template fündig und können einen eigenen Text einstellen oder eben auch diesen Hinweis eliminieren.

class=“comment-awaiting-moderation“

Diesen Beitrag ändern

‚Your comment is awaiting moderation.‘
  • Den WordPress Kommentar-Bereich anpassen: Datum und Link anordnen

Oben haben wir gesehen, dass wir mit der richtigen Klasse die Meta-Daten eines Kommentars individuell in WordPress anpassen können. Im Template selbst finden wir natürlich auch die entsprechenden Einträge und können hier Anordnung oder generelle Dinge festlegen. Natürlich ist es auch hier möglich, eine Funktion gänzlich zu entfernen. Ob das Sinn macht, ist natürlich jedem selbst überlassen.

Unter diesem Klassendefinition werden wir fündig und können schrittweise alle nach unseren Vorstellungen anpassen.

class=“comment-meta commentmetadata“
  • Den WordPress Kommentar-Bereich anpassen: Gravatare ändern

WordPress selbst bietet uns schon die Möglichkeit, dass wir Bilder neben unseren Kommentaren einblenden oder ausblenden wollen. Dafür schauen wir einfach unter Einstellungen – Diskussion und scrollen nach unten. In der comments-template.php finden wir jedoch auch hier ein paar Möglichkeiten für unser individuelles Design.

Wir suchen folgenden Eintrag:

get_avatar( $comment, $args[‚avatar_size‘] )

Unter avatar_size können wir eintragen, in welcher Größe die Gravatare in unserem WordPress Kommentar-Bereich ausgegeben werden sollen. Einfach eine Zahl eintragen.
Würden wir beispielsweise 50 wählen, würden die Nutzeravatare im Kommentarbereich mit 50×50 Pixeln ausgegeben werden

Den WordPress Kommentar-Bereich anpassen: Abschluss

Zum Abschluss bleibt mir eigentlich nur zu sagen, dass natürlich jede Frage bezüglich des Kommentar-Bereichs unter WordPress willkommen ist und ich hoffe, dass alsbald jeder Blog seinen Kommentarbereich ganz individuell und nach den eigenen Vorstellungen angepasst hat.

Die Möglichkeiten zur Gestaltung sind relativ groß und ich habe in diesem Artikel nur das Grundlegende vorgestellt. Wer aber einmal den Dreh raus hat, kann natürlich mit den Werten in der CSS oder den Einstellungen in der Template spielen und so jede Menge aus dem eigenen WordPress Kommentar-Bereich rausholen.

5 Meinungen

  1. Randolf10-20-2011

    Ich würde unter keinen Umständen die „comment-template.php“ umschreiben/anpassen.

    Core-Datei = Finger wech!

    Wäre sicherlich beim nächsten Update eh wieder überschrieben… 😉

    Grüße…

  2. Jonas G.10-20-2011

    Jops, ich denke ähnlich. Deshalb schreibe ich ja auch, dass eine Sicherungsdatei sinnvoll wäre und gebe lediglich Hinweise, wie man einfache Dinge lösen kann. Die meisten Dinge lassen sich ja auch via CSS realisieren und deckt, denke ich, viele Anforderungen an einen Kommentar-Bereich schon ab.
    Natürlich könnte man auch eine eigene Funktion erstellen, was ja letzten Endes die gleichen Änderungen ermöglichen würde, ohne in die Core-Datei selbst einzugreifen.

    Deshalb danke für den Hinweis, ich werde mir dazu mal ein paar Gedanken machen und den Artikel diesbezüglich erweitern.

    Grüße
    Jonas

  3. chubin10-27-2011

    Hallo,
    ist es möglich die “ Comments “ im WordPress statt von links nach rechts von rechts nach links zu schreiben ( für arabische Schrift !)
    danke

  4. Alexander Trust06-25-2012

    Ich glaube, was Randolf meinte war, dass die Comments-Datei im Core gar nicht manipuliert werden muss. Du kannst in jedem „Theme“-Ordner eigenen Comments-Dateien anlegen und die individuell gestalten. Hab mir gedacht, ich klär das mal auf, selbst wenn ich schon ein wenig spät dran bin, aber grad über Google über den Artikel gestolpert.