Das Standard Kommentar-Formular von WordPress ist beim Erstellen eines Themes schnell implementiert, etwas komplizierter wird es, wenn hier verschachtelte Kommentare – also mit der Möglichkeit direkt auf andere Kommentare zu antworten – zum Einsatz kommen sollen. Dafür ist es nötig einen strikt vorgegebenen Aufbau des Formulars einzuhalten sowie gegebenenfalls die Ausgabe der Kommentare in der functions.php des Themes neu aufzubauen. Der gesamte Vorgang kann im hier nachgelesen werden, an dieser Stelle soll sich lediglich eine Copy+Paste Vorlage für ein entsprechendes Formular, umgesetzt für das CSS-Framework Bootstrap, finden.
Um das Script für verschachtelte Kommentare aufzurufen, muss zuerst die Zeile
<?php wp_head(); ?>
in der Theme-header.php geändert werden in
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?>
Das Formular selbst geht in die comments.php und sieht so aus:
<?php
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?>
<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
<?php
return;
}
?>
<?php if ('open' == $post-> comment_status) : ?>
<div id="respond" class="fade-in">
<p><?php comment_form_title( 'Kommentar schreiben', 'Antwort an %s' ); ?></p>
<p id="cancel-comment-reply" class=""><?php cancel_comment_reply_link() ?></p>
<form class="form-inline" role="form" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform" >
<div>
<?php if ( is_user_logged_in() ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Ausloggen">Ausloggen »</a></p>
<?php else : ?>
<div class="col-md-4 form-group">
<label for="InputName">Name <span>*</span></label>
<div class="input-group">
<input type="input" class="form-control" name="author" id="author" placeholder="Ihr Name" required value="<?php echo $comment_author; ?>" >
</div>
</div>
<div class="col-md-4 form-group">
<label for="InputEmail">E-Mail <span>* <small>(wird nicht angezeigt)</small></span></label>
<div class="input-group">
<input type="email" class="form-control" name="email" id="email" placeholder="E-Mail Adresse" required value="<?php echo $comment_author_email; ?>" >
</div>
</div>
<div class="col-md-4 form-group">
<label for="InputWebsite">Website</label>
<div class="input-group">
<input type="input" class="form-control" name="url" id="url" placeholder="http://www.ihre-seite.de" value="<?php echo $comment_author_url; ?>" >
</div>
</div>
<?php endif; ?>
<div class="col-xs-12 form-group">
<label for="InputMessage">Kommentar</label>
<div id="comment-text" class="input-group">
<textarea name="comment" id="comment" class="form-control" rows="5" required></textarea>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Kommentar abschicken" class="btn btn-primary btn-lg">
</div>
<?php comment_id_fields(); ?>
<?php do_action('comment_form', $post->ID); ?>
</form>
</div>
<div id="comments-list-wrap">
<p>Kommentare</p>
<?php if ($comments) : ?>
<ul>
<?php wp_list_comments('type=comment&callback=getup_comments'); ?>
</ul>
<?php else : ?>
<p>Verfassen Sie den ersten Kommentar!</p>
<?php endif; ?>
</div>
<?php endif; ?>
Jetzt muss in der functions.php noch die individualisierte Ausgabe der Kommentare angelegt werden:
// custom callback for comments
function getup_comments($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li id="comment-<?php comment_ID() ?>">
<?php comment_text() ?>
<?php if ($comment->comment_approved == '0') : ?>
<p><strong>Achtung: Der Kommentar muss noch freigegeben werden.</strong></p>
<?php endif; ?>
<p><i class="fa fa-comment"></i><span class="comments-author"><?php comment_author_link() ?></span> am <span class="comments-date"><?php comment_date('d. F Y') ?></span> <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?></p>
<?php
}
Das Ganze kann noch beliebig via CSS gestylet werden, wobei ich hier ein Beispiel zeigen möchte: Beim Klick auf „Antworten“ wird das Formular jetzt unter dem Kommentar, auf den eingegangen werden soll, neu platziert. Um das etwas softer aussehen zu lassen, habe ich hier eine Einblend-Animation zugewiesen:
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#comments-list-wrap .fade-in { opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; animation-duration:0.5s;}