I’m qiqiboy !

关于WordPress的评论样式有两种：@悬浮和嵌套回复。

然而嵌套回复有一个问题，那就是嵌套的深度不可能无限嵌套下去，因为一般我们为了表现嵌套的视觉样式而选择让子回复向后缩进一段距离，所以随着嵌套深度的增大，子回复的宽度也就越来越小。

如右边图片所示，设置的深度过大的话，会造成最后这样的结果。

然而如果设置的允许嵌套深度太小，则会影响访客之间、访客与博主之间的交流，因为往往因为嵌套的深度到了就不能再继续回复了。

很久以前看到过此篇文章《JQuery为WordPress的嵌套回复添加@reply功能》，文中所讲方法也很简单，就是利用jQuery的 克隆功能（clone()）将最后一层的父级评论的回复按钮给copy到最后一层。这样一来，最后一层也会有回复按钮了，但是你点击此按钮，实际上是对倒数倒数第二层评论的回复。所有这些评论都会平级的嵌套在此父级评论下方。即对最后一层的回复都显示在最后一层的下方（不是嵌套，在同一级）。

利用此方法，你可以设置一个较小的嵌套深度，比如只允许嵌套两层，这样一来对第二层评论的回复其实都是对第一层的回复，因为第二层回复的按钮是从父级一层（第一层）克隆过来的。，所以就会顺序排列在第一层回复下方了。如下图效果：

但是这个方法也有一个问题，那就是当我点击克隆过来的恢复按钮时，回复框（评论框）并不是在我点击的评论下方，而是都跑到父一级评论下方，比如我要回复上面图片中的Nomessi，我点击他右边的回复按钮，按理说回复框应该在Nomessi下方，但是实际上却会跑到阿修的下方，这样就会造成误扰。如下图：

为什么会这样呢？

我们看一下回复按钮这个对象的HTML代码：

<a onclick="return addComment.moveForm(&quot;comment-10515&quot;, &quot;10515&quot;, &quot;respond&quot;, &quot;1099&quot;)"

href="/wordpress/add-reply-function-in-wordpress-thread-comment-with-jquery.html?replytocom=10515#respond" class="comment-reply-link"

rel="nofollow" target="_blank">回复</a>

所以当点击回复按钮时就会调用addComment.moveForm这个JavaScript函数，他有四个参数，分别是

comment-Id：要回复的评论对象所在div的id值

id：要回复的评论的编号id

'respond'：固定值

'post-id'：即当前评论所属的文章的编号id

评论框在哪个位置，是看第一个参数，即要回复的评论的html的ID参数值，我们利用jQuery从父一级克隆过来按钮，所以此值还是父级评论的ID值，所以当点击恢复按钮时，评论框就会跑到父级下方了。

而如果能将此参数改成真正要回复的评论的ID，就可解决评论框跑偏的问题了。利用jQuery，这个一点也不难。

但是，第二个参数一定要是父级评论的ID，这个是设置回复的评论跟在哪一级评论下方的。我们的回复都是要跟在父级下方，所以不能搞错。

至此，这个用jQuery的方法也可以用jQuery给解决了。

但是这个方法需要jQuery，大家都知道，这玩意100来KB呢，并不是每个人都喜欢jQuery，并不是所有的平台都能处理jQuery那么大的函数库，例如一些手机浏览器，对载入jQuery的网页解析尤其费力。我知道的是挪鸡鸭的S60系统自带的浏览器就无法处理jQuery（JavaScript可以）。

所以，解决嵌套深度的问题还有一种方法。此方法是我在制作新主题时无意间想到的，不知道有没有同学想到类似的。这个方法适用于回调自定义评论函数的主题。

此方法无需任何脚本js支持。

一般的评论回调函数，回复按钮都是利用默认函数

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

生成的。

但其实通过上面我们查看实际生成的HTML代码，它就是调用了一个js函数，所以我们可以直接将HTML代码写过来。

<?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="#comment-<?php comment_ID() ?>" class="comment-reply-link">回复</a>

<?php else: ?>

<!-- 正常情况 -->

    <a onclick="return addComment.moveForm( 'comment-<?php comment_ID() ?>','<?php comment_ID() ?>', 'respond','<?php echo $comment->comment_post_ID; ?>'" href="#comment-<?php comment_ID() ?>" class="comment-reply-link >回复</a>

<?php endif; ?>

用这个代码替换默认的代码即可。这样就从根本上解决了嵌套的问题。效果如下，天蓝色线条就是最后一层回复了，对最后一层的评论回复，评论框正常出现在对应评论下方。

这篇文章写太长咯，关于这段代码的解释等新主题上线后再写。还有如何评论框添加@XXX、评论添加引用quote按钮等。都是有关JavaScript的，非jQuery。

上面那张图是我的最新主题的评论样式，可以看到有回复，有引用，有自动添加@XXX等，都是原生js实现的。