乌徒帮技术范WordPressWordPress开发 › 如何自己设计wordpress评论列表及评论框

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

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

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

已有30条评论 快速评论
  1. 否子戈 #4377楼 回复给@4373楼 2014/09/22 23:41:45 回复

    邮件回复通知?

  2. Toner chip #4373楼 回复给@4372楼 2014/09/17 17:55:04 回复

    我是菜鸟哈。 请问博主怎么设置你这个回复通知啊。我的主题是找别人做的,没有这个功能。

  3. 否子戈 #4372楼 回复给@4367楼 2014/09/17 16:34:25 回复

    有不足之处还望补充

  4. Toner chip #4367楼 2014/09/14 09:43:52 回复

    感谢博主!这个对我有大用处,如果挖坟请海涵。。

  5. 否子戈 #4353楼 回复给@4349楼 2014/08/07 20:33:06 回复

    多交流哦

  6. boke123 #4349楼 2014/07/23 15:37:01 回复

    正准备把多说改为wordpress自带的评论,继续研究中!

  7. 否子戈 #3817楼 回复给@3813楼 2013/07/15 20:50:08 回复

    这个需要使用到javascript,在wordpress的includes目录中有comment-reply.js,可以实现该功能

  8. 免费部落 #3813楼 2013/07/15 14:48:03 回复

    很不错,不过我想问一下博主,如何让访客发表回复时,写内容的框移到该评论内容下.

  9. 否子戈 #1618楼 回复给@1602楼 2012/08/29 21:42:45 回复

    还有不足之处多多指教

  10. 倡萌 #1602楼 2012/08/28 22:03:47 回复

    做主题的都应该好好学习 呵呵

  11. 否子戈 #1142楼 回复给@1141楼 2012/05/30 18:32:31 回复

    多多支持,多多交流啦

  12. lft59598 #1141楼 回复给@801楼 2012/05/29 00:54:15 回复

    写得很细,我正需要好好看看,用上了再回来谢谢你。

  13. frustigor #1037楼 回复给@1032楼 2012/04/14 17:17:26 回复

    你好!
    1、你对问题的描述没有讲清楚,让我很难理解;
    2、你的代码没有显示出来,不是很明白

  14. 金果 #1032楼 2012/04/14 15:16:44 回复

    按照博主的方法修改后,在single.php中评论列表和评论框与相关文章产生错误,代码如下:

    没有找到文章!



    相关文章

    最新文章

    如果把移到下面,评论列表和评论框就不显示了,百般调试都不理想,请博主帮忙!!!

  15. frustigor #811楼 回复给@788楼 2012/03/05 09:52:57 回复

    继续加油

  16. uyghurbeg #801楼 2012/03/01 23:43:56 回复

    在仔细的学习中,博主辛苦了~

  17. Dominic #788楼 2012/02/25 19:07:08 回复

    正苦恼怎么把博客的评论变得像ISMS一样这种会话性质的。看了博主的文章,觉得有一点点头绪啦。。。谢谢呀

  18. 范思哲 #769楼 2012/02/18 10:25:52 回复

    博主是个有心人,写的教程这么详细,对我等非专业人士真的很有帮助,谢谢了

  19. kawayiwc #694楼 回复给@690楼 2011/12/30 15:29:13 回复

    能人呀,大哥,可是我就是找不到那个源代码的文件是哪一个呀,它应该在哪一个呀,大哥?

  20. frustigor #690楼 回复给@688楼 2011/12/29 19:32:39 回复

    我看了你的网站源代码,textarea的属性中style=”visibility: hidden;” style=”display: none;” 请把它们去掉

  21. kawayiwc #688楼 2011/12/29 13:42:43 回复

    你好,看了你的文章受益匪浅,我现在的问题是我的评论框没有了,什么身份也不能输入内容,请求你的帮助,如果你能帮我看一下,我将十分感激。示例网址:http://www.kawayiwc.com/?p=1881

  22. frustigor #628楼 回复给@627楼 2011/11/23 22:37:43 回复

    慢慢来,等以后熟练了就很容易了

  23. 亲情博客 #627楼 2011/11/23 18:26:02 回复

    唉呀菜了点,很难弄啊

  24. o51k #589楼 2011/10/29 19:32:20 回复

    看到代码头都大了。。。

  25. frustigor #488楼 回复给@486楼 2011/10/03 14:00:00 回复

    空间常抽风啊,木有办法,目前没钱,忍忍过了

  26. wpbars #486楼 2011/10/03 13:05:58 回复

    那个分享到什么网址的插件加载不了,你的站点好卡。速度很慢呀。

  27. wpbars #485楼 2011/10/03 12:57:14 回复

    哈哈,看来很用心的写。话说你好多博客啊。

  28. frustigor #469楼 回复给@468楼 2011/09/29 17:58:24 回复

    呵呵,谢谢支持,国内不敢当哦,我只是担心一些入门的朋友,所以尽量写的详细全面,多多交流哈

  29. qintag #468楼 2011/09/29 17:55:53 回复

    国内很难找到这样详细的comments评论说明了,感谢博主。

  30. 春雷 #381楼 2011/09/16 16:56:07 回复

    博客做的不错,欢迎博主回访

填写个人信息,赶快回复吧!