非插件实现WordPress首页文章Ajax分页无限加载

昨天特地给新手站长站首页文章分页做了无限加载,点击“阅读更多”可实现自动加载效果。

1) 下载 jquery-ias.min.js

2) 把 jquery-ias.min.js 拷贝到自己的网站主题JS文件夹下。

3) 在PHP编辑器中(或者直接在网站后台外观-编辑)打开 自己网站主题的header.php文件。

4) 为主题添加 jQuery。把下面的代码粘贴到 </head> 之前(如果主题已引入jQuery,可跳过此步)。

<scripttype="text/javascript"src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script>

5) 把下面的代码放在上一步引入的 jQuery 之后, </head> 之前(文件一定要指向第2步自己JS文件的地址):

<script src="<?php echo get_template_directory_uri();?>/js/jquery-ias.min.js" type="text/javascript"></script>

6) 把下面的代码贴在 </head> 之前(也可放到自己想要实现无限加载功能的文件中如首页的话index.php;有些属性需要改为你主题中的):

<scripttype="text/javascript">
var ias = $.ias({
container:"#content",//包含所有文章的元素
item:".post",//文章元素
pagination:".navigation",//分页元素
next:".nav-previous a",//下一页元素
});
 
ias.extension(newIASTriggerExtension({
text:'阅读更多',//此选项为需要点击时的文字
offset:2,//设置此项后,到 offset+1 页之后需要手动点击才能加载,取消此项则一直为无限加载,我自己设置的是0,可以通过手动点击加载
}));
ias.extension(newIASSpinnerExtension());
ias.extension(newIASNoneLeftExtension({
text:'加载完毕',// 加载完成时的提示
}));
</script>

如果主题启用了Lazyload插件,在第二页开始之后的页面图片会加载不出来,需要加入下面的代码才行:

ias.on('rendered',function(items){
$("img.lazy").lazyload({effect:"fadeIn"});//这里是你调用Lazyload的代码
})

7) 为加载按钮设计样式,在主题style.css中添加代码。这个可以自己调整,因为每个人的DIV块都不一样。下面贴出新手站长站的css供大家参考:

.ias-trigger {color: #d8d8d8; background-color: white;width: 120px; margin-top: 40px;-webkit-border-radius: 40px;-moz-border-radius: 40px; border-radius: 40px;border: 1px solid;margin-right: auto;margin-left: auto;}
.ias-trigger a {font-size: 14px;line-height: 45px;color: #909090;}
.ias-trigger a:hover {color: #666666;}
.ias-trigger:hover {color: #b2b2b2;}

文章链接:http://www.xszzz.com/2015/10/1035.html  本站文章除注明外皆为原创,若侵犯您权益请留言告知,我们会及时处理。

关于本站站长:洃少

醉风云博主,爱好建站和视觉设计。曾从事物资管理、产品运营,现为Web全栈工程师。

  • 东元电机 3年前(2016-08-18) 沙发

    今天没吃药感觉自己萌萌哒顺便也留下个脚印:http://teco-china.cn/Product/0392584750.html

  • 小易分享网 3年前(2016-08-20) 板凳

    感谢分享 祝您开心快乐每一天! http://www.xevip.cn

  • 的撒发 8个月前(03-30) 3楼

    这个代码不行啊,不完整

    • 洃少 6个月前(05-08)

      实现思路,可再修改