Skip to Content

WordPress 2.7评论相关函数详解

原创文章,转载请联系Liony_小狮

fenye WordPress 2.7自带了Thread Comment功能,无需插件即可完美实现评论分页和回复评论的功能,小狮刚刚把imliony这个模板修改完,现在imliony也支持评论分页功能啦! :)

上面是本博客的分页样式(感谢小新同志的指导)。

下面小狮就把修改过程记录一下。

WordPress 2.7中Comment的特点

2.7版本中自带的Thread Comment有几个特点需要注意。第一是自动分页,在后台可以设置每页显示几条评论、先显示旧评论还是先显示新评论等等,然后调用wp_comment_list()函数,系统就会自动进行分页;第二是支持嵌套功能,效果跟现在的Thread Comment类的插件一样。

要想实现WordPress 2.7自带的Thread Comment,就需要重写comment.php文件。

重写comment.php文件

在2.7中,统一使用wp_comment_list()函数来显示评论,代替了之前的for...each方式,所以comment.php文件几乎要全部重写。

重写主要涉及三个地方,一是评论内容部分,要用wp_comment_list()函数代替之前的for...each语句;二是加上分页导航的相关函数,用来显示分页导航;三是修改form区域的代码,用来支持嵌套回复。

下面一个一个的说。

使用wp_comment_list()函数

wp_comment_list()函数将根据用户的设置自动对评论进行切割和分页,然后返回包含评论内容的HTML代码。

由于评论都封装在了wp_comment_list()中,所以如果需要修改评论的样式就需要另外写一个函数,用于wp_comment_list()的回调,我们需要在funtion.php文件中定义该函数,然后用wp_comment_list("callback=函数名")的方式进行调用。

wp_comment_list()函数的用法:

	<?php wp_list_comments('style=ul&callback=callback_func'); ?>

wp_comment_list()有3个主要参数:
(int)avatar_size:指定评论者的头像尺寸,默认是32,单位是px
(string)style:评论代码用哪种标签包裹,可以在ul和div中进行选择,默认是ul
(string)callback:指定一个定义在function.php文件中的函数,wp_comment_list()将根据该函数对评论内容进行HTML编码,所以该函数通常用于指定评论内容的样式

使用wp_comment_list()之后,我们得到的HTML代码是这样的:

<div id="comments">
	<h3>3 Comments</h3>
	<li id="comment-18" class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1 parent">
		<div id="div-comment-18"></div>
		<ul class="children"></ul>
	</li>
</div>

除了comments这个div和那个h3以外的内容,都是wp_comment_list()函数生成的。

首先我们可以看到每条评论都是用li标签包裹的,而且有非常详细的class,基本上把所有类型的comment都表示出来了,比如文章作者的评论、admin管理员的评论以及某条评论的回复等等,这样我们在做CSS的时候就很方便了。

然后在comment-18这个li的内部,有一个div和一个ul,前者是评论内容,后者是该条评论的回复。前者的代码展开之后如下:

<div id="div-comment-18">
	<div class="comment-author vcard">
		<img class="avatar avatar-32 photo" width="32" height="32" src="http://www.gravatar.com/avatar/444e20d6b616a9b7bc57ffa4fe5f71f5?s=32&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G" alt=""/>
		<cite class="fn">admin</cite>
		<span class="says">says:</span>
	</div>
	<div class="comment-meta commentmetadata">
		<a href="http://127.0.1/archives/1/comment-page-4/#comment-18">2008-12-24 - 14:11</a>
		<a title="编辑评论" href="http://127.0.1/wp-admin/comment.php?action=editcomment&c=18">(Edit)</a>
	</div>
	<p>我是一条评论!!</p>
	<div class="reply">
		<a onclick="return addComment.moveForm("div-comment-18", "18", "respond", "1")" href="/archives/1/?replytocom=18#respond" rel="nofollow">Reply</a>
	</div>
</div>

这是默认的结构,我们可以用回调函数进行自定义,一般来说都需要自定义的,下面会专门讲到。其中要注意reply这个div,就是那个reply按钮,这里包含一个JS,会id为respond的HTML元素移动到div-comment-18这个div的下面。那个children层里面包含的是一条子评论,结构是一样的。

使用回调函数自定义wp_comment_list()

使用回调函数可以自定义wp_comment_list()的返回结果,常用于修改评论的样式。方法是在调用wp_comment_list()的时候指定callback参数:

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

然后在function.php中定义mytheme_commen()t函数即可:

<?php
function mytheme_comment($comment, $args, $depth) {

   $GLOBALS['comment'] = $comment; ?>
  <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
	  <div id="div-comment-<?php comment_ID() ?>">
		<?php echo get_avatar( $comment, 32 ); ?>
		<?php if ($comment->comment_parent == '0') : ?>
		<p class=timestamp><a href="#comment-<?php comment_ID() ?>">
		  <?php comment_date('Y年n月j日') ?><br>
		  <span class=time>
		  <?php comment_time('H:i a') ?>
		  </span></a></p>
		<?php endif; ?>
		<cite>
		<?php comment_author_link() ?>
		<?php edit_comment_link('(EDIT)'); ?>
		</cite>
		<?php comment_text() ?>
		<?php if ($comment->comment_approved == '0') : ?>
		<p class="moderation"> 感谢你的回复! <br/>
		  你的评论将经过一段时间的审核后显示在这里, 请稍等片刻. </p>
		<?php endif; ?>
		<div class="reply">
			<?php comment_reply_link(array_merge( $args, array('add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
		</div>
		<div class=hr></div>
	  </div>
<?php
        }

细心的人可以发现,li标签在这里没有封闭,因为wp_comment_list()函数会自动封闭li标签的。这是因为评论会存在回复的可能,因此可能会出现children层,而children层是要包含在li标签内的,但是children层何时会封闭又不知道(因为不知道会有几条回复),所以li标签在这里也不能封闭。

到此,评论的分页和嵌套回复就搞定了。下面说说评论分页的导航,也有几个相关的函数。

使用previous_comments_link()和next_comments_link()函数实现分页导航

previous_comments_link()是最常见的分页导航样式,就俩链接,一个是“上一页”,一个是“下一页”。
用法:

<div class="navigation">
	<div class="alignleft">
		<a href="http://127.0.1/archives/1/comment-page-2/#comments">? Older Comments</a>
	</div>
	<div class="alignright">
		<a href="http://127.0.1/archives/1/#comments">Newer Comments ?</a>
	</div>
</div>

next_comments_link()的参数说明:
(string)label:显示的字符,默认是“Newer Comments”
(integer)max_pages:最大页数(没搞懂这个参数是干什么的,哪位知道的告诉一下)

previous_comments_link()的参数说明:
(string)label:显示的字符,默认是“Older Comments”

使用paginate_comments_links()函数实现分页导航

这种导航的样式就是小狮现在用的那种,可以显示“1,2,3,4”数字的。

用法:

<div class="navigation">
	<?php paginate_comments_links("echo=1&prev_text=上一页&next_text=下一页"); ?>
</div>

参数说明(只拣常用的说):
echo:是否显示,1是显示,0是不显示,默认为显示。不显示时返回字符串 HTML。
next_text:显示的字符,默认是“Newer Comments”
prev_text:显示字符,默认是“Older Comments”

支持嵌套回复

分页和分页导航都搞定了,最后要修改的是评论的form部分,用来支持嵌套回复。这部分比较简单,要注意必须把form放在一个id为respond的层中,具体代码大家可以参考WordPress 2.7中的default模板,看comment.php就可以了,我在这里只说明其中用到的新函数。

cancel_comment_reply_link()函数、comment_id_fields()函数和comment_form_title()函数,具体用法如下:

//显示一个“回复”链接
<?php cancel_comment_reply_link('回复'); ?>
//显示评论输入框的标题
<?php comment_form_title( '发表评论', '给 %s 一条回复' ); ?>
//一般放在form代码的末尾
<?php comment_id_fields(); ?>
//上面的这个函数是用来代替下面这条语句的
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />

另外,要在header.php中加入下面这条语句:

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

该语句的作用是在文章的内容页引用comment-reply.js文件,点击“回复”按钮之后输入框移动到评论位置就是靠这个JS实现的。

总结

总的来说就是重写comment.php,首先用wp_comment_list()函数代替for...each语句;然后在function.php中定义回调函数;然后加上分页导航的调用函数。最后修改一下CSS就可以使了。

另外要注意的一点是,如果设置了“永久链接”的话,一定记住要在永久链接的后面加上一个斜杠“/”,否则分页导航会出现错误。

16 Comments

  • 2008年12月27日
    19:43 pm

    模板更新 | imLiony!

    [...] 再另外,修改方法参见小狮的这篇文章:WordPress 2.7评论相关函数详解,写的很详细,主要是面向模板开发人员的。 [...]

  • 2009年3月10日
    12:15 pm

    炜煜

    刚好为评论的样式头疼,搜搜一下就找到您这里了。实在太感谢了。写得很详细。

    回复
  • 2009年3月10日
    15:34 pm

    liony

    @炜煜: 呵呵,对你有用就好 :)

    回复
  • 2009年3月19日
    15:14 pm

    myrte

    @炜煜:
    不错,很好,谢谢!

    回复
  • 2009年3月26日
    00:49 am

    Alan

    @炜煜: 测试一下,不要见怪

    回复
  • 2009年3月26日
    21:40 pm

    liony

    测试什么啊……?

    回复
  • 2009年4月13日
    23:40 pm

    xaon

    恩 文章很有用啊

    PS: 问一下 你那个语法高亮插件是什么?

    回复
  • 2009年4月14日
    11:09 am

    liony

    @xaon: dp.SyntaxHighlighter,网址如下:
    http://www.dreamprojections.com/syntaxhighlighter/?ref=about

    文章对你有用让我很高兴 :)

    回复
  • 2009年5月24日
    17:20 pm

    popershi

    厉害!我也去试试!

    谢谢分享啦!

    回复
  • 2009年7月16日
    20:42 pm

    ZeroDream

    我的也跟你第一张预览图一样,翻页前面有个小图标,但是没有分页的时候也会显示出来……
    本人实在太菜想一天都不知道该如何解决“没分页的时候就不显示那个小图标,有分页的时候在显示出来”
    在这里我先谢谢你了

    回复
  • 2009年7月17日
    16:59 pm

    ZeroDream

    OK,问题解决了,现在难在不出现“回复”按钮以及评论表单提交后是空白的囧

    回复
  • 2009年7月20日
    20:41 pm

    普兒

    啊, 写得真详细, 解决了大问题 :)

    回复
  • 2009年7月21日
    09:10 am

    liony

    @普兒: 对你有用就好啊~~ :)

    回复
  • 2009年7月27日
    19:45 pm

    sunliguo

    这篇文章对我帮助很大,谢谢!

    回复
  • 2009年8月30日
    09:42 am

    Marcus

    一个周末都在找如何定义留言的样式,终于找到这儿了!
    谢谢博主,给大家如此全面的介绍了留言的样式定义~~~~~

    顺便问一下博主,每个留言左上方会默认每个留言的序号,如何修改这个序号的样式,或者如何删除掉,谢谢!!!

    回复
  • 2009年11月3日
    16:25 pm

    z.Yleo77

    想修改 comment_author_link() 这个默认函数, 无奈用的是bsp, 还没找到办法。

    回复
  • Leave a Comment

    必须填写 E-mail 地址, 但是它不会被公开.

    支持的标签:  <a href=""> <abbr> <blockquote> <code> <em> <strike> <strong>

    Ctrl+Enter键回复评论内容