jQuery Ajax 分页 WordPress 版

在新年前 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 发表,本文链接:http://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 遇到一个新问题,就是使用“滚动触发翻页”时会无限循环加载,每一次滚动到底部都会加载一次,,,忧伤啊

  • 评论者头像
    回复

    测试一下!

1 2

回复

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