WordPress网站实现点击加载下一页文章列表

在使用 WordPress 建网站时,如果后台文章比较多的情况下,会使用分页功能来制作分页按钮。除了这种常规的分页按钮之外,还有一种分页就是下拉无限加载下一页文章。效果如下图:

下面就来介绍一下 WordPress 网站点击加载下一页文章列表的方法。也可以将你网站原来的分页按钮转换成下拉加载。

方法/步骤

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

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

如果要在某个 PAGE 单页中加载指定分类的文章列表,需要用以下的循环代码:

  1. <?php
  2. $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
  3. $args = array(
  4. 'caller_get_posts' => 1,
  5. 'paged' => $paged,
  6. 'cat' => 'ID号',
  7. );
  8. query_posts($args);
  9. while ( have_posts() ) : the_post();?>
  10. <?php endwhile; wp_reset_query(); ?>

第二步:在文章列表所在的父 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>

第五步:将以下的 CSS 样式添加到自己网站模板的 style.css 中;

  1. .next-page{text-align:center}
  2. .next-page a{ margin: 10px auto;display: inline-block;padding: 5px 25px;background-color: #ddd;color: #666;border-radius: 2px;opacity: .88;font-size: 14px;}
  3. .next-page a:hover{color:#d9534f;}

第五步:在代码最下方,放上以下的 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,
  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教程

jQuery获取url并替换url参数(有则替换,没有则增加)

2022-9-12 16:58:19

WordPress教程

WordPress如何基于最后发布文章的时间来排序作者用户列表

2022-9-12 19:58:18

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