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

WordPress教程
22年7月1日
编辑

Joker织梦开发者

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

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

1、首先让咱的 wordpressr 8 \ 3 c O 支持翻页功能，在 functions.php 添加以下代码

//分页代码
function par_pagena% Z (vi($range = 5)i 6 a - Y U S \ C{
if ( is_singular() ) return; // 文章与插页不E J 4 2 _用
global $wp_query, $paged;
$max_page = $wp_query->max_num_pages;
if ( $max_pH X & v * p 7 3age == 1 ) return; // 只有一页不用
if &m | a p % M B `#40; empty() M G \ p $pagH } O W fed ) ) $paged = 1;L ; ; / r c ~ A
//echo ‘<spanf R 2 $ , & J class=”pages”>页数：’ . $paged . ‘ /f . $ = 1 L 6 h ‘ . $max_page . ‘</span>’; // 显示页数
global $paged, $wp_query;
if ( !$max_page ) {$max_pu { |age = $wp_query->max_num_pages;}
if($max_page > 1){
if(!$paged){$paged = 1;}
next_posts_link(‘加载V + @ e { \ o更多’);
}
}

2、这就有了/ 5 s ) d ` v翻页的功d O \ R i能，然后我们再在前台调用一下

<?php $wpB / x % W + c P __query = new WP_Query(array(‘cat’=>1,’showposts’=>2,’paged’=>$paged)); ?>
<div class=”main” id=”container”>
<?php if($wp_query->have_& F yposts()) : while($wp_query->have_posts()) : $wp_query->the5 f -_post(); ?>
<div class=”item”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_t[ ! h s ) - 7 yitle&& f p G Z ? ; 1#40;); ?>”><?php the_title(); ?></R ) \ S 3a>
</div&X 1 ] 8 p 2 Cgt;
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
&lt* : = * p;/div>
<div class=”gdta t3″><span class=”nav-previous”><?php par_pagenavi(9); ?></span></div>
<?php wp_reset_query();?>

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

<script type=’text/javascript’ src='https://www.22vd.com/<?p_ , b Q \ e j k Khp bloginfo(‘stylesheet_dire, c 6 Xctory’); ?>/js/jquery-iash / ( M.min.js’></script>
<script type=’text/javascript’>
var ias0 s y V q Y o K H = $.i` g 5 9as({
container: “#container”,//包含所有文章的元素
item: “.item”,/V v M ^ | + R u N/文章元素
pagination: “.gdta”,//分页元素
next: “.nav-previous a”,//下一页元素[ ) ? ; ? & u
loader: ‘<dF x b ; O Y = 7iv class=”paginationW h (-loading”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/loading.gif”></div>’,
});
ias.extensie q k + S i ron(new IASTriggerExtension({
text: ‘加载更多’, //此选项为需要g C - Q 5 R } D点击时的文字
ofb ; v efset: 0, //设置此项后，到 offset+1 页之l ` ? 8后需要手动点击才能加载，取消此项则一直为无限加载M d {
}));
ias.extension(new IASSpi] m } 7 \nnerExtension());
ias.extension(new IASNoneLeftExtension({
text: ‘暂无更多内容’, // 加载完成时的P : 3 ] K _提示
}));
</script>