欢迎您光临爱永设计官网!
电话图标 服务热线/微信:13436537174 QQ咨询:276583799

最新动态

news

首页 >> 最新动态 >> wordpress >> 正文

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

发表日期:2016-01-20 文章作者:爱永设计  浏览次数:7222 次

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

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

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='<?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文件,我找到一个链接,可以下载

立即下载该文件

5、在感谢QQ为:88900343大哥友情支持。

6、由爱永设计整理并发布。2016.01.20

将文章分享到..
相关新闻
最新新闻
随机新闻
最新网站案例
  • 我们能做什么

    致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。

  • 网站模板优势

  • 更多 +关于爱永设计

    爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!

Copyright © 2013 - 2019 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:http://www.aymoban.com/ 京ICP备17063353号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作