WordPress文章下拉自动无限翻页方式

概述最近给某个客户定制主题时需要实现无限下拉加载功能，想通过几行代码把自己的wordpress主题修改成文章自动无限下拉的形式，但是苦于功能不能实现，也不清楚

下面是内存溢出 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 >

<?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 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 >'.$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)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的WordPress文章下拉自动无限翻页方式全部内容，希望文章能够帮你解决WordPress文章下拉自动无限翻页方式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。