jQuery Ajax 分页 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

你可能也喜欢

评论列表

  • 评论者头像
    回复

    很想折騰這個 但是 讀完后 發現 真的好難
    暈 CSS還好點
    JS是死活弄不懂
    悲催啊

    • 评论者头像
      回复

      @沫 根据文章练习一下就好，Ajax 相对来说是比较复杂，要多多折腾噢！

      • 评论者头像
        回复

        @Kayo
        你Q多少 加下 请教点问题呗
        嘿嘿

      • 评论者头像
        回复

        请教一下用了:四.Ajax 获取下一页
        之后，每次loading之后文章都出现在第一篇的下面，而不是接着首页文章最后面显示？
        如
        index.php
        文章1
        2
        3
        4
        read more《—点击之后如下：
        文章1
        5
        6
        7
        8
        2
        3
        4
        求大牛指点。。。

        • 评论者头像
          回复

          @test 你也应该填一下网址让我知道你的网站html结构吧！
          上文的js里是$(“#content”).append(result.fadeIn(300));这一句控制插入新内容的，你根据你的网站里的html结构修改一下吧！

          • 评论者头像
            回复

            @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;
            });

          • 评论者头像
            回复

            @Kayo
            kayo大哥有邮箱么，我发给你看下，感谢了

            • 评论者头像
              回复

              @test 不好意思，现在才回复你，我的邮箱是330956999@qq.com

  • 评论者头像
    回复

    只懂复制，不懂写，这个原来主题里实现过，现在懒得折腾了。 :mrgreen:

  • 评论者头像
    回复

    成功了….
    不过不知道为什麽..
    那个CSS实现不了… :-?

    • 评论者头像
      回复

      @kkstx
      实现了
      ~~GOOD~~GREAT~~NICE~~PERFECT~~WONDERFUL~~AMAZING~~FANTASTIC~~

      • 评论者头像
        回复

        @kkstx 嗯嗯，看到你的博客的效果了，果断感受一下Ajax的魅力！

  • 评论者头像
    回复

    那个发现在IE下不能实现…IE9也是

  • 评论者头像
    回复

    额，我想搞那种有 上一页 1 2 3 4 5 6 下一页 的这种，怎么搞啊

    • 评论者头像
      回复

      @小白 这种导航直接谷歌“WordPress 分页导航”就有正解了！貌似这个回复迟了，希望仍对你有帮助。

      • 评论者头像
        回复

        @Kayo 不是，我是说，现在这种导航的基础上建ajax分页切换，但是你这个只有“下一页”的ajax…

        • 评论者头像
          回复

          @小白 抱歉噢，误会了！
          关于这种分页 ajax 导航，的确没有什么相关说明。不过这种导航的思路跟“下一页”ajax是相似的，只是你在获取新页面内容时，同时获取新页面中的导航部分，然后ajax删除本页的导航条，再插入新导航。

  • 评论者头像
    回复

    不好意思 我刚才右键查看了一下你的网页源码 自己折腾明白了

    • 评论者头像
      回复

      @刘荣焕 赞一个:wink:
      Ps.建议还是弄一个Gravatar头像会比较好，不然评论很容易被 akismet 拦截了。

  • 评论者头像
    回复

    ajax以后最好点击文章标题链接什么的在新的窗口打开 这样子就避免了需要点击返回的情况

    • 评论者头像
      回复

      @刘荣焕 文章标题链接是站内链接，并且与当前分页页面有一种从属的关系，我还是比较习惯这类链接都不使用新窗口/标签弹出，直接在当前标签打开就好了。

  • 评论者头像
    回复

    主题index.php和Archive.php没有那样的格式……
    都是while( have_post();)the_post();
    是3.8的TwentyFourteen主题

  • 评论者头像
    回复

    博主的教程通俗易懂，能否再谢谢全站ajax啊？

    • 评论者头像
      回复

      @有点蓝 整站ajax实现需要考虑好通用的ajax通讯模板，包括前后台接口都与普通后台不一样，实现比较费时，暂时应该不会做这方面的研究了！

      • 评论者头像
        回复

        @Kayo 楼主方便帮我测试下，我的首页实现AJAX了吗？ 我自己这边没什么感觉呢。

  • 评论者头像
    回复

    为什么我的网站伪静态化的时候就没有效果呢？

    • 评论者头像
      回复

      @TAOTAO 终于让我搞好了，原来是 url: $(this).attr(“href”) + “#content”这段代码的问题，在参考你别一篇文章后改成url: $(“#pagination a”).attr(“href”)就好了。哈哈，

      • 评论者头像
        回复

        @TAOTAO 是的，代码需要根据自己的模板修改，一般是不能直接套用，毕竟每个主题会有一些差异！

  • 评论者头像
    回复

    @Kayo 遇到一个新问题，就是使用“滚动触发翻页”时会无限循环加载，每一次滚动到底部都会加载一次，，，忧伤啊

  • 评论者头像
    回复

    测试一下！

  • 评论者头像
    回复

    如果使用主循环调用日志标题列表，可以用这个 Ajax 分页方法吗？

  • 评论者头像
    回复

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

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

    ID; ?>
    。。。。此处是文章展示内容。。。。

  • 评论者头像
    回复

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

    多谢啦！！！！

1 2

回复

你正在以游客身份访问网站，请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O