Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

WordPress bietet die Möglichkeit Kommentare in verschiedenen Ebenen zu verschachteln. Ist die Funktion aktiviert, können User auf Kommentare antworten. Die Antwort wird eingerückt unter dem ursprünglichen Kommentar abgebildet.
Verschachtelte Kommentare sind sehr übersichtlich und erleichtern die Diskussion der Besucher untereinander. Es macht also durchaus Sinn die Funktion in den eigenen Blog zu integrieren.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Was muss getan werden?

Zunächst wird über den Header die Funktion global aktiviert. Anschließend wird die comments.php bearbeitet: Das Template für Kommentare wird in die functions.php ausgelagert und dort entsprechend angepasst. Nun muss in den WordPress-Einstellungen die Verschachtelungstiefe der Kommentare eingestellt werden. Im letzten Schritt müssen die Kommentare mit CSS gestaltet werden.

Bitte beachtet, dass es auch andere Lösungswege für verschachtelte Kommentare gibt. Wer keine Lust hat das Theme anzupassen, kann auch ein Plugin verwenden.

1. header.php anpassen

Öffnet die header.php eures Themes und fügt anstelle von <?php wp_head(); ?> folgenden Code ein.


<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); wp_head(); // wp_head ersetzen oder Snippet anpassen! ?>

2. comments.php anpassen

Öffnet nun die comments.php des Themes und sucht nach der Liste (<ol>) der Kommentare. Ersetzt die gesamte Liste durch folgenden Code. Das Kommentar-Template wird von WordPress nun in der functions.php gesucht.


<ol id="commentList">
 <?php wp_list_comments('type=comment&callback=kb_comment_template'); ?> // Dieses Template wird später in der functions.php definiert
</ol> 

3. functions.php anpassen

Nun muss das Template für die Darstellung von Kommentaren definiert werden. Kopiert folgenden Code in die functions.php des Themes und nehmt ggf. Änderungen vor.


/* template for comments */
function kb_comment_template($comment, $args, $depth) {
 $GLOBALS['comment'] = $comment; ?>
 <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
 <div id="comment-<?php comment_ID(); ?>">
 <div class="comment-author vcard">
 <?php echo get_avatar( $comment->comment_author_email, 48 ); ?>

 <?php printf(__('<cite class="fn">%s</cite>schrieb:'), get_comment_author_link()) ?>
 </div>
 <?php if ($comment->comment_approved == '0') : ?>
 <?php _e('Dein Kommentar muss erst moderiert werden.') ?>
 <br />
 <?php endif; ?>

 <div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></a><?php edit_comment_link(__('(Kommentar bearbeiten)'),' ','') ?></div>

 <?php comment_text() ?>

 <div class="reply">
 <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
 </div>
 </div>
<?php
}

4. WordPress-Einstellungen überprüfen

Wechselt nun ins WordPress-Dashboard und ruft dort den Bereich „Einstellungen → Diskussion“ auf. Hier findet ihr den Punkt „Verschachtelte Komentare in X Ebenen organisieren“. Wählt die Tiefe der Verschachtelung aus und bestätigt die Einstellungen.

WordPress-Einstellungen für verschachtelte Kommentare
WordPress-Einstellungen für verschachtelte Kommentare

5. style.css anpassen

Das war auch schon alles. Ab sofort unterstützt euer Theme verschachtelte Kommentare. Ihr müsst nur noch das CSS-Dokument entsprechend anpassen. Eine Liste aller theoretisch möglichen CSS-Klassen findet ihr hier. Ich habe Sie wiederum hier gefunden.


#commentList {}
#commentList li {}
#commentList li.alt {}
#commentList li.bypostauthor {}
#commentList li.byuser {}
#commentList .comment-author-admin {}
#commentList .comment {}
#commentList .comment div.comment-author {}
#commentList .comment div.vcard {}
#commentList .comment div.vcard cite.fn {}
#commentList .comment div.vcard cite.fn a.url {}
#commentList .comment div.vcard img.avatar {}
#commentList .comment div.vcard img.avatar-32 {}
#commentList .comment div.vcard img.photo {}
#commentList .comment div.commentmetadata {}
#commentList .comment div.comment-meta {}
#commentList .comment div.comment-meta a {}
#commentList .comment * {}
#commentList .comment div.reply {}
#commentList .comment div.reply a {}
#commentList .comment ul.children {}
#commentList .comment ul.children li {}
#commentList .comment ul.children li.alt {}
#commentList .comment ul.children li.bypostauthor {}
#commentList .comment ul.children li.byuser {}
#commentList .comment ul.children .comment {}
#commentList .comment ul.children .comment-author-admin {}
#commentList .comment ul.children li.depth-2 {}
#commentList .comment ul.children li.depth-3 {}
#commentList .comment ul.children li.depth-4 {}
#commentList .comment ul.children li.depth-5 {}
#commentList .comment ul.children li.odd {}
#commentList li.even {}
#commentList li.odd {}
#commentList li.parent {}
#commentList li.pingback {}
#commentList li.pingback div.comment-author {}
#commentList li.pingback div.vcard {}
#commentList li.pingback div.vcard cite.fn {}
#commentList li.pingback div.vcard cite.fn a.url {}
#commentList li.pingback div.commentmetadata {}
#commentList li.pingback div.comment-meta {}
#commentList li.pingback div.comment-meta a {}
#commentList li.pingback * {}
#commentList li.pingback div.reply {}
#commentList li.pingback div.reply a {}
#commentList li.pingback ul.children {}
#commentList li.pingback ul.children li {}
#commentList li.pingback ul.children li.alt {}
#commentList li.pingback ul.children li.bypostauthor {}
#commentList li.pingback ul.children li.byuser {}
#commentList li.pingback ul.children .comment {}
#commentList li.pingback ul.children .comment-author-admin {}
#commentList li.pingback ul.children li.depth-2 {}
#commentList li.pingback ul.children li.depth-3 {}
#commentList li.pingback ul.children li.depth-4 {}
#commentList li.pingback ul.children li.depth-5 {}
#commentList li.pingback ul.children li.odd {}
#commentList li.thread-alt {}
#commentList li.thread-even {}
#commentList li.thread-odd {} 

Links / Quellen:

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 8 Kommentare

  1. Sven Wachsmuth
    schrieb am 22.05.2017 um 19:49 Uhr:

    Hallo,
    eine schöne Anleitung hast Du da geschrieben. Ich versuche die gerade in meinem selbst gestrickten Template unterzubringen. Ich habe nun Deinen Code unter 3. mit meinem bereits vorhandenen verglichen, um herauszufinden, wie denn die Verschachtelung geht. Wenn ich mir Deine CSS-Klassen unter 5. ansehe, ist das ja quasi eine einzige Liste. Dabei ist mir aufgefallen, dass bei Deinem Code das schließende

  2. fehlt – ich hatte da ein schließendes . ;)

    Bei 5. hab ich noch eine Frage: Wann wird denn die Klasse „alt“ verwendet bzw. wofür ist die gut?

    LG aus Erfurt, Sven

  3. Antworten
  • Jonas Hellwig (Autor)
    schrieb am 22.05.2017 um 20:20 Uhr:

    Hallo Sven, das schließende

  • wird von WordPress automatisch eingefügt und muss nicht geschrieben werden. Die Klasse .alt stellt mich gerade ehrlich gesagt auch vor ein Rätsel. Die CSS-Klassen sind 1:1 aus dem WP-Codex übernommen.
  • Antworten
  • Sven Wachsmuth
    schrieb am 22.05.2017 um 23:07 Uhr:

    Was anderes: Wie kann ich die Kommentare so sortieren, dass Antworten unter den jeweiligen Posts sind und nicht chronologisch? D. h. Antworten dazwischen liegen…

    LG Sven

  • Christian Schnettelker
    schrieb am 07.02.2016 um 18:31 Uhr:

    Sehr hilfreich, habe den Code in mein eigenes WordPress-Template übernommen, es funktionierte alles auf Anhieb. Vielen Dank!

    Antworten
  • tux.
    schrieb am 09.10.2013 um 20:35 Uhr:

    Hmm,
    ich habe obige Änderungen mal vorgenommen (wurde Zeit). Der comment_reply-Link leitet auf ?replytocom=… irgendwas weiter, so weit sinnvoll. Aber dieser Link lädt die Seite neu. Geht das nicht irgendwie einfacher, zum Beispiel mit JavaScript?

    Zweites Problem: Über diesen Link abgesendete Kommentare tauchen trotzdem nicht als Antworten, sondern als normale Kommentare auf. Über die Android-App geschriebene Antworten werden aber zumindest richtig eingerückt, zum Beispiel hier:

    http://tuxproject.de/blog/2013/10/medienkritik-lxxxi-mein-lieber-scholli-jolie-und-taegliche-penis/#respond

    (Ich habe die Antworten-Funktion erst mal auskommentiert.)

    Ideen?

    Antworten
    • tux.
      schrieb am 13.04.2014 um 01:00 Uhr:

      (Ich habe den Fehler übrigens inzwischen gefunden: Das DIV muss auch die „richtige“ ID haben, #commentform oder so, #comment-stuff oder Ähnliches geht nicht. Pardon!)

      Antworten
  • Verschachtelte Kommentare (nested comments) in WordPress aktivieren | Web-CMS | Scoop.it
    schrieb am 06.11.2012 um 21:18 Uhr:

    […] WordPress bietet die Möglichkeit Kommentare in verschiedenen Ebenen zu verschachteln. Ist die Funktion aktiviert, können User auf Kommentare antworten. Die Antwort wird eingerückt unter dem ursprünglichen Kommentar abgebildet.  […]

    Antworten
  • eMeLPe
    schrieb am 19.10.2012 um 17:57 Uhr:

    Sehr schöne Zusammenfassung!

    Vielen Dank dafür.

    Antworten
  • Schreibe einen Kommentar zu Christian Schnettelker Antworten abbrechen

    Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

    WordPress-Projekte mit kulturbanause

    Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

    WordPress-Leistungsangebot →

    Schulungen von kulturbanause

    Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

    Übersicht Schulungsthemen →