只在WP主评论加上楼层号的方法(支持评论分页)

最新代码移步到这里:只在WP主评论加上楼层号的方法『支持顺序、倒序』(2012.11.17)

很久没折腾 WordPress 相关的伪技术了,今天突然想起自从 WordPress 2.7 支持嵌套后久久没实现的评论楼层号,如果按照老式的方法给主评论和嵌套评论都加上楼层号,我个人认为是没有什么意义的,而且感觉会乱七八糟,但是只为主评论加上楼层号,那么就不同了,因为每层楼就是一个讨论组,可以当作是一个论坛贴,嵌套评论就是参加讨论的人。

我记得4月份在《凤凰不归巢》那里看到一篇文章《WP非插件显示谁坐了沙发》里面有相关主次评论判断方法,于是今早无聊就折腾了一番,没想到真给我折腾出来了。

效果看我现在用的主题 zSnos 的评论,下面是方法

前提

1. 当然是要在 WordPress 后台开启嵌套评论评论分页
2. 所用主题支持嵌套(目前的主题基本都支持吧)
3. 主题有使用 mytheme_comment 回调函数(http://codex.wordpress.org/Template_Tags/wp_list_comments

下面拿默认的评论函数来说明

1. 先看看WP官方的默认 mytheme_comment 回调函数

function mytheme_comment($comment, $args, $depth){
$GLOBALS['comment'] = $comment;

?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
	<div id="comment-<?php comment_ID(); ?>">
		<div class="comment-author vcard">
		<?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>
		<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
	</div>
	<?php if ($comment->comment_approved == '0') : ?>
		<em><?php _e('Your comment is awaiting moderation.') ?></em>
		<br />
	<?php endif; ?>
	<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
		<?php comment_text() ?>
		<div class="reply">
			<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
		</div>
	</div>
<?php }

2. 那么现在开始添加楼层计数参数 $commentcount 等代码,具体看代码中的注释

2010.10.28 Update:优化了查询数)

function mytheme_comment($comment, $args, $depth){
$GLOBALS['comment'] = $comment;

//主评论计数器初始化 begin - by zwwooooo
	global $commentcount;
	if(!$commentcount) { //初始化楼层计数器
		$page = get_query_var('cpage')-1;
		$cpp=get_option('comments_per_page');//获取每页评论数
		$commentcount = $cpp * $page;
	}
//主评论计数器初始化 end - by zwwooooo

?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
	<div id="comment-<?php comment_ID(); ?>">
		<div class="comment-author vcard">
		<?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>
		<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
	</div>
	<?php if ($comment->comment_approved == '0') : ?>
		<em><?php _e('Your comment is awaiting moderation.') ?></em>
		<br />
	<?php endif; ?>
	<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
		<?php comment_text() ?>
		<div class="reply">
			<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
		</div>
		<div class="floor"><!-- 主评论楼层号 by zwwooooo -->
			<?php if(!$parent_id = $comment->comment_parent) {printf('#%1$s', ++$commentcount);} ?><!-- 当前页每个主评论自动+1 -->
		</div>
	</div>
<?php }

3. 从上面代码可以看出我给楼层号特意加上一个 div 来显示,如果你的主题评论结构够标准,那么可以参考下面的 css

ol.commentlist li div.floor{position:absolute;top:0;right:0;}

OK,搞定,有兴趣的朋友玩玩吧,这个唯一不好的就是会增加数据库查询次数,不过这应该是微不足道。

zww
or
oooo

“只在WP主评论加上楼层号的方法(支持评论分页)”有231条评论

  1. xianzi says:

    :grin: 用上了,谢谢谢谢谢谢谢

    1. zwwooooo says:

      @xianzi 荒淫使用

    2. dh says:

      @zwwooooo
      没有第三层吗?

    3. zwwooooo says:

      @dh
      木有的。第三层及后面的都会自动跟到第二层。

  2. [...] 显示侧边栏 木木木木木 不问明天,悠然浪费 [jQuery] 双击快速回复 Ta 统一完文章及评论分页导航样式后,目标移向了评论,给《主评论加上楼层号》后,脑中一个灯泡闪亮:每次回复留言都要把鼠标移到右上角,然后点击一下“回复”,累撒,如果能直接“点击/双击”留言回复那就帅了! [...]

  3. dengm says:

    感觉有点太复杂了

    1. zwwooooo says:

      @dengm 觉得复杂就直接照着修改用 :smile:

  4. andy says:

    我的博客也已经按照你说的折腾好了,不过最后的CSS好像不起作用。。加上后,会不显示楼层的。。
    :razz:

    1. zwwooooo says:

      @andy 最后的css只能参考,自己根据自己的主题修改。

  5. says:

    @zwwooooo 我想把reply移动评论下面来,但是我那主题的reply主评论副评论样式是一样的,我看到你副评论有个atclass样式,问下你评论代码里的判断怎么写,如果是主评论就用reply样式如果是副评论就用atclass样式,谢谢

    1. zwwooooo says:

      @洁 你如果研究过评论的结构你就知道怎样去定义主评论和子评论的样式了,atclass是给jQ用的,不是用来定义样式的。
      评论结构: http://zww.me/archives/25155

  6. zoo 怎样才能倒序数楼层啊……

    1. zwwooooo says:

      @似飘若舞 我试过比较难,暂时放弃,看哪天再研究下

  7. 无念 says:

    这个好 :mrgreen:

    1. zwwooooo says:

      @无念 荒淫折腾加上

    2. timsoon says:

      @无念

      无念: 这个好

      不知道能不能在某个楼里面也显示楼号

  8. [...] QiQiBoY 已经把方法折腾出来了,高手哇。效果:解方法见:完美解决WordPress嵌套回复的层深问题(无限嵌套)<一>为 WordPress 主评论加上楼层号有个楼层号看起来像模像样,只给主评论加上也不会显得杂乱,还支持评论分页。详见:只在WP主评论加上楼层号的方法(支持评论分页)添加评论引用功能使用评论嵌套方式的话引用就少了,不过在说明某些问题的时候还是需要的。 在评论模板加上引用按钮,免去了不少麻烦。同样来自 QiQiBoY 的:添加引用按钮——轻松打造属于你的WordPress引用回复功能 文章的步骤写得很详细了,不过由于那段 JavaScript 和主题的回复功能有些冲突,拜托了 om 才改好的 。在评论框添加简单计数器折腾一回; [...]

  9. 浩子 says:

    分页这个就有点困难了
    呵呵
    但是那个楼层显示的应该比较容易

    1. zwwooooo says:

      @浩子 一起解决了

  10. [...] 此文也是算一个其中衍生出的效果,就是为了更清晰的显示出楼层的级数关系,一眼就能看出是回复谁的。添加特效前得在《在WP主评论加上楼层号》,及在子评论也加上楼层数: <?php if( $depth > 1){printf('B%1$s', $depth-1);} ?> [...]

  11. [...] 给我留言 木木木木木 不问明天,悠然浪费 [jQuery] 双击快速回复 Ta 统一完文章及评论分页导航样式后,目标移向了评论,给《主评论加上楼层号》后,脑中一个灯泡闪亮:每次回复留言都要把鼠标移到右上角,然后点击一下“回复”,累撒,如果能直接“点击/双击”留言回复那就帅了! [...]

  12. [...] 为了便于阅读评论,让评论更有条理,我这里在每个主评论的前面都加在了楼层号的显示,具体的实现过程参见文章《只在WP主评论加上楼层号的方法(支持评论分页)》 [...]

  13. 為WordPress留言加入樓層顯示,支援階層式迴響(嵌套評論)、迴響分頁(評論分頁)且同時支援正序及倒序顯示評論(較舊及較新的迴響顯示在上方) | 到處閒晃 says:

    [...] 過來這裡是同時參考以下兩篇達成的 為WordPress評論加入樓層顯示 只在WP主評論加上樓層號的方法(支持評論分頁) [...]

  14. 為WordPress留言加入樓層顯示 | 到處閒晃 says:

    [...] 過來這裡是同時參考以下兩篇達成的 為WordPress評論加入樓層顯示 只在WP主評論加上樓層號的方法(支持評論分頁) [...]

  15. winy says:

    没看明白具体改了哪里 :?:
    用的方法学你的,能说下减少查询数目的关键地方吗?
    我查询数目也很高,因为不但有主楼层,还有子楼层,每层也有沙发什么的,还有缩进。。。

    1. zwwooooo says:

      @winy
      放在if(!$commentcount)里面就执行一次,如果放在外面那么每一个评论都执行一次

  16. [...] 之前的那段代码导致数据库查询数过多,囧 在上一篇折腾评论的文章介绍过,建议同学们更新:只在WP主评论加上楼层号的方法(支持评论分页) [...]

  17. [...] 具体参考《只在WP主评论加上楼层号的方法(支持评论分页)》效果如下: [...]

  18. seri says:

    看的头有点晕,代码神马的还是看的发秫 - -

    1. zwwooooo says:

      @seri
      呃,折腾一下就不会了

  19. 砼砼 says:

    不错啊,过几天我过来抄代码了,哈哈哈

    1. zwwooooo says:

      @砼砼
      囧~你还有玩博么?

    2. 砼砼 says:

      @zwwooooo
      打死你

    3. zwwooooo says:

      @砼砼
      打死不怕,最重要你复活了

    4. @砼砼
      ……你还玩博客?我被震精了……

  20. wpbus says:

    真的很不错的文章

发表评论

昵称 *

网址

B em del U Link Code Quote