填写您的邮件地址,订阅我们的精彩内容:

如何自己设计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_linknext_comments_link,但实际上,我们使用paginate_comments_links函数可以实现翻页导航效果,具体使用请看官方文档,最简洁的方法是使用下面的代码:

paginate_comments_links( array('prev_text' => '&laquo;', 'next_text' => '&raquo;') );

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可以在评论列表中插入新的功能,例如可以在评论框上方加入一段小广告,增加或修改评论者信息等。

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

下面我简单说几句