2010年07月11日 160条评论

完美的WordPress无限嵌套回复方法

我曾今在《折腾:5级嵌套改为2级嵌套 & 主评论内悬浮显示 @ 评论(唠叨篇)》这篇文章说过我的嵌套评论结构——所有嵌套评论用 jQuery 锁定到主评论下,用的是 Jinwen 的嵌套思路 实现的,但这样有个访客体验小问题:就是回复主评论下的嵌套评论时,回复框会跑到主评论上面去,对于访客的体验非常不好,容易晕。

前几天阿邙和qiqiboy同时写了关于实现无线嵌套评论的方法,认真拜读后,觉得阿邙的方法不适合我,觉得qiqiboy的方法非常适合我。

传送门:阿邙《WordPress嵌套评论之无限嵌套》《WordPress嵌套评论之无限嵌套之补遗

qiqiboy的原理方法我不累说,具体到这里《完美解决WordPress嵌套回复的层深问题(无限嵌套)<一>

下面我只说实现方法:(由于qiqiboy在文章贴的代码错误,我花了一些时间才发现问题所在,已去qiqiboy那里评论反馈)

1. 去WP后台设置评论嵌套层数,我设为2层

2. 打开主题 functions.php 找到评论回调函数,回复按钮一般都是利用默认函数comment_reply_link(),如下

<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>

把其修改为

<?php if ($depth == get_option('thread_comments_depth')) : ?>    <!-- 评论深度等于设置的最大深度 -->
 <!-- 将第二个参数改为父一级评论的id -->
     <a onclick="return addComment.moveForm( 'comment-<?php comment_ID() ?>','<?php echo $comment->comment_parent; ?>', 'respond','<?php echo $comment->comment_post_ID; ?>' )" href="?replytocom=<?php comment_ID() ?>#respond" class="comment-reply-link" rel="nofollow">Reply</a>
 <?php else: ?>
 <!-- 正常情况 -->
     <a onclick="return addComment.moveForm( 'comment-<?php comment_ID() ?>','<?php comment_ID() ?>', 'respond','<?php echo $comment->comment_post_ID; ?>' ) " href="?replytocom=<?php comment_ID() ?>#respond" class="comment-reply-link" rel="nofollow">Reply</a>
 <?php endif; ?>

3. 因为最后那层评论都是堆积在最后那层评论上一级,所以如果评论很多的话,就会出现不知道谁回复谁的情况,可以考虑我的评论给每个评论加上 @评论者 ,实现方法参考我以前写的《用 jQuery 实现点击回复之后显示@用户名的效果

OK,搞定,具体效果看我博客的评论

=======================

发呆时,延伸一下

PS一种情况(其实是我的情况):如果以前用的是5级嵌套,现在想用2级无限嵌套,如果按上面的方法实现无限嵌套回复,就会出现一个情况

什么情况呢?就是以前2级以后的嵌套评论都排在2级评论下面,混乱的很,那如何解决呢?我稍微想了下,两个步骤解决:

1. 修改一下判断条件$depth == get_option('thread_comments_depth')
当$depth等于后台设置的嵌套最大层数(这里是5)时,用特殊的 reply 链接,可以改一下,改为 $depth == 2,也就是第2层使用特殊的 reply 链接

2. 因为设置了5层嵌套,第1步修改后第3、4层还是会出现 reply 链接,可以在style.cs加个css属性隐藏掉第3、4层的reply

ol.commentlist li ul.children li ul.children div.reply{display:none;}/*意思是第3级以后的reply链接隐藏不显示*/

(其实可以写个 if 语句根据 $depth 的值显示 reply,这样就不用设置css了。反正举一反三,一个目的可以多种方式实现)

OK,解决。

zww
or
oooo

“完美的WordPress无限嵌套回复方法”有160条评论

  1. roger says:

    可是我的主题functions.php找不到这句
    是不是在comments.php里? :sad:

    1. zwwooooo says:

      @roger 说明你的主题没用回调函数,自己加个吧参考我的主题(zSofa/zBench/zGrey...) http://zww.me/themes

    2. roger says:

      @zwwooooo

      好的
      不胜感激~ :smile:

  2. 淘宝网 says:

    我的functions.php 没有找到 $depth, 'max_depth' => $args['max_depth']))) ?> 这样的代码呀?

    1. zwwooooo says:

      @淘宝网 因为你的主题没有使用评论回调函数

    2. 淘宝网 says:

      @zwwooooo 那我该怎么办呀!还有我在functions.php文件随便找了一个地方添加进去,DW显示 <!-- 评论深度等于设置的最大深度 这一行包含一个语法错误!/哭

    3. zwwooooo says:

      @淘宝网 你要懂得wp主题结构才行,你先修改comments.php里面的回调函数名,然后在functions.php添加回调函数,具体要看你的主题,很难简单说明白

    4. lococ says:

      @zwwooooo
      :shock: 设置2层以后,下面的评论没有回复按钮

    5. zwwooooo says:

      @lococ
      WP的嵌套本来就是这样的,不然那么多人要折腾无限嵌套干嘛呢?

    6. 郑永 says:

      @zwwooooo
      试试能否回复到这层。

    7. 郑永 says:

      @zwwooooo

      zwwooooo: 你要懂得wp主题结构才行,你先修改comments.php里面的回调函数名,然后在functions.php添加回调函数,具体要看你的主题,很难简单说明白

      看看quote功能, 哈哈

  3. 安装VnstatVPS流量监控与伪无限嵌套 | 邪罗刹的菠萝阁 says:

    [...] 完美的WordPress无限嵌套回复方法 - http://zww.me/archives/25191 > 折腾:5级嵌套改为2级嵌套 & 主评论内悬浮显示 @ 评论 - [...]

  4. [...] 关于实现无限嵌套评论的方法,认真拜读zwwooooo的完美的WordPress无限嵌套回复方法,终于实现了无限嵌套评论 1. 去WP后台设置评论嵌套层数,设为2层 [...]

  5. 我的相关代码是这样的: 'div-comment','reply_text'=> ' ', 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>

    我修改成这样,但是回复的时候评论框并不会移到对应评论的下方,麻烦帮我看一下呢



    <a onclick="return addComment.moveForm( 'div-comment-','comment_parent; ?>', 'respond','comment_post_ID; ?>'" href="#comment-" class="comment-author-reply">


    <a onclick="return addComment.moveForm( 'div-comment-','', 'respond','comment_post_ID; ?>'" href="#comment-" class="comment-author-reply" >

  6. 晕,没用code

    源代码:

             'div-comment','reply_text'=> ' ', 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>

    修改后的:

        
     
        <a onclick="return addComment.moveForm( 'div-comment-','comment_parent; ?>', 'respond','comment_post_ID; ?>'" href="#comment-" class="comment-author-reply">
    
    
        <a onclick="return addComment.moveForm( 'div-comment-','', 'respond','comment_post_ID; ?>'" href="#comment-" class="comment-author-reply" >
    
  7. 用什么标签才能把代码框出来啊。。。

    1. zwwooooo says:

      @微奇生活
      自动转换代码格式的这个功能没有完善,每条评论code只能框一段

    2. zwwooooo says:

      @微奇生活
      》这个功能没有完善,每条评论只能一段代码用code框起来。
      》评论框不会移到回复的评论下面跟这个没关系,是你的js没加载

    3. @zwwooooo
      感谢指点,利用chrome的审查元素解决了 :smile:

    4. eksel says:

      @zwwooooo
      测试一下效果 :evil:

    5. Ian says:

      我是来测试效果的 :evil: @zwwooooo

  8. 解决了
    本来想请教一下的,直接一搜~done it

  9. [...] @ZWW:《完美的WordPress无限嵌套回复方法》 [...]

  10. xiao.z says:

    我这个主题好像也没有评论回调函数,应该怎么办?如何解决?希望能够得到解答啊,谢谢!~

    而且用了@USER,点回复时不出现。不知道我该如何处理?

  11. xiao.z says:

    OK,已经自行解决,- -##~

    感谢提供方法,呵呵!~ :lol:

  12. Uyghurbeg says:

    在维吾尔文的博客上这个方法没有通

    1. zwwooooo says:

      @Uyghurbeg
      跟语言没关系。

  13. zhee says:

    请教一下您的留言框上面表情图标以及留言框里面代码标签是怎么做出来的啊?盼望回复谢谢!

    1. zwwooooo says:

      @zhee
      表情是用willin的代码方式 》 http://kan.willin.org/?p=1268

      代码标签就无法提供了,这是我自用版本,懒得去整理。

  14. Dragon says:

    我找了一下,在3.2.1版中找不到
    comment_reply_link這段

  15. 小闇 says:

    請教下,替代原有comment_reply_link()的那行代碼其實是要即使在只設了兩層嵌套時其餘的樓層也會帶有回覆按鈕吧?comment_reply_link()我是找到並替換了不過3456樓還沒有回覆按鈕…我不太知道我在哪兒出了問題。之前設定無限嵌套時評論循環中的max_depth=1000都已經去掉了可是效果還是沒有反映出來…(其實這人已經混亂了 :arrow:

    1. zwwooooo says:

      @小闇
      wp后台的评论设置你开了多少?好像你搞定了……

    2. 小闇 says:

      @zwwooooo
      我是在本地測試的呀…

    3. zwwooooo says:

      @小闇
      这……原始的WP + 你的主题试试,这个只是链接,不会受到wp函数限制

  16. 一堵墙 says:

    不错不错这个要学习下

  17. peascloud says:

    解决了因为嵌套过多导致的评论框变形。有一个高手

    1. zwwooooo says:

      @peascloud
      这个还是很有用的,特别是评论中突然讨论起来时。

  18. 有点复杂,我最终还是选择了两层嵌套。

    1. zwwooooo says:

      @开心软件园
      需要才去折腾。

  19. 郑永 says:

    兄弟,还是搜索到你这里来,之前的问题迎刃而解了! 这个原理正如我说的,哈哈。

    1. zwwooooo says:

      @郑永
      呃,我一路回复上来才看到你这条评论,刚才的白说了。。。

  20. 郑永 says:

    <a onclick="return addComment.moveForm( 'div-comment-','comment_parent; ?>', 'respond','comment_post_ID; ?>'" href="#comment-" class="comment-author-reply">

    <a onclick="return addComment.moveForm( 'div-comment-','', 'respond','comment_post_ID; ?>'" href="#comment-" class="comment-author-reply" >
    哈哈,测试下代码。 这里成了测试平台。

    1. zwwooooo says:

      @郑永
      代码你应该点 code 按钮括住

回复给 zwwooooo ¬
取消回复

昵称 *

网址

B em del U Link Code Quote