WordPress教程

WordPress 实现分页Ajax无限加载功能

阿里云

好久没有写东西了,这又一年了,时间飞速流逝啊,能每一天有事干我觉得就是一种幸福吧,总比无所事事强,最近做了个手机网站,客户非想要在首页点“加载更多”实现无限加载的功能,这可麻烦了,之前没弄过,一直在找代码找到了很多,都不行,后来一个朋友介绍了一个网官,通过他的代码终于实现这个功能,我想分享给大家。

原理:利用 WordPress 的分页功能,来实现的,之前的翻页不是跳到另一个页面了吗?咱们就让它在当前页面加载显示。

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

1、首先让咱的 wordpress 支持翻页功能,在 functions.php 添加以下代码

  1. //分页代码
  2. function par_pagenavi($range = 5){
  3.  
  4. if ( is_singular() ) return; // 文章与插页不用
  5. global $wp_query, $paged;
  6. $max_page = $wp_query->max_num_pages;
  7. if ( $max_page == 1 ) return; // 只有一页不用
  8. if ( empty( $paged ) ) $paged = 1;
  9. //echo ‘<span class=”pages”>页数:’ . $paged . ‘ / ‘ . $max_page . ‘</span>’; // 显示页数
  10.  
  11. global $paged, $wp_query;
  12. if ( !$max_page ) {$max_page = $wp_query->max_num_pages;}
  13. if($max_page > 1){
  14. if(!$paged){$paged = 1;}
  15. next_posts_link(‘加载更多’);
  16. }
  17. }

2、这就有了翻页的功能,然后我们再在前台调用一下

  1. <?php $wp_query = new WP_Query(array(‘cat’=>1,’showposts’=>2,’paged’=>$paged)); ?>
  2. <div class=”main” id=”container”>
  3. <?php if($wp_query->have_posts()) : while($wp_query->have_posts()) : $wp_query->the_post(); ?>
  4.  
  5. <div class=”item”>
  6. <a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a>
  7. </div>
  8.  
  9. <?php endwhile; ?>
  10. <?php else :  ?>
  11. <?php endif; ?>
  12. </div>
  13.  
  14. <div class=”gdta t3″><span class=”nav-previous”><?php par_pagenavi(9); ?></span></div>
  15. <?php wp_reset_query();?>

3、这就实现了在首页可以翻页的功能,用到 WP_Query 这个查询然后要加入 js 代码

  1. <script type=’text/javascript’ src='<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery-ias.min.js’></script>
  2. <script type=’text/javascript’>
  3. var ias = $.ias({
  4. container: “#container”,//包含所有文章的元素
  5. item: “.item”,//文章元素
  6. pagination: “.gdta”,//分页元素
  7. next: “.nav-previous a”,//下一页元素
  8. loader: ‘<div class=”pagination-loading”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/loading.gif”></div>’,
  9. });
  10.  
  11. ias.extension(new IASTriggerExtension({
  12. text: ‘加载更多’, //此选项为需要点击时的文字
  13. offset: 0, //设置此项后,到 offset+1 页之后需要手动点击才能加载,取消此项则一直为无限加载
  14. }));
  15. ias.extension(new IASSpinnerExtension());
  16. ias.extension(new IASNoneLeftExtension({
  17. text: ‘暂无更多内容’, // 加载完成时的提示
  18. }));
  19. </script>

4、这样就实现了最开始说的无限加载功能。这里用到一个 js 文件,我找到一个链接,可以下载

WordPress 实现分页 Ajax 无限加载功能

已有 253 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

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