{教程}WordPress 实现无限下拉加载下一页文章列表




注意了,这种加载方式,前提是有新窗口打开链接,不然用户点进文章返回后会重新回到第一页加载,这是通病,自行解决

  • 首页,在php里加上相关代码:

 

1, 'paged' => $paged ); query_posts($args); while ( have_posts() ) : the_post(); get_template_part( 'content', get_post_format() ); endwhile; wp_reset_query(); ?>
'.$next_page.'
'; ?>
  • 然后,在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;
 });

完事走人!

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
站点出售中https://ikmoe.com/announcement/20357.html
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论