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

建站教程
22年4月3日
编辑

吾管理员

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

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

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

//分页代码
function par_pagenavi($range = 5){
if ( is_singular() ) return; // 文章与插页不用
global $wp_query, $paged;
$max_page = $wp_query->max_num_pages;
if ( $max_page == 1 ) return; // 只有一页不用
if ( empty( $paged ) ) $paged = 1;
//echo ‘<span class=”pages”>页数：’ . $paged . ‘ / ‘ . $max_page . ‘</span>’; // 显示页数
global $paged, $wp_query;
if ( !$max_page ) {$max_page = $wp_query->max_num_pages;}
if($max_page > 1){
if(!$paged){$paged = 1;}
next_posts_link(‘加载更多’);
}
}

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

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

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

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

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

温馨提示：

文章标题：WordPress 实现分页Ajax无限加载功能

文章链接：https://www.wuyanshuo.cn/667.html

更新时间：2022年04月03日

本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：service@wuyanshuo.cn我们将第一时间处理！资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持。所有资源仅限于参考和学习，版权归原作者所有，更多请阅读无言说网络服务协议。