我看很多站长的网站都是将文章实现自动无限下拉的形式，今天WordPress主题站小编也来分享一下WordPress文章实现自动无限下拉翻页方法。
实现步骤：
一共分三个步骤，复制粘贴，然后查找自己的每篇的文章样式class，和包含文章的class样式替换即可。
1、本功能主要应用了jQuery插件jquery.infinitescroll.js，通过大挖给大家提供了CDN的链接，方便直接应用到HEAD内即可；
<script src=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”https://cdn.bootcss.com/jquery-infinitescroll/2.0b2.120520/jquery.infinitescroll.min.js\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></script>
2、替换分页代码：将以下分页的代码替换到当前分页位置上
<div class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”pagenavi\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>
<?php next_posts_link(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’下一页 » \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’) ?>
<?php previous_posts_link(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’« 上一页\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’) ?>
</div>
3、在当前主题的functions.php文件中，添加以下代码：
代码中间包含了一个gif图像翻页效果的动态图，大家可以要的自己的喜欢，自行制作或是注释掉，这里大挖不再提供GIF图片
/*
加载infinite scroll插件脚本
*/
function infinitescroll_js() {
wp_register_script(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’infinite_scroll\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, get_stylesheet_directory_uri() . \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’/js/jquery.infinitescroll.min.js\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, array(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’jquery\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’), null, true);
if (!is_singular()) {
wp_enqueue_script(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’infinite_scroll\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’);
}
}
add_action(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’wp_enqueue_scripts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’infinitescroll_js\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’);
/*
初始化infinite scroll插件配置参数
*/
function infinite_scroll_js() {
if (!is_singular() ) {
?>
<script type=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”text/javascript\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>
jQuery(document).ready(function(){
var infinite_scroll = {
loading: {
img: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”,
msgText: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”加载中…\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”,
finishedMsg: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”已加载所有产品…\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”
},
nextSelector:\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.pagenavi a\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”,
navSelector:\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.pagenavi\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”,
itemSelector:\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.post\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”,
contentSelector:\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.main\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”,
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
});
</script>
<?php
}
}
add_action(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’wp_footer\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’infinite_scroll_js\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, 100);
重要参数说明：
img: 等待加载时显示的动态图片URL路径
nextSelector: 下一页（Previous Post）链接CSS样式名称 + a标签（类选择器或ID选择器）
navSelector: 包含上一页/下一页链接的样式名称（类选择器或ID选择器）
itemSelector: 包含每篇文章内容的样式名称（类选择器或ID选择器）
contentSelector: 包含所有文章的样式名称（类选择器或ID选择器）
提醒：如果按上面方法没有生效，请检查样式是否选择错。
4、CSS样式代码：（把下面的CSS代码添加到当前主题的样式文件中，一般是style.css，可根据自己的喜欢修改对应代码）
.pagenavi,#infscr-loading {text-align:center; font-size:0.75em;}
.pagenavi a {padding:6px 12px; background:#F04848; color:#fff; border:1px solid #dedede; border-right:none; overflow:hidden;}
#infscr-loading img {display:block; margin:0 auto; text-align:center;}