非插件实现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;}

本文固定连接：https://code.zuifengyun.com/2015/10/1035.html，转载须征得作者授权。