为WordPress主题添加”点击加载更多文章”分页功能
确保你的html结构类似这样的
1 2 3 4 5 6 | <div class="posts-loop"> <div id="post-1" class="post"><!--第一篇文章--></div> <div id="post-2" class="post"><!--第二篇文章--></div> <div id="post-3" class="post"><!--第三篇文章--></div> <div id="post-4" class="post"><!--第四篇文章--></div> </div> |
页码调用部分
1 | <?php next_posts_link(__('点击加载更多文章')); ?> |
JS部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | //无限分页 jQuery(document).ready(function($) { //点击下一页的链接(即那个a标签) $('.post-read-more a').click( function() { $this = $(this); $this.addClass('loading'); //给a标签加载一个loading的class属性,可以用来添加一些加载效果 var href = $this.attr("href"); //获取下一页的链接地址 if (href != undefined) { //如果地址存在 $.ajax( { //发起ajax请求 url: href, //请求的地址就是下一页的链接 type: "get", //请求类型是get error: function(request) { //如果发生错误怎么处理 }, success: function(data) { //请求成功 $this.removeClass('loading'); //移除loading属性 var $res = $(data).find(".post"); //从数据中挑出文章数据,请根据实际情况更改 $('.posts-loop').append($res); //将数据加载加进posts-loop的标签中。 var newhref = $(data).find(".post-read-more a").attr("href"); //找出新的下一页链接 if( newhref != undefined ){ $(".post-read-more a").attr("href",newhref); }else{ $(".post-read-more").hide(); //如果没有下一页了,隐藏 } } }); } return false; }); }); |
样式仅供参考
1 | #pagination{display:inline-block;position:relative;height:30px;margin-bottom:20px;padding:2px 16px;color:rgba(0,0,0,.44);background:rgba(0,0,0,0);font-size:15px;text-align:center;text-decoration:none;cursor:pointer;border:1px solid rgba(0,0,0,.05);vertical-align:bottom;white-space:nowrap;text-rendering:auto;box-sizing:border-box;border-radius:999em} |
文章评论(1 条)