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 && e.which == 13 || e.which == 10) { ?? ??? ??? ?$("#submit").click(); ?? ??? ??? ?document.body.focus(); ?? ??? ?} else if (e.shiftKey && 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可以在评论列表中插入新的功能,例如可以在评论框上方加入一段小广告,增加或修改评论者信息等。
扩展阅读:在评论列表中获取楼层或序号
邮件回复通知?
我是菜鸟哈。 请问博主怎么设置你这个回复通知啊。我的主题是找别人做的,没有这个功能。
有不足之处还望补充
感谢博主!这个对我有大用处,如果挖坟请海涵。。
多交流哦
正准备把多说改为wordpress自带的评论,继续研究中!
这个需要使用到javascript,在wordpress的includes目录中有comment-reply.js,可以实现该功能
很不错,不过我想问一下博主,如何让访客发表回复时,写内容的框移到该评论内容下.
还有不足之处多多指教
做主题的都应该好好学习 呵呵
多多支持,多多交流啦
写得很细,我正需要好好看看,用上了再回来谢谢你。
你好!
1、你对问题的描述没有讲清楚,让我很难理解;
2、你的代码没有显示出来,不是很明白
按照博主的方法修改后,在single.php中评论列表和评论框与相关文章产生错误,代码如下:
没有找到文章!
…
相关文章
…
最新文章
…
如果把移到下面,评论列表和评论框就不显示了,百般调试都不理想,请博主帮忙!!!
继续加油
在仔细的学习中,博主辛苦了~
正苦恼怎么把博客的评论变得像ISMS一样这种会话性质的。看了博主的文章,觉得有一点点头绪啦。。。谢谢呀
博主是个有心人,写的教程这么详细,对我等非专业人士真的很有帮助,谢谢了
能人呀,大哥,可是我就是找不到那个源代码的文件是哪一个呀,它应该在哪一个呀,大哥?
我看了你的网站源代码,textarea的属性中style=”visibility: hidden;” style=”display: none;” 请把它们去掉
你好,看了你的文章受益匪浅,我现在的问题是我的评论框没有了,什么身份也不能输入内容,请求你的帮助,如果你能帮我看一下,我将十分感激。示例网址:http://www.kawayiwc.com/?p=1881
慢慢来,等以后熟练了就很容易了
唉呀菜了点,很难弄啊
看到代码头都大了。。。
空间常抽风啊,木有办法,目前没钱,忍忍过了
那个分享到什么网址的插件加载不了,你的站点好卡。速度很慢呀。
哈哈,看来很用心的写。话说你好多博客啊。
呵呵,谢谢支持,国内不敢当哦,我只是担心一些入门的朋友,所以尽量写的详细全面,多多交流哈
国内很难找到这样详细的comments评论说明了,感谢博主。
博客做的不错,欢迎博主回访