WordPress Custom comments.php Template

Viel zu oft hat man das Problem, dass die tutorials für die comments.php einfach viel zu unzureichend sind. Vor allem wenn man seine eigene Vorstellung davon hat, wie die Ausgabe und das Formular an sich dazu aussehen soll. Ich zum Beispiel hatte bei Tests das Problem, dass die Übermittlung bzw Ausgabe der Variablen oft einfach nicht gepasst hat.

Da die meisten ja schon die ganzen Tutorials angesehen haben gehe ich nur auf die Ausgabe der Kommentare sowie das Formular ein.

Die Ausgabe:

<h2 id="commentform" ><?php comments_number('Keine Kommentare', 'Ein Kommentar', '% Kommentare'); ?></h2>
 <br />
<?php if ( $comments ) : ?>
 
<ol class="commentlist">

<?php 
$args = array(
	'style'             => 'ul',
	'type'              => 'all',
	'callback' 		=> 'format_comment',
); 


wp_list_comments($args); ?>
</ol>
 <br />
<?php else : // Es wurden noch keine Kommentare abgegeben ?>
<p>Bis jetzt noch keine Kommentare</p>
<?php endif; ?>

<?php if ( comments_open() ) : ?>
<h3 id="respond"><?php comment_form_title( 'Einen Kommentar abgeben', 'Einen Kommentar abgeben zu %s' ); ?></h3>
 
<div class="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</div>

Damit rufen wir einen eigenen Callback wie es auch beim Theme Twentytwelve etc. der Fall ist auf. Der Code dazu liegt in der functions.php:

<?php
function format_comment($comment, $args, $depth) {
    
       $GLOBALS['comment'] = $comment; ?>
       
        <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
                
            <div class="comment-intro">
                <?php comment_type('Kommentar', 'Trackback', 'Pingback'); ?> von <?php comment_author_link(); ?> - <?php comment_date(); ?> um <?php comment_time(); ?> <?php edit_comment_link('Bearbeiten'); ?>
                
            </div>
            
            <?php if ($comment->comment_approved == '0') : ?>
                <em><strong><?php _e('Dein Kommentar muss noch freigeschalten werden.') ?></strong></em><br />
            <?php endif; ?>
            
            <?php comment_text(); ?>
            
            <div class="reply">
				<?php comment_reply_link(array_merge( $args, array('add_below' => 'comment', 'depth' => $depth, 'max_depth' => $args['max_depth']))); ?> 
            </div>
        
<?php }
?>

Ich gesetehe, der Code ist natürlich nicht von mir, aber auch kp mehr woher ich ihn habe. Einzig allein eine Information dazu: wp_list_comments Codex

Kommen wir nun zum Formular:
Es wäre ja zu einfach, einfach <?php wp_comment_form(); ?> zu benutzen.

Also erstellen wir unser eigenes Formular an der Stelle wo wir die wp_comment_form(); haben:

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" class="commentfield">

<p><textarea required="required" class="hasPlaceholder commentfield" name="comment" id="comment" cols="45" rows="5" tabindex="1" placeholder="Nachricht hinterlassen..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Nachricht hinterlassen...'"></textarea></p> 

<p><input required="required" class="hasPlaceholder" type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="30" tabindex="2" placeholder="Name <?php if ($req) echo '*'; ?>" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name <?php if ($req) echo '*'; ?>'"/></p>

<p><input required="required" class="hasPlaceholder" type="email" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="30" tabindex="2" placeholder="E-Mail (wird nicht veröffentlicht)<?php if ($req) echo '*'; ?>" onfocus="this.placeholder = ''" onblur="this.placeholder = 'E-Mail (wird nicht veröffentlicht)<?php if ($req) echo '*'; ?>'"/></p>

<p><input class="hasPlaceholder" type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="30" tabindex="2" placeholder="Webseite" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Webseite'"/></p>


<p><input class="btn" name="submit" type="submit" id="submit" tabindex="5" value="<?php echo esc_attr(__('Abschicken')); ?>" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>
 
</form>

 
<?php else : // Kommentare sind geschlossen ?>
<p>Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.</p>
<?php endif; ?>

Da das ganze auch natürlich auf dem Template von meinem Theme basiert, hier noch ein bisschen CSS um das ganze richtig hübsch zu machen:

/* Kommentarfeld */


.hasPlaceholder {
	background: 10px 6px #fff;
	border: 0 none;
	font: bold 12px Arial,Helvetica,Sans-serif;
	color: #000;
	padding: 6px 15px 6px 6px;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
	-webkit-transition: all 0.7s ease 0s;
	-moz-transition: all 0.7s ease 0s;
	-o-transition: all 0.7s ease 0s;
	transition: all 0.7s ease 0s;
    }
	
.btn, .button {
	-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
	box-shadow:inset 0px 0px 0px 0px #ffffff;
	background-color:#f9f9f9;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:12px;
	font-weight:bold;
	padding:2px 15px 2px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
	}
	
.btn:hover, .button:hover {
	background-color:#e9e9e9;
	}
	
.btn:active, .button:active {
	position:relative;
	top:1px;
	}
	
ol.commentlist { list-style:none; margin:0; padding:0; width:95%;}
ol.commentlist li { border:1px solid #d5d5d5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; margin:0px 0px 10px 0px; padding:10px 7px 10px 40px; position:relative; }

ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.comment-meta { line-height: 16px; position:absolute; right:10px; text-align:right; top:5px; }
ol.commentlist li div.comment-meta a { color:#000; text-decoration:none; }
ol.commentlist li div.reply a { color:#670000; text-decoration:none; }
ol.commentlist li div.reply a:hover { color:#670000; text-decoration:underline; }

ol.commentlist li ul { font-weight:normal; line-height: 16px; list-style:square; margin:0 0 12px; padding:0; }
ol.commentlist li ul.children { list-style:none; margin: 12px 5px 0px 0px; text-indent:0; }
ol.commentlist li ul.children li.depth-2 { margin:20px 0 3px; }
ol.commentlist li ul.children li.depth-3 { margin:20px 0 3px; }
ol.commentlist li ul.children li.depth-4 { margin:20px 0 3px; }
ol.commentlist li ul.children li.depth-5 { margin:20px 0 3px; }
ol.commentlist ul.children li.even { background:#fff; }
ol.commentlist ul.children li.odd { background:#F9F9F9; }
ol.commentlist li.comment ul.children li.odd {background:#F9F9F9;}
ol.commentlist li.comment ul.children li.even {background:#fff;}
ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }

.comment-intro{border-bottom: 1px solid #d9d9d9; width: 95%;}
	
/* Kommentarfeld Ende */

Und weil wir so geil sind, gehen wir wieder in unsere Functions.php damit links in den Kommentaren in neuen Fenstern/Tabs geöffnet werden.

function comment_links_in_new_tab($text) {
$return = str_replace('<a', '<a target="_blank"', $text);
return $return;
}
add_filter('get_comment_author_link', 'comment_links_in_new_tab');
add_filter('comment_text', 'comment_links_in_new_tab');