Seit der WordPress-Version 3.0 und dem Standard-Theme TwentyTen hat sich einiges geändert, um den Kommentarbereich eines Themes individuell anpassen zu können. Daher habe ich eine hilfreiche Zusammenfassung von Tipps, WordPress-Funktionen und CSS-Klassen erstellt, mit denen du den Kommentarbereich deines Themes in Zukunft wieder ganz leicht umgestalten kannst.

1. Zur Übersicht

Da der Code für den Kommentarbereich über mehrere Theme-Dateien verteilt ist, findest du hier eine erste Übersicht, wo du den Code deiner Kommentare anpassen kannst.

1.1. single.php

Der Kommentar-Bereich wird mit der WordPress Funktion comments_template in deiner single.php aufrufen.

[php]
<?php comments_template( ”, true ); ?>
[/php]

Die Referenz zur comments_template Funktion findest du auch im WordPress-Codex.

1.2. comments.php

Mehr Code für die Bearbeitung des Kommentarbereichs befindet sich in der single.php Datei auch garnicht, weiter geht es in in der Template-Datei comments.php. Hier findest du den Code für deine Kommentare mit der CSS-ID #comments. Hier kannst du z.B. die Überschrift des Kommentar-Bereichs ändern (h3#comments-title).

[php]
<h3 id="comments-title"><?php
printf( _n( ‘One Response to %2$s’, ‘%1$s Responses to %2$s’, get_comments_number(), ‘twentyten’ ),
number_format_i18n( get_comments_number() ), ‘<em>’ . get_the_title() . ‘</em>’ );
?></h3>
[/php]

Auch die Seiten-Navigation für Kommentare kannst du hier anpassen, falls die Anzahl der Kommentare die eingetragene Zahl im Admin-Bereich unter Einstellungen/Diskusstion/Weitere Kommentareinstellungen einmal überschreiten sollte. Die Seiten-Navigation erscheint sowohl über, als auch unter dem Kommentar-Bereich. Du kannst den Code also ruhig auch einmal löschen, und dich für eine einmalige Anzeige entscheiden.

[php]
<?php if ( get_comment_pages_count() > 1 && get_option( ‘page_comments’ ) ) : // Are there comments to navigate through? ?>
<div class="navigation">
<div class="nav-previous"><?php previous_comments_link( __( ‘<span class="meta-nav">&larr;</span> Older Comments’, ‘twentyten’ ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( ‘Newer Comments <span class="meta-nav">&rarr;</span>’, ‘twentyten’ ) ); ?></div>
</div> <!– .navigation –>
<?php endif; // check for comment navigation ?>
[/php]

Darunter startet mit der ordered List ol.commentlist die Auflistung der Kommentare. Mit Hilfe der WordPress-Funktion wp_list_comments werden innerhalb der Liste die Kommentare deines Artikels aufgerufen (Refernz zu wp_list_comments im WordPress-Codex).

[php]
<?php
/* Loop through and list the comments. Tell wp_list_comments()
* to use twentyten_comment() to format the comments.
* If you want to overload this in a child theme then you can
* define twentyten_comment() and that will be used instead.
* See twentyten_comment() in twentyten/functions.php for more.
*/
wp_list_comments( array( ‘callback’ => ‘twentyten_comment’ ) );
?>
[/php]

Wie in der Code-Dokumentation (grün-markierter Text) beschrieben, kannst du für dein eigenes Theme auch die twentyten_comment Funktion durch deine eigene Funktion in deiner functions.php Datei ersetzten. Oder du bearbeitest die twentyten_comment Datei in der functions.php Datei direkt.

1.3. Kommentarbereich in der functions.php

Um die Darstellung der Kommentare anzupassen, suchst du in der functions.php Datei den Bereich “Template for comments and pingbacks” (ca. in der Zeile 290). Jetzt kannst du entweder den Code in der Funktion twentyten_comment anpassen, oder eine Funktion mit deinem eigenen Namen (z.B. meintheme_comment) erstellen, indem du den Code kopierst und entsprechend deinen Wünschen änderst.

Im Listenbereich li kannst du z.B. festlegen, ob du Gravatare in deinen Kommentaren nutzen möchtest, und die Größe für diese festlegen.

[php]
<?php echo get_avatar( $comment, 40 ); ?>
[/php]

In diesem Fall sind die Gravatarbilder also 40×40 Pixel. Die Anzeige der Gravatare und der Name des Kommentar-Autors wird im TwentyTen-Theme in einem Div mit der CSS-Klasse vcard zusammengefasst.

[php]
<div class="comment-author vcard">
<?php echo get_avatar( $comment, 40 ); ?>
<?php printf( __( ‘%s <span class="says">says:</span>’, ‘twentyten’ ), sprintf( ‘<cite class="fn">%s</cite>’, get_comment_author_link() ) ); ?>
</div><!– .comment-author .vcard –>
[/php]

Der Hinweis auf Kommentar-Moderation ist darunter in ein em-tag gesetzt, und wird durch eine if-Kondition aufgerufen. Die if-Kondition besagt: “Wenn ein Kommentar noch nicht genehmigt ist, zeige den Moderations-Text an”.

[php]
<?php if ( $comment->comment_approved == ‘0’ ) : ?>
<em><?php _e( ‘Your comment is awaiting moderation.’, ‘twentyten’ ); ?></em>
<br />
<?php endif; ?>
[/php]

Darunter befindet sich ein Div mit der der CSS-Klasse comment-meta, indem das Datum, die Uhrzeit und ein Link zum Bearbeiten des Kommentars im Admin-Bereich ausgegeben wird:

[php]
<div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
<?php
/* translators: 1: date, 2: time */
printf( __( ‘%1$s at %2$s’, ‘twentyten’ ), get_comment_date(), get_comment_time() ); ?></a><?php edit_comment_link( __( ‘(Edit)’, ‘twentyten’ ), ‘ ‘ );
?>
</div><!– .comment-meta .commentmetadata –>
[/php]

Mit der CSS-Klasse comment-body folgt jetzt der Kommentar-Text:

[php]
<div class="comment-body"><?php comment_text(); ?></div>
[/php]

Als letztes Element im Kommentar folgt jetzt noch der Antworten-Link in einem Div mit der Klasse reply.

[php]
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( ‘depth’ => $depth, ‘max_depth’ => $args[‘max_depth’] ) ) ); ?>
</div><!– .reply –>
[/php]

Wenn du den Kommentarbereich der functions.php auf diese Weise in Einzelelemente unterteilst, kannst du den Code leichter Schritt für Schritt an dein Theme-Layout anpassen, und eventuell die Anordnung der Code-Schnipsel verschieben oder eine neue CSS-Klasse hinzufügen.

2. CSS-Tipps zum Styling des Kommentarbereichs

Um deine Kommentare mit CSS stylen zu können, werden von WordPress verschiedene CSS-Klassen und IDs verwendet. Mit diesen Styles bekommst du die verschachtelten Kommentare oder die spezielle Markierung von Autoren-Kommentaren leicht in den Griff.

2.1. Verschachtelte Kommentare (threaded comments)

Verschachtelte Kommentare haben sich inzwischen als Standard auf WordPress-Blogs durchgesetzt. Damit du mit Hilfe von CSS die verschachtelten Kommentare in deinem Theme stylen kannst, habe ich die wichtigsten CSS-Klassen (diese werden von WordPress automatisch eingefügt) hier aufgelistet.

Kommentare ohne Verschachtelung (also in der ersten Ebene) werden in der ordered List der Kommentare als Listenelement mit der Klasse .depth-1 ausgegeben:

[php]
#comment ol.commentlist li.depth-1
[/php]

Eine Antwort auf ein Kommentar dieser ersten Ebene ist dann ein Listenelement mit der Klasse .depth-2. Eine Antwort auf dieses Kommentar bekommt dann wiederum die Klasse .depth-3 usw.

Als CSS-Styling kannst du die Kommentare ab der zweiten Ebene .depth-2 z.B. um einige Pixel nach links einrücken (margin: 0px 0px 0px 30px) und ihnen eine gestrichelte Border (dashed), anstelle einer durchgehenden (solid) geben.

2.2. Kommentare des Artikel-Autors

Alle Kommentare des Artikel-Autors bekommen automatisch die CSS-Klasse .bypostauthor zugewiesen. Alle anderen Kommentare haben dagegen die CSS-Klasse .byuser.

Mit Hilfe dieser CSS-Klasse kannst du die Kommentare des Artikel-Autors also leicht markieren. Hier auf dem Elmastudio-Blog haben wir z.B. einen kleinen, orangen Stern als Background-Image der Autoren-Kommentare eingefügt.

2.3. Der Antworten-Link

Dem Antworten-Link eines Kommentars ist automatisch die CSS-Klasse a.comment-reply-link zugewiesen. Auf diese Weise kannst du den Antworten-Link also ebenfalls schnell individuell stylen.

Eine ausführliche Liste alle von WordPress verwendeten CSS-Klassen und IDs findest du übrigens auch in einer praktischen Übersicht bei CSS-Tricks.

3. Die Funktion comment_form nutzen, um das Kommentar-Formular aufzurufen

Als letzter Schritt fehlt jetzt noch die Möglichkeit das Kommentar-Formular anzupassen. Hier hat sich seit WordPress 3.0 einiges getan. Bisher war das Formular immer direkt in der comments.php Datei eines Themes integriert. Inzwischen kannst du das Kommentar-Formular in deinem Theme mit der WordPress Funktion comment_form aufrufen. In der comments.php Datei des TwentyTen-Themes findest du also nur noch den Code:

[php]
<?php comment_form(); ?>
[/php]

Diese neue Funktion hat den Vorteil, dass die Template-Datei comments.php jetzt sehr viel übersichtlicher ist.

Doch wie kannst du jetzt dein Kommentar-Formular anpassen?

Der komplette Formular-Code befindet sich in der wp-includes/comment-template.php Datei. Diese Datei gehört zum WordPress Core und du solltest sie auf keinen Fall bearbeiten. Stattdessen kannst du der Funktion comment_form direkt im Theme Argumente hinzufügen, um Texte anzupassen oder Elemente zu modifizieren.

Möchtest du also beispielsweise die Angabe über die erlaubten HTML-Tags (unterhalb des Kommentar-Textfeldes) nicht anzeigen, erweiterst du die Funktion comment_form um:

[php]
<?php comment_form(array(‘comment_notes_after’=>”)); ?>
[/php]

Wenn du außerdem noch den Text des Kommentar-verschicken Buttons ändern möchtest, erweiterst du deinen Code um:

[php]
<?php comment_form(array(‘comment_notes_after’ => ”, ‘label_submit’ => ‘Kommentar senden’ )); ?>
[/php]

Auf diese Weise kannst du eine ganze Reihe Anpassungen für dein Kommentar-Formular vornehmen.

Eine Auflistung aller möglichen Parameter (also comment_notes_after, comment_notes_before etc.) findest du im WordPress-Codex.

Um die Formularfelder Name, Email und URL anzupassen, kannst du deiner functions.php einen eigenen Filter hinzufügen.

[php]
// Customize Comment Form
function my_fields($fields) {
$fields[‘author’] = ‘<p class="comment-form-author">’ . ‘<label for="author">’ . __( ‘Name*’ ) . ‘</label> ‘ . ( $req ? ‘<span class="required">*</span>’ : ” ) .
‘<br/><input id="author" name="author" type="text" value="’ . esc_attr( $commenter[‘comment_author’] ) . ‘" size="30"’ . $aria_req . ‘ /></p>’;

$fields[’email’] = ‘<p class="comment-form-email"><label for="email">’ . __( ‘Email*’ ) . ‘</label> ‘ . ( $req ? ‘<span class="required">*</span>’ : ” ) .
‘<br/><input id="email" name="email" type="text" value="’ . esc_attr( $commenter[‘comment_author_email’] ) . ‘" size="30"’ . $aria_req . ‘ /></p>’;

$fields[‘url’] = ‘<p class="comment-form-url"><label for="url">’ . __( ‘Website’ ) . ‘</label>’ .
‘<br/><input id="url" name="url" type="text" value="’ . esc_attr( $commenter[‘comment_author_url’] ) . ‘" size="30" /></p>’;

return $fields;
}
add_filter(‘comment_form_default_fields’,’my_fields’);
[/php]

Den Code innerhalb der p-tags kannst du jetzt an dein Theme-Layout anpassen. So kannst du Texte der Formular-Felder ändern oder auch einen span-tag für CSS-Anpassung einfügen.

Weitere ausführliche Infos zur comments_form Funktion kannst du außerdem noch im Artikel »WordPress 3.0 Theme Tip: The Comment Form« bei Otto on WordPress oder im WordPress-Codex nachlesen.

Ich hoffe dir können die Tipps und Code-Schnipsel zum Kommentarbereich seit WordPress 3.0 bei der Umgestaltung deines eigenen Themes weiterhelfen. Kennst du noch weitere Tipps und Anregungen, die bei der Anpassung der Kommentare und des Kommentar-Formulars nützlich sind? Über dein Feedback und deine weiteren Tipps freue ich mich sehr!