Loading
0

WordPress 实现无限下拉加载下一页文章列表

最近给某个客户定制主题时需要实现无限下拉加载功能,以往模板兔都是用某个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;
 });

搞定!其实这次用这种方式实现无限加载主要是为了另一个高级功能做准备的~~

特别声明:1、本站仅提供源码学习下载,使用者需具备一定的技术基础,源码费用仅为站长辛苦整理费,不代表源码自身价值也不包含任何服务,如需完美运营请到官方购买。如需搭建、二开、bug修复等服务需额外收费,如果源码侵犯了您的利益请联系客服处理! 2、用户必须遵守《计算机软件保护条例(2013修订)》第十七条:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。鉴于此条例,用户从本平台下载的全部源码(软件)仅限学习研究,未经版权归属者授权不得商用,若因商用引起的版权纠纷,一切责任均由使用者自行承担,本平台所属公司及其雇员不承担任何法律责任。本站邮箱:weituiw@qq.com