给WP加上无限分页

这里要用到的这个JQ插件是由Paul Irish写的.名字叫:Infinite Scroll

PS:其实这个JQ 插件的官网也有专门为WP准备的插件下载,插件我就不介绍下,介绍DIY方法.

第一步:添加js

把下载版的jquery.infinitescroll.min.js 放到主题的js目录下面,然后就在footer.php的

1
</body>

前加上:
(其实在加在哪里无所谓,关键是要在你的JQ加载代码之后.)

注意根据你自己的模板修改:
nextSelector 页面导航链接的选择器
navSelector 页面导航的选择器
itemSelector 日志的选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php if( is_archive() || is_home() || is_category() ) :?>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.infinitescroll.min.js.php"></script>

jQuery(document).ready(function($) {
    stylesheet_uri = $("link[rel='stylesheet']:eq(0)").attr("href").split("/");
    stylesheet_uri.length--;

   
    $('#content').infinitescroll(
    {    

                          debug           : false,
                          preload         : true,
                          nextSelector    : "div.postnav a:first",
                          loadingImg      : stylesheet_uri.join("/") + "/images/ajax-loader.gif",
                          loadingText     : "<em>加载中...</em>",
                          donetext        : "<em>后面没有啦.</em>",
                          navSelector     : "div.postnav",
                          contentSelector : null,           // not really a selector. :) it's whatever the method was called on..
                          extraScrollPx   : 250,
                          itemSelector    : "div.post",
                          animate         : false,
                          localMode      : false,
                          bufferPx        : 40,
                          errorCallback   : function(){}
 

});
   
});

    </script>

<?php endif;?>

第二步:修改模板
分别修改index.php , archive.php , 在适当的地方加上:

1
2
3
4
5
6
    <div class="postnav">
    <ul>
    <li><?php next_posts_link('Older Entries'); ?>&nbsp;</li>
    <li><?php previous_posts_link('Newer Entries'); ?>&nbsp;</li>
    </ul>
    </div>

效果就是现在我博客这样了.

TODO:
添加数字分页显示和无限分页之间的切换功能. (有时间再做)
本文相关文件下载:


加载中图片下载:
ajax loader

喜欢这篇文章吗?

请订阅本站 RSS feed填写您的邮件地址,订阅我们的精彩内容:

随机日志

回复 (23)

  1. 皇家元林  / 回复

    这是自动显示分页啊,如果手动的,点击一个按钮,出现分页,怎么弄

  2. wmtimes  / 回复

    这个得学习一下。不会创作,会学习就行。

  3. Melody  / 回复

    话说,那个js在哪里?只看到了php啊 :oops: :oops:

  4. 米波  / 回复

    不错 :oops:

  5. shuai.ws  / 回复

    写得很复杂的了

  6. 海天  / 回复

    那这样的话 蜘蛛看到的是几页呢?

  7. blueandhack  / 回复

    我找了好久~~,winy的我没看见~

  8. blueandhack  / 回复

    此文章珍藏~~

  9. 路人甲  / 回复

    :?: 不知掉博主或其他人遇到这种情况没有?IE下LOADING后就说已经到最后了,就是不显示页面。firefox/chrome是正常的~~希望博主能指点一二,谢谢:)

    • 荒野无灯  / 回复

      目前我在IE6下测试是正常的,不知道你用的是哪个版本的IE6…
      目前IE6已经。。。。呃,OUT 了。 :lol:

  10. 路人甲  / 回复

    ie就是不滚动……到底问题出在哪咧,折腾1个多小时了~~

  11. 路人甲  / 回复

    :cry: firefox chrome 都可以,就是ie不行~~~~不知道为什么,郁闷啊

  12. robbie  / 回复

    期待 切换功能~~ :grin:

  13. 皇家元林  / 回复

    这个很酷啊,,记录一下,,,以后会用到的

  14. Leyond  / 回复

    呵呵,回来了,我也从家里回来。这个教程不错

  15. 学夫子  / 回复

    我这个用emlog的就飘过啦,呵呵

  16. Dianso  / 回复

    加载的有点慢

  17. winy  / 回复

    这个我很早就写过啦 :razz: 用了很久了

  18. Jinwen  / 回复

    有时间我也折腾一下这个 :razz:

  19. 万戈  / 回复

    这个帅啊,像一些微博一样,这应该算是ajax吧?

    • 荒野无灯  / 回复

      其实它就是用了JQ的load功能,只不过加了一些其它的代码,适用于WP等博客程序.

发表评论 修改评论取消编辑

允许使用的标签 - 您可以在评论中使用如下的 HTML 标签以及属性。

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 :wink:  :-|  :-x  :twisted:  :)  8-O  :(  :roll:  :-P  :oops:  :-o  :mrgreen:  :lol:  :idea:  :-D  :evil:  :cry:  8)  :arrow:  :-?  :?:  :!:

引用通告 (1)

  1. 12:32 下午, 2010年11月3日Favicon of surda.cn为WP加上AJAX评论、无限分页
开灯