WordPress 网站下拉翻页无限加载列表功能制作方法

我们在使用 WordPress 建网站时,如果后台文章比较多的情况下,会使用分页功能来制作分页按钮。除了这种常规的分页按钮之外,还有一种分页就是下拉无限加载下一页文章。效果如下图:
WordPress 网站下拉翻页无限加载列表功能制作方法
下面就来介绍一下 WordPress 网站制作下拉无限加载下一页文章列表的方法。也可以将你网站原来的分页按钮转换成下拉加载。

第一步:

将文章列表循环代码使用以下的循环代码;如果本身就是这种循环代码,就不用替换;(这个循环适用于首页和分类页)

  1. <?php if (have_posts()) : ?>
  2. <?php while (have_posts()) : the_post(); ?>
  3. <?php endwhile;?>
  4. <?php endif; ?>

第二步:

在文章列表所在的父 HTML Div 标签,添加一个 class 名为 index001;

第三步:

在循环中的底层模板加一个 class 名为 excerpt-sticky;

第四步:

在循环代码结束的下方,放在“加载更多”的按钮代码;

  1. <div class="next-page"> <?php
  2. $next_page = get_next_posts_link('加载更多');
  3. if($next_page) echo $next_page;
  4. ?>
  5. </div>

第五步:

在代码最下方,放上以下的 JS 代码,来获取下一页的文章列表,并且加载到上一页内容下面,以此类推。

  1. <script>
  2. $('.next-page > a').on('click',function(){ //这是点击实现加载更多
  3. var next_url = $(this).attr("href");
  4. var next_text = $(this).text();
  5. if(next_text == '加载更多'){
  6. $(this).text('加载中...');
  7. $.ajax({
  8. type: 'get',
  9. url: next_url + '.index001',
  10. success: function(data){
  11. result = $(data).find(".index001 .excerpt-sticky");
  12. next_link = $(data).find(".next-page > a").attr("href");
  13. //$(this).attr("href", next_url);
  14. if (next_link != undefined){
  15. $('.next-page > a').attr("href", next_link);
  16. $('.next-page > a').text('加载更多');
  17. }else{
  18. $(".next-page").remove();
  19. }
  20. $(function() {
  21. if (next_url.indexOf("page") < 1) {
  22. $(".index001").html('');
  23. }
  24. $(".index001").append(result.fadeIn(200));
  25. });
  26. }
  27. });
  28. }
  29. return false;
  30. });
  31. </script>

这样就可以在自己做网站时,制作出这样的无限点击加载翻页功能了。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

纯代码实现WordPress自动获取网站截图

2022-3-21 15:53:02

WordPress教程

WordPress 搜索到某个指定关键词就跳到指定页面

2022-3-21 15:54:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索