WordPress教程

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

也想出现在这里?联系我们
创客云

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

方法/步骤

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

也想出现在这里?联系我们
创客主机
  1. <?php if (have_posts()) : ?>
  2. <?php while (have_posts()) : the_post(); ?>
  3.  
  4. <?php endwhile;?>
  5. <?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.  
  11. <?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.  
  21. $(function() {
  22. if (next_url.indexOf("page") < 1) {
  23. $(".index001").html('');
  24. }
  25. $(".index001").append(result.fadeIn(200));
  26. });
  27. }
  28. });
  29. }
  30. return false;
  31. });
  32. </script>

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

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!