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