jQuery Ajax 分页 WordPress 版

时间：2012年1月27日分类：JavaScript , WordPress 标签：Ajax‚ jQuery‚ WordPress‚ 分页评论：44

在新年前 Kayo 写了一篇文章介绍瀑布流布局及通用的网站 Ajax 分页方法，现在再介绍一下针对 WordPress 的 Ajax 分页。

Ajax 分页的原理就不在这里介绍了，有兴趣的童鞋可以参考《瀑布流布局与 jQuery Ajax 分页》，下面开始介绍 Ajax 分页 WordPress 版。

一.加载 jQuery 库

既然是 jQuery 驱动的 Ajax ，加载 jQuery 库是必须的。

二.文章列表格式

在你的文章列表页面（首页 index.php、归档 archive.php ）需要确保有以下类似的结构

<!-- 包含所有文章的容器 -->
<div id="content">
    <!-- 各文章的容器 -->
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
</div>

三.加入默认导航

因为 Ajax 分页每次获取的是下一页的内容，因此只需调用 WordPress 的默认导航。在你的 index.php （或是其他文章列表页面）加入以下代码，生成默认的 WordPress 导航。

<div id="pagination"><?php next_posts_link(__('LOAD MORE')); ?></div>

四.Ajax 获取下一页

在你的主题 js 文件里加入以下代码

// 使用 live() 使 js 对通过 Ajax 获得的新内容仍有效
$("#pagination a").live("click", function(){
    $(this).addClass("loading").text("LOADING...");
    $.ajax({
        type: "POST",
        url: $(this).attr("href") + "#content",
        success: function(data){
            result = $(data).find("#content .post");
            nextHref = $(data).find("#pagination a").attr("href");
            // 渐显新内容
            $("#content").append(result.fadeIn(300));
            $("#pagination a").removeClass("loading").text("LOAD MORE");
            if ( nextHref != undefined ) {
                $("#pagination a").attr("href", nextHref);
            } else {
            // 若没有链接，即为最后一页，则移除导航
                $("#pagination").remove();
            }
        }
    });
    return false;
});

五.滚动触发翻页

如果想当鼠标滚动到接近页面底部时自动翻页，则可以把代码改成下面的样式

// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
// 判断窗口的滚动条是否接近页面底部
if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
    $(this).addClass('loading').text('LOADING...');
    $.ajax({
        type: "POST",
        url: $(this).attr("href") + "#content",
        success: function(data){
            result = $(data).find("#content .post");
            nextHref = $(data).find("#pagination a").attr("href");
            // 渐显新内容
            $("#content").append(result.fadeIn(300));
            $("#pagination a").removeClass("loading").text("LOAD MORE");
            if ( nextHref != undefined ) {
                $("#pagination a").attr("href", nextHref);
            } else {
            // 若没有链接，即为最后一页，则移除导航
                $("#pagination").remove();
            }
        }
    });
}
});

六.添加导航 css

为导航添加一段 css 美化一下，另外还可以准备一张 gif 图来表示正在加载，下面是 Melody 的样式：

#pagination {padding: 20px 0 0 30px; }
#pagination .nextpostslink {width: 600px; color: #333; text-decoration: none; display: block; padding: 9px 0; text-align: center; font-size: 14px; }
#pagination .nextpostslink:hover {background-color: #cccccc; text-decoration: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#pagination .loading {background: url("images/loading.gif") 240px 9px no-repeat; color: #555; }
#pagination .loading:hover {background-color: transparent; cursor: default; }

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

你可能也喜欢

评论列表

沫
2012-1-30 11:07 回复

很想折騰這個但是讀完后發現真的好難
暈 CSS還好點
JS是死活弄不懂
悲催啊
- Kayo
  2012-1-31 0:41 回复
  
  @沫根据文章练习一下就好，Ajax 相对来说是比较复杂，要多多折腾噢！
  - 沫
    2012-1-31 1:05 回复
    
    @Kayo
    你Q多少加下请教点问题呗
    嘿嘿
    - Kayo
      2012-2-04 23:35 回复
      
      @沫原来你是若水兄，换名字了
  - test
    2012-4-05 16:08 回复
    
    请教一下用了:四.Ajax 获取下一页
    之后，每次loading之后文章都出现在第一篇的下面，而不是接着首页文章最后面显示？
    如
    index.php
    文章1
    2
    3
    4
    read more《—点击之后如下：
    文章1
    5
    6
    7
    8
    2
    3
    4
    求大牛指点。。。
    - Kayo
      2012-4-05 19:47 回复
      
      @test 你也应该填一下网址让我知道你的网站html结构吧！
      上文的js里是$(“#content”).append(result.fadeIn(300));这一句控制插入新内容的，你根据你的网站里的html结构修改一下吧！
      - test
        2012-4-05 21:32 回复
        
        @Kayo
        感谢Kayo回复，我是在本地测试的，结构很简单，如下：
        
        <a href="”>
        post_content)), 0, 260, “…”); ?>
        @ 共人围观条评论
        
        $(“#pagination a”).live(“click”, function(){
        $(this).addClass(“loading”).text(“loading..”);
        $.ajax({
        type: “POST”,
        url: $(this).attr(“href”) + “#timeline”,
        success: function(data){
        result = $(data).find(“#timeline .list_text”);
        nextHref = $(data).find(“#pagination a”).attr(“href”);
        // 渐显新内容
        $(“#timeline”).append(result.fadeIn(1000));
        $(“#pagination a”).removeClass(“loading”).text(“更多”);
        if ( nextHref != undefined ) {
        $(“#pagination a”).attr(“href”, nextHref);
        
        } else {
        // 若没有链接，即为最后一页，则移除导航
        $(“#pagination”).remove();
        }
        }
        });
        return false;
        });
      - test
        2012-4-05 21:34 回复
        
        @Kayo
        kayo大哥有邮箱么，我发给你看下，感谢了
        
        Kayo
        2012-4-07 21:04 回复
        
        @test 不好意思，现在才回复你，我的邮箱是330956999@qq.com
小呆
2012-2-11 19:18 回复

只懂复制，不懂写，这个原来主题里实现过，现在懒得折腾了。
kkstx
2012-4-21 16:03 回复

成功了….
不过不知道为什麽..
那个CSS实现不了…
- kkstx
  2012-4-21 21:15 回复
  
  @kkstx
  实现了
  ~~GOOD~~GREAT~~NICE~~PERFECT~~WONDERFUL~~AMAZING~~FANTASTIC~~
  - Kayo
    2012-4-21 21:39 回复
    
    @kkstx 嗯嗯，看到你的博客的效果了，果断感受一下Ajax的魅力！
    - kkStx
      2012-4-21 23:51 回复
      
      @Kayo 都是大神你功劳呀…做福了我们~~
kkstx
2012-4-30 16:51 回复

那个发现在IE下不能实现…IE9也是
- Kayo
  2012-4-30 17:04 回复
  
  @kkstx 你用的是旧版的jQuery吧？换个1.7.2完美兼容所有浏览器！
  - kkstx
    2012-4-30 17:18 回复
    
    @Kayo 解決了
小白
2012-10-03 19:14 回复

额，我想搞那种有上一页 1 2 3 4 5 6 下一页的这种，怎么搞啊
- Kayo
  2012-10-10 20:19 回复
  
  @小白这种导航直接谷歌“WordPress 分页导航”就有正解了！貌似这个回复迟了，希望仍对你有帮助。
  - 小白
    2012-10-10 21:18 回复
    
    @Kayo 不是，我是说，现在这种导航的基础上建ajax分页切换，但是你这个只有“下一页”的ajax…
    - Kayo
      2012-10-11 1:51 回复
      
      @小白抱歉噢，误会了！
      关于这种分页 ajax 导航，的确没有什么相关说明。不过这种导航的思路跟“下一页”ajax是相似的，只是你在获取新页面内容时，同时获取新页面中的导航部分，然后ajax删除本页的导航条，再插入新导航。
刘荣焕
2013-3-13 8:51 回复

不好意思我刚才右键查看了一下你的网页源码自己折腾明白了
- Kayo
  2013-3-19 0:54 回复
  
  @刘荣焕赞一个:wink:
  Ps.建议还是弄一个Gravatar头像会比较好，不然评论很容易被 akismet 拦截了。
刘荣焕
2013-3-29 15:41 回复

ajax以后最好点击文章标题链接什么的在新的窗口打开这样子就避免了需要点击返回的情况
- Kayo
  2013-3-30 20:41 回复
  
  @刘荣焕文章标题链接是站内链接，并且与当前分页页面有一种从属的关系，我还是比较习惯这类链接都不使用新窗口/标签弹出，直接在当前标签打开就好了。
Youth.霖
2013-12-17 18:13 回复

主题index.php和Archive.php没有那样的格式……
都是while( have_post();)the_post();
是3.8的TwentyFourteen主题
有点蓝
2013-12-26 10:19 回复

博主的教程通俗易懂，能否再谢谢全站ajax啊？
- Kayo
  2013-12-27 13:47 回复
  
  @有点蓝整站ajax实现需要考虑好通用的ajax通讯模板，包括前后台接口都与普通后台不一样，实现比较费时，暂时应该不会做这方面的研究了！
  - 有点蓝
    2013-12-27 16:08 回复
    
    @Kayo 楼主方便帮我测试下，我的首页实现AJAX了吗？我自己这边没什么感觉呢。
    - Kayo
      2013-12-30 0:30 回复
      
      @有点蓝首页的 Ajax 是实现了，速度很不错！
      - 有点蓝
        2013-12-30 9:09 回复
        
        @Kayo
        哈哈太好了，就是效果不太明显。不够酷哈哈。
TAOTAO
2013-12-29 0:58 回复

为什么我的网站伪静态化的时候就没有效果呢？
- TAOTAO
  2013-12-29 1:12 回复
  
  @TAOTAO 终于让我搞好了，原来是 url: $(this).attr(“href”) + “#content”这段代码的问题，在参考你别一篇文章后改成url: $(“#pagination a”).attr(“href”)就好了。哈哈，
  - Kayo
    2013-12-30 0:31 回复
    
    @TAOTAO 是的，代码需要根据自己的模板修改，一般是不能直接套用，毕竟每个主题会有一些差异！
TAOTAO
2013-12-30 11:13 回复

@Kayo 遇到一个新问题，就是使用“滚动触发翻页”时会无限循环加载，每一次滚动到底部都会加载一次，，，忧伤啊
email
2014-2-08 11:42 回复

测试一下！
- email
  2014-2-08 11:43 回复
  
  @email 测试回复！
vig
2014-2-18 19:18 回复

如果使用主循环调用日志标题列表，可以用这个 Ajax 分页方法吗？
Telntt
2014-3-21 10:44 回复

博主非常感谢你的文章，加载时实现了！可以首页主题不能翻页(地址栏变了，链接也变了，内容没有变！)所以一直就是循环加载之前的内容！加载不到新文章！可能主题问题，不知道博主有解决方法吗？
index.php内容如下：“

”
++++++++++++++++++++++++++
其中new.p.php是，
开始如下，

ID; ?>
。。。。此处是文章展示内容。。。。
ooll
2014-7-11 20:43 回复

hi,研究好久也没有实现，在火狐firebug下，总是，，显示红色post undefined ，状态 404，地址显示localhost/page/undefined。代码和您的一样，选择器也是，不知道有其他哪些可能会导致得不到分页页码呢？

多谢啦！！！！

1 2 »