WordPress评论列表创新悬浮气泡：轻松显示父级评论

人亦已歌

WordPress评论列表创新悬浮气泡：轻松显示父级评论

注意，具体效果和你的弹出层样式有关系，以下代码仅为最简单的添加方法，我用的是自己写的popover脚本，实际效果有差异。

首先添加@回复, 下面的代码加到functions.php中

1. _filter('_text', 'comment_add_at_parent');
2. function comment_add_at_parent($comment_text) {
3. $comment_ID = get_comment_ID();
4. $comment = get_comment($comment_ID);
5. if ($comment->comment_parent) {
6. $parent_comment = get_comment($comment->comment_parent);
7. $comment_text = preg_replace('/ a href="#comment-([0-9]+)?".*? (.*?) \/a /i', '', $comment_text); //去除存在数据库里的@回复
8. $comment_text = '<a href="#comment-' . $comment->comment_parent . '" rel="nofollow" data-id="' . $comment->comment_parent . '"> @' . $parent_comment->comment_author . '</a>' . $comment_text;
9. }
10. return $comment_text;
11. }

复制代码

注意你的评论内容是否有id="#comment-12345"这样的div包裹，如果没有要自行在回调函数中加上。一般标准主题都是有这个的。

然后就是纯JS操作了, 加到你的js文件中。

1. jQuery(document).on("mouseenter", ".atreply",
2. function(e) {
3. e.preventDefault();
4. var __this = jQuery(this),
5. __id = __this.data('id'),
6. left = __this.offset().left,
7. top = __this.offset().top,
8. __html = jQuery('#comment-' + __id).html(),
9. content = '<div>' + __html + '</div>';
10. jQuery('body').append(content);
11. jQuery('.popover').css({
12. "left": (left - 15),
13. "top": (top + 15)
14. });
15. });
16. jQuery(document).on("mouseleave", ".atreply",
17. function(e) {
18. jQuery('.popover').remove();
19. });

复制代码

随便弄点css

1. .popover {
2. background-color: #fff;
3. border: 1px solid #eee;
4. position: absolute;
5. max-width: 300px;
6. padding: 10px;
7. }

复制代码