WordPress Ajax 评论分页

时间：2012年5月17日分类：JavaScript , WordPress 标签：Ajax‚ jQuery‚ WordPress‚ 分页‚ 评论评论：92

在之前的文章中， Kayo 曾经介绍过如何在 WordPress 中实现 Ajax 文章列表分页，这里我再把 Ajax 在 WordPress 中的应用拓展一下——实现评论列表的分页。在评论较多的文章中，如果评论没有分页，文章页面往往显得过长，但如果使用 WordPress 自带的分页，这样在获取下一页评论时又要刷新整个页面，于是 Ajax 的评论分页便显得更具用户体验了，具体的效果可以看看本博的评论部分（建议可以到“关于”页面）。实现 Ajax 评论分页并不困难，网上也有很多相关的插件，但是 Kayo 还是喜欢使用代码实现，为了一个小功能加载插件实在有点浪费，下面详细介绍一下 Ajax 评论分页的实现过程。

一.准备

加载 jQuery 库，这个不解释了。

二.开启 WordPress 评论分页

打开 WordPress 后台 - 设置 - 讨论，在“其他评论设置”中勾选分页显示评论，设置一下评论数目，这里的评论数目仅计算主评论，回复评论不作计算。这里 Kayo 填了比较大的数字（15），因为评论分页分得太细会使用户不便于阅读之前的评论。

在后台开启评论分页后，在 comments.php 中需要添加分页导航的地方加入以下代码（如主题中有类似代码则无须再添加，另外代码中的 nav 标签为 HTML5 标签，若主题没有使用 HTML5 则有 div 代替即可。）

<nav id="comments-navi">
<?php paginate_comments_links('prev_text=«&next_text=»');?>
</nav>

三.评论分页的 SEO

从 SEO 的角度看，评论分页会造成重复内容（分页的内容正文都一样，并且 keywords 和 description 也相同），这样对于评论很多的博客很容易因为重复内容太多而降权，因此需要在 SEO 方面作出一些处理，最为方便有效的方法是使用 meta 标签。在你的 header.php 原有的 meta 标签下加入以下代码，这样分页的页面便会禁止被搜索引擎收录，防止内容重复。

<?php if( is_single() || is_page() ) {
if( function_exists('get_query_var') ) {
$cpage = intval(get_query_var('cpage'));
$commentPage = intval(get_query_var('comment-page'));
}
if( !empty($cpage) || !empty($commentPage) ) {
echo '<meta name="robots" content="noindex, nofollow" />';
echo "\n";
}
}
?>

四.Ajax 评论

根据上文所述，现在主题中已经有评论分页了，要做到 Ajax 的评论分页，只需 JavaScript 的配合，不过在这之前首先要在评论列表前加入一个元素，用于在显示新一页评论列表时表示列表正在加载。假设主题模板 comments.php 的评论模块结构如下：

<div class="comments">
<h3 id="comments-list-title">Comments</h3>
<!-- 显示正在加载新评论 -->
<div id="loading-comments"><span>Loading...</span></div>
<!-- 评论列表 -->
<ol class="comment_list">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
<!-- 评论分页导航 -->
<nav id="comments-navi">
<a class="prev page-numbers" href="#">1</a>
...
</nav>
</div>

在你的 js 文件中加入以下 js 代码实现评论分页

// 评论分页
$body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');
// 点击分页导航链接时触发分页
$('#comments-navi a').live('click', function(e){
e.preventDefault();
$.ajax({
type: "GET",
url: $(this).attr('href'),
beforeSend: function(){
$('#comments-navi').remove();
$('.comment_list').remove();
$('#loading-comments').slideDown();
$body.animate({scrollTop: $('#comments-list-title').offset().top - 65}, 800 );
},
dataType: "html",
success: function(out){
result = $(out).find('.comment_list');
nextlink = $(out).find('#comments-navi');
$('#loading-comments').slideUp('fast');
$('#loading-comments').after(result.fadeIn(500));
$('.comment_list').after(nextlink);
}
});
});

加载条的 css （本博 css ，仅供参考）

#loading-comments {display: none; width: 100%; height: 45px; background: #a0d536; text-align: center; color: #fff; font-size: 22px; line-height: 45px; }

本文由 Kayo Lee 发表，本文链接：https://kayosite.com/ajax-turn-page-for-wordpress-comments-list.html

你可能也喜欢

评论列表

独自流浪
2012-5-18 2:21 回复

把数据又恢复过来了？刚才登录还被黑着
- Kayo
  2012-5-18 2:24 回复
  
  @独自流浪不是噢，刚才是我自己把WP重装一遍了！我把cloudflare的安全级别调到最高了，现在进入需要验证浏览器！
  - 独自流浪
    2012-5-18 2:27 回复
    
    @Kayo 我觉得被黑和cloudflare没关系，虽然现在你的真实IP被隐藏起来了，但是攻击者已经得到过你的真实IP，所以前端代理这样的IP防御意义不大。检查WP的文件、插件以及Cpanel面板里面的各种文件吧。还有对于777权限的目录也要检查，有可能是从某个薄弱处提权的。你平时还有一些小作品，那些也检查一下。查看系统日志。
    找缘由很麻烦，很费神~曾经也被黑过，但那个时候是主机供应商面板系统的漏洞。自己没办法解决。
    - Kayo
      2012-5-18 2:36 回复
      
      @独自流浪其实我这样是为了避免有新的攻击者得到我的ip，因为这三天都被攻击而且是不同的人攻击，所以设置cloudflare，起码新的攻击者不会那么容易得到我的ip！
      还是头一次被攻击，攻击的人就改一下首页，也没做什么其他的，我想不出他们的用意啊！
      - 独自流浪
        2012-5-18 2:37 回复
        
        @Kayo 知道攻击者的IP都来自哪里吗？这种类型的攻击，通常都不是有目的的，只是刚好网络扫描，发现了你而已
        
        Kayo
        2012-5-18 2:42 回复
        
        @独自流浪 Q上聊一会！
  - 土木坛子
    2012-5-18 3:56 回复
    
    @Kayo 我个人的经验认为，你用的CloudFlare对防攻击本身是没有什么作用的。
    
    重装博客程序时，如果数据库还用原来的可能问题照旧，因为数据库被植入了黑客的数据——而博主很难发现，这个问题可以用博客后台的导出XML文件方式备份，完全重装后再导入博文和评论。
    
    还有一个问题可能是你的主题有漏洞。
    
    最主要我认为还是要用XML的方式备份，这个比较保险。
    - Kayo
      2012-5-18 18:46 回复
      
      @土木坛子嗯，谢谢你的建议噢。辛亏我除了数据库和主文件备份，也一直有导出xml备份的习惯。
      今天我用Clean Options插件检测了options表，清除了不少数据，今晚看看情况吧！
随心
2012-5-18 17:49 回复

呃我最烦代码了，喜欢插件。
- Kayo
  2012-5-18 18:47 回复
  
  @随心哈哈，我刚好倒过来，能自己写代码就自己写代码，不过这类插件已经有很多了，可以在网上搜搜！
本小明
2012-5-18 20:01 回复

本来想说：抱走。但是想起来我现在是用多说插件，先马克一下，下次做主题加上
- Kayo
  2012-5-18 23:38 回复
  
  @本小明话说多说的效果也就是Ajax分页的
一堵墙
2012-5-18 21:44 回复

好吧，大段大段的代码
- Kayo
  2012-5-18 23:34 回复
  
  @一堵墙实现Ajax，代码才是关键嘛！
沫
2012-5-19 8:56 回复

已經實現雖然不完美但是還是挺給力的~
- Kayo
  2012-5-19 15:26 回复
  
  @沫嗯嗯，看到效果了，速度很快呢！
zwwooooo
2012-5-21 0:20 回复

你这个方法比较方便，我使用的是局部调用。
- Kayo
  2012-5-21 22:11 回复
  
  @zwwooooo 局部调用的效率更高吧，只是实现起来得折腾一下！
调皮鬼
2012-5-24 20:32 回复

我曾经灰常想把它搞一下，可惜，没那么多时间和精力，加上我的代码是越来越烂，所以懒得搞咯，直接用多说了。如果老K有爱，回头帮我搞一下吧。哈哈
- Kayo
  2012-5-24 22:37 回复
  
  @调皮鬼行，话说我是小k啦，突然就老了！
  不过你现在用的多说评论，自带就是Ajax评论分页了！
airoschou
2012-6-04 9:52 回复

哎，评论数很少的可怜博客更本用不到这个功能。。。
- Kayo
  2012-6-05 14:22 回复
  
  @airoschou 其实我觉得分页这功能还是留给留言板这类评论很多的页面用比较好，因此我把每页的评论数弄得比较大，一般的文章页就不会产生评论分页了！
海晓
2012-6-11 13:16 回复

这样做,搜索引擎应该抓取不到吧?
- Kayo
  2012-6-11 20:23 回复
  
  @海晓评论分页只会令搜索引擎抓取更多的重复内容，所以应该用meta禁止搜索引擎抓取分页，反而不用担心抓取不到页面的！
Extreme
2012-6-21 23:34 回复

貌似很不错的样子，有时间再折腾，忙考试。。
- Kayo
  2012-6-22 0:14 回复
  
  @Extreme 哈哈，我也刚刚考完一科，考试加油噢！
小小孩
2012-7-07 23:19 回复

效果很好.谢谢了.!你这个网站很好看
- Kayo
  2012-7-10 14:19 回复
  
  @小小孩谢谢支持！
侯永禄
2012-8-28 12:25 回复

看了你的介绍，是不是你介绍的这种翻页网址也会发生变化的？
- Kayo
  2012-8-30 1:07 回复
  
  @侯永禄不会的，Ajax 的方式正有不改变url的特点！
  - 侯永禄
    2012-9-01 15:10 回复
    
    @Kayo 可是我想要的是能改变url的ajax，请问你知道怎么实现吗？
    - Kayo
      2012-9-03 3:16 回复
      
      @侯永禄如果这样的话，那为什么还要使用Ajax呢？Ajax是无刷新改变页面，这样的话根本就不会改变页面url，你可以直接使用js改变url啊，不过这方面我并没有深入研究，所以帮不了你了，抱歉！
      - 侯永禄
        2012-9-04 17:55 回复
        
        @Kayo 还是很谢谢你。
        
        Kayo
        2012-9-04 20:25 回复
        
        @侯永禄谢谢你的理解！
blues-the
2012-9-05 20:48 回复

获取不到返回值~！
- Kayo
  2012-9-05 23:11 回复
  
  @blues-the 哪个返回值？
  - blues-the
    2012-9-05 23:13 回复
    
    @Kayo
    ajax
    返回 object
    
    我弄了个接口解决了这个问题
一米
2012-9-10 10:03 回复

感觉这些个功能用的多了，还是想回到最初的简单的浏览，所以感觉这种功能还是要配合特别的设计才好。
- Kayo
  2012-9-10 17:06 回复
  
  @一米嗯嗯，用在评论多的网站，还有移动网站的话效果会不错的！
小白
2012-9-30 8:23 回复

为什么我的没有效果呢，按你的方法加的
- 小白
  2012-9-30 8:31 回复
  
  @小白额，原来是我的js加错地方了，但是现在点击了分页链接后，这一页的评论会消失但是下一页的不会出现，请问是怎么回事？
- 小白
  2012-9-30 8:31 回复
  
  @小白我是本地测试的
  - Kayo
    2012-10-01 17:59 回复
    
    @小白你有没有修改相应的选择器，或者你可以把测试的HTML和js发到我的邮箱让我看看！
    - Kayo
      2012-10-01 18:01 回复
      
      @Kayo 刚刚看到你的博客，原来已经加入了效果
      - 小白
        2012-10-02 7:07 回复
        
        @Kayo 嗯，原来是因为没有把loading元素加进去，汗这样也有关系不过这篇文章到时很不错，我支持啊
        
        Kayo
        2012-10-02 14:47 回复
        
        @小白原来是这样，新增元素是插入到loading后面的，所以木有loading元素就不行了！
        谢谢支持！
        
        小白
        2012-10-02 17:35 回复
        
        @Kayo 哈哈，接着整文章列表的ajax翻页~
        
        Kayo
        2012-10-02 18:20 回复
        
        @小白嗯，那个也很实用！

1 2 3 »