下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。
最近给某个客户定制主题时需要实现无限下拉加载功能，想通过几行代码把自己的 wordpress 主题修改成文章自动无限下拉的形式，但是苦于功能不能实现，也不清楚是卡在哪个步骤了，今天给大家分享两个零距离的傻瓜版，来帮助大家完成这个功能。
方法一：
以下这个方法对于其它的教程优势在于，很明确的给到了翻页的代码，因为其它的教程都是以翻页的 js 及功能为例子，这里比较好的是提供了一个完整的翻页代码，可以直接应用，当然比较核心的步骤也同步给到了大家。希望这次大家可以操作成功。一共分三个步骤，复制粘贴，然后查找自己的每篇的文章样式 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;}
方法二：
以上都是用某个 js 插件来实现了，下面教大家一个不用插件实现的方法，首先在 php 里加上相关代码：
<div class="article-list mobantu" id="article-list">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'caller_get_posts' => 1,
'paged' => $paged
);
query_posts($args);
while ( have_posts() ) : the_post();
get_template_part( 'content',get_post_format() );
endwhile; wp_reset_query();
?>
</div>
<?php
$next_page = get_next_posts_link('加载更多');
if($next_page) echo '<div class="article-paging mobantu">'.$next_page.'</div>';
?>
然后，在 js 里加上相关代码（前提需要加载了 jquery，且网站使用了伪静态分页）：
$('.article-paging > a').on('click',function(){ //点击实现加载更多，你可以根据自己需要改成下拉自动加载
var next_url = $(this).attr("href");
var next_text = $(this).text();
if(next_text == '加载更多'){
$(this).text('加载中...');
$.ajax({
type: 'get',
url: next_url + '#article-list',
success: function(data){
result = $(data).find("#article-list .article-item");
next_link = $(data).find(".article-paging > a").attr("href");
//$(this).attr("href",next_url);
if (next_link != undefined){
$('.article-paging > a').attr("href",next_link);
$('.article-paging > a').text('加载更多');
}else{
$(".article-paging").remove();
}
$(function(){
$("#article-list").append(result.fadeIn(300));
$('.thumb').lazyload({
data_attribute: 'src',
placeholder: _BGJ.uri + '/static/img/thumbnail.png',
threshold: 400
});
});
$(function() {
if (next_url.indexOf("page") < 1) {
$("#article-list").html('');
}
$("#article-list").append(result.fadeIn(200));
});
}
});
}
return false;
});
以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。