如何自己设计wordpress评论列表及评论框

20120829更新：虽然文章以前已经将问题说的较为清楚，但是代码部分还存在一定的不足，通过这段时间的琢磨，对comments.php文件的代码进行了调整，所有代码如下：（注意php部分的逻辑，至于HTML结构您可以根据自己的情况进行调整）

wordpress本身有一个调用集合评论列表和评论表单的函数，即comments_template( '', true );，在模板中使用该函数可以直接显示评论列表和评论框，自己只需进行css样式设计即可。但这种调用并不能体现wordpress高自定义的特点，我们 通过本文来讲解设计自己的不同于wordpress系统本身的评论列表和评论框。

下面是实现自己设计的评论列表及评论框的所有代码，不过需要付费阅读，希望能直接帮到您！

<?php if('open' == $post->comment_status && $parent_comment_status == 'open') : // 如果文章允许评论 ?>
<div id="comments">

<?php if(have_comments()) : ?>
?? ?<div>已有<?php comments_number('0','1','%'); ?>条评论 <a id="to-quick-respond" style="color: #bc373a;" href="#respond">快速评论</a></div>
?? ?<ol id="comments-lists"><?php wp_list_comments(array('callback' => 'mytheme_comment'));?></ol>
?? ?<?php if(get_comment_pages_count()->1 == get_option('page_comments')) : // 如果条数大于规定的条数，那么就要翻页了 ?>
?? ??? ?<div id="comment-navi"></div>
?? ?<?php endif; // 翻页导航结束 ?>
<?php endif; // 评论列表结束 ?>

<div id="respond">
<?php if(get_option('comment_registration') && !is_user_logged_in()) : //如果文章设置了必须登录才能评论 ?>
?? ?你必须<a href="<?php wp_login_url(get_permalink()); ?>">登录</a>才能评论！
<?php else : //文章不用登录就能评论 ?>
<form id="commentform" action="<?php bloginfo('url'); ?>/wp-comments-post.php" method="post">
?? ?<?php if(isset($_GET['replytocom']) && $_GET['replytocom'] != '') : ?>
?? ?<div>
?? ??? ?您正在回复<?php echo comment_author($_GET['replytocom']); ?><a style="color: #f00;" href="#comment-<?php echo $_GET['replytocom']; ?>" rel="nofollow">@<?php echo $_GET['replytocom']; ?>楼</a> <a href="<?php the_permalink(); ?>#comment-<?php echo $_GET['replytocom']; ?>" rel="nofollow">取消</a>
?? ??? ?<!-- 这里需要注意：由于我的主题是用我自己的方式取消回复，如果使用wordpress自己的取消按钮，请使用<?php cancel_comment_reply_link('取消'); ?> -->
?? ?</div>
?? ?<?php endif; ?>
?? ?<?php if(is_user_logged_in()) : // 如果用户已经登录 ?>
?? ?<div>亲爱的<strong><?php echo $user_identity; ?></strong> 您已经登录啦！ <a href="<?php echo admin_url('profile.php'); ?>">修改信息</a> <a href="<?php echo wp_logout_url(get_permalink()); ?>">注销</a> 赶快评论啊！</div>
?? ?<?php elseif($comment_author != '') : // 如果用户没有登录，而之前又已经进行了评论，被记录的email信息 ?>
?? ?<div>亲爱的<strong><?php echo $comment_author; ?></strong> 欢迎回来！<a id="toggle-comment-author-info" href="javascript:toggleCommentAuthorInfo();"><?php _e('修改信息'); ?></a> 留下您的回复吧</div>
?? ?<div id="comment-author-info" style="display: none;"><input id="author" type="text" name="author" value="<?php echo $comment_author; ?>" /><label for="author"><?php _e('昵称'); ?><?php if ($req) echo " *"; ?></label>
?? ?<input id="email" type="text" name="email" value="<?php echo $comment_author_email; ?>" /><label for="email"><?php _e('邮箱'); ?><?php if ($req) echo " *"; ?></label>
?? ?<input id="url" type="text" name="url" value="<?php echo $comment_author_url; ?>" /><label for="url"><?php _e('个人主页'); ?></label></div>
?? ?<script type="text/javascript">
?? ?var changeMsg = '修改信息';
?? ?var closeMsg = '隐藏信息';
?? ?function toggleCommentAuthorInfo(){
?? ??? ?var $info_box = $('#comment-author-info'),$tog_btn = $('#toggle-comment-author-info');
?? ??? ?$info_box.slideToggle('slow', function(){
?? ??? ??? ?if($info_box.css('display') == 'none'){
?? ??? ??? ??? ?$tog_btn.text(changeMsg);
?? ??? ??? ?}else{
?? ??? ??? ??? ?$tog_btn.text(closeMsg);
?? ??? ??? ?}
?? ??? ?});
?? ?}
?? ?</script>
?? ?<?php else : //既没登录，也没之前留言情况下 ?>
?? ?<div>填写个人信息，赶快回复吧！</div>
?? ?<div id="comment-author-info"><input id="author" type="text" name="author" value="" /><label for="author"><?php _e('昵称'); ?><?php if ($req) echo " *"; ?></label>
?? ?<input id="email" type="text" name="email" value="" /><label for="email"><?php _e('邮箱'); ?><?php if ($req) echo " *"; ?></label>
?? ?<input id="url" type="text" name="url" value="" /><label for="url"><?php _e('个人主页'); ?></label></div>
?? ?<?php endif; ?>
?? ?<div id="comment-text"><textarea id="comment" name="comment"></textarea></div>
?? ?<div>
?? ??? ?<button id="submit" name="submit" type="submit"><?php _e('提交'); ?></button>
?? ??? ?<span><a id="insert_comment_img" onclick="return insertImg('comment');" href="#">插入图片</a></span>
?? ??? ?<?php if(function_exists('add_mail_to_comment_checkbox'))add_mail_to_comment_checkbox(); ?>
?? ??? ?<input type="hidden" name="redirect_to" value="<?php the_permalink(); ?>" />
?? ??? ?<?php do_action('comment_form', $post->ID); ?>
?? ??? ?<?php comment_id_fields(); ?>
?? ??? ?<div></div>
?? ?</div>
?? ?<script type="text/javascript">
?? ?// Ctrl+Enter提交评论
?? ?$(document).keypress(function(e){
?? ??? ?if(e.ctrlKey &#038;& e.which == 13 || e.which == 10) {
?? ??? ??? ?$("#submit").click();
?? ??? ??? ?document.body.focus();
?? ??? ?} else if (e.shiftKey &#038;& e.which==13 || e.which == 10) {
?? ??? ??? ?$("#submit").click();
?? ??? ?}
?? ?});
?? ?</script>
</form><?php endif; // 回复部分结束 ?>
</div><!-- end of #respond -->

</div><!-- endi of #comment -->
<?php endif; //如果文章允许评论的话，到这里结束

代码中有部分内容省略，省略部分在下文会有详解。

一、wordpress评论列表机制 ↑

wordpress模板中使用comments_template( '', true );函数可以直接调用评论列表，但该函数运行时，先检查是否存在commens.php模板文件，如果存在，将该模板引入，不存在，则印出默认样式的评论列表及评论框。默认的列表是<ol><li><ul><li><ul>...联动的嵌套列表，而且wordpress内置了部分css样式。默认情况下，每条评论有错位，显示出评论的深度，但布局并不好看，需要自己写样式表。

二、 设计评论列表 ↑

我们接下来要做的是设计自己的comments.php，并在single.php中合适的地方使用comments_template( '', true );函数调用comments.php模板。我们在comments.php中写的内容将如实被调用，于是我们开始设计自己的评论列表。

1、 如果该文没有评论 ↑

<?php if( post_password_required()) : ?>
<p>本文评论需密码查看！</p>
<?php return;endif; ?>

需要密码，则需要密码才能查看，用一个return截断，不会执行下面的内容。

2、评论列表 ↑

<?php if ( have_comments() ) : ?>
<h3 id="comments-title"><?php the_title(); ?>上有<?php comments_number('0','1','%'); ?>条评论</h3>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-above">
?? ?<div><?php previous_comments_link('<< 旧的评论'); ?></div>
?? ?<div><?php next_comments_link('新的评论 >>'); ?></div>
</nav>
<?php endif; // check for comment navigation ?>

<ol><?php wp_list_comments( array( 'callback' => 'mytheme_comment' ) );?></ol>

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-below">
?? ?<div><?php previous_comments_link('<< 旧的评论'); ?></div>
?? ?<div><?php next_comments_link('新的评论 >>'); ?></div>
</nav>
<?php endif; // check for comment navigation ?>

<?php elseif (!comments_open() && !is_page() && post_type_supports( get_post_type(), 'comments' ) ) : //评论关闭 ?>
<?php endif; // end of comment list ?>

如果有评论的话列出评论列表，用到wp_list_comments()函数。同时需要判断评论条数是否过多有分页。如果没有评论，判断是否评论被关闭。

评论翻页的地方，这里虽然使用了previous_comments_link和next_comments_link，但实际上，我们使用paginate_comments_links函数可以实现翻页导航效果，具体使用请看官方文档，最简洁的方法是使用下面的代码：

paginate_comments_links( array('prev_text' => '«', 'next_text' => '»') );

3、wp_list_comments()函数 ↑

请参看原文http://codex.wordpress.org/Function_Reference/wp_list_comments，是wordpress评论列表机制。在comments.php中使用该函数，需要在functions.php中加入每条评论的呈现方式，在原文中有提到。

我们在comments.php中使用wp_list_comments( array( 'callback' => 'mytheme_comment' ) );，在functions.php中加入函数

function mytheme_comment($comment, $args, $depth) {
?? ?$GLOBALS['comment'] = $comment; ?>
?? ?<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
?? ??? ?<table id="comment-<?php comment_ID(); ?>" border="0" cellspacing="0" cellpadding="0">
?? ??? ?<tr>
?? ??? ??? ?<td rowspan="2" align="left" valign="top"><?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?></td>
?? ??? ??? ?<td valign="middle">
?? ??? ??? ?<?php echo get_comment_author_link().' 于 '.get_comment_date().get_comment_time().' 发表的见解 '; ?>
?? ??? ??? ?<?php edit_comment_link('编辑见解 ','','') ?>
?? ??? ??? ?<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
?? ??? ??? ?</td>
?? ??? ?</tr>
?? ??? ?<tr>
?? ??? ??? ?<td>
?? ??? ??? ?<?php comment_text(); ?>
?? ??? ??? ?<?php if ($comment->comment_approved == '0')echo '<b>您的见解正在审核中，很快就会出现在评论列表~~</b>'; ?>
?? ??? ??? ?</td>
?? ??? ?</tr>
?? ??? ?</table>
?? ?<?php
}

这里的列表随意自己布局，建议不要使用这里的table。注意：虽然在开头加入了<li>作为每条评论开头，但请不要在函数结尾加</li>，系统将自动为你添加关闭标签。

三、设计评论框 ↑

在comments.php中我们设计自己的评论框，实现布局和功能添加。我需要考虑到如下的一些情况：

1、评论开启的情况下才显示评论框，允许评论 ↑

将评论框的所有内容包含在

<?php if ('open' == $post->comment_status) : ?>
<?php endif; ?>

中，当评论关闭时即不会显示评论框，访客即不能留言评论了。

2、系统设置必须登录才能评论 ↑

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>您必须<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">登录</a>才能发表见解！</p>

3、判断用户是否已经登录或者已经留言过，不用再写入自己的邮件信息 ↑

<?php if($user_ID) : ?>
<p>您以<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="退出">注销</a></p>
<?php elseif(''!= $comment_author ): ?>
<p>欢迎<?php echo $comment_author; ?>再次光临！ <a href="javascript:toggleCommentAuthorInfo();" id="toggle-comment-author-info">更改</a></p>

4、如果没有以上情况的话，就印出需要用户填写自己的昵称、邮件等信息。 ↑

最终代码如下：

已在文章最开始全部呈现

您应该自己慢慢读懂本文，并自己确定程序的写法，去掉本文代码中的无用部分，修改增加适合自己的代码，避免忘记关闭if引起的错误。

通过自己设计comments.php可以在评论列表中插入新的功能，例如可以在评论框上方加入一段小广告，增加或修改评论者信息等。

扩展阅读：在评论列表中获取楼层或序号