这里要用到的这个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'); ?> </li> <li><?php previous_posts_link('Newer Entries'); ?> </li> </ul> </div> |
效果就是现在我博客这样了.
TODO:
添加数字分页显示和无限分页之间的切换功能. (有时间再做)
本文相关文件下载:
jquery.infinitescroll.min.js.php 下载 (4.4 KB, 72 次)
加载中图片下载:
喜欢这篇文章吗?
请订阅本站 RSS feed 或





10:39 上午, 2011年11月25日皇家元林 /
这是自动显示分页啊,如果手动的,点击一个按钮,出现分页,怎么弄
11:27 下午, 2011年10月19日wmtimes /
这个得学习一下。不会创作,会学习就行。
8:50 下午, 2011年04月14日Melody /
话说,那个js在哪里?只看到了php啊
9:10 下午, 2011年04月14日荒野无灯 /
那个.js.php 就是js文件,你也可以到官方下载纯的js文件。
2:18 下午, 2011年02月14日米波 /
不错
7:56 下午, 2011年01月6日shuai.ws /
写得很复杂的了
12:03 下午, 2010年10月20日海天 /
那这样的话 蜘蛛看到的是几页呢?
11:34 下午, 2010年09月26日blueandhack /
我找了好久~~,winy的我没看见~
11:34 下午, 2010年09月26日blueandhack /
此文章珍藏~~
3:54 下午, 2010年09月21日路人甲 /
12:15 下午, 2010年10月1日荒野无灯 /
目前我在IE6下测试是正常的,不知道你用的是哪个版本的IE6…
目前IE6已经。。。。呃,OUT 了。
4:45 下午, 2010年09月20日路人甲 /
ie就是不滚动……到底问题出在哪咧,折腾1个多小时了~~
3:22 下午, 2010年09月20日路人甲 /
12:27 上午, 2010年09月16日robbie /
期待 切换功能~~
5:49 下午, 2010年09月13日皇家元林 /
这个很酷啊,,记录一下,,,以后会用到的
11:16 上午, 2010年09月10日Leyond /
呵呵,回来了,我也从家里回来。这个教程不错
4:38 下午, 2010年09月8日学夫子 /
我这个用emlog的就飘过啦,呵呵
10:57 下午, 2010年09月6日Dianso /
加载的有点慢
10:59 下午, 2010年09月5日winy /
这个我很早就写过啦
用了很久了
11:18 上午, 2010年09月7日farmer /
你这个我看不懂
10:23 下午, 2010年09月5日Jinwen /
有时间我也折腾一下这个
9:21 下午, 2010年09月5日万戈 /
这个帅啊,像一些微博一样,这应该算是ajax吧?
9:29 下午, 2010年09月5日荒野无灯 /
其实它就是用了JQ的load功能,只不过加了一些其它的代码,适用于WP等博客程序.