JQAJAX实现wordpress无限下拉显示

2019-09-06零分笔记 , 337 阅读0 评论

点我试试->

wordpress无限下拉分页实现方法:

通过JQ的AJAX来实现无限下拉分页,原理是通过JQAJAX获取下一页的html,提取指定内的文章列表放入当前页的指定容器内!
JQ ajax代码:

$.ajax({
var geturl=$("#getpage a").attr("href");//下一页的链接
$("#getpage a").html("正在加载,请稍后....");//显示下一页链接的文本标签
type: "POST",
url: geturl,
success: function(data){
result = $(data).find("#thelist");//指定容器内的文章列表
page=$(data).find("#page");//获取分页导航
nextHref = $(data).find("#getpage a").attr("href");//获取下一页的链接,替换当前页的下一页链接
$("#thelist").append(result);//最近文本列表,显示下一页
$("#page").html(page);//替换分页导航
if(nextHref!=undefined ){
$("#getpage a").html("加载下一页");//替换下一页链接的文本标签
$("#getpage a").attr("href",nextHref)//替换下一页链接
}else{
$("#getpage").remove();//最后一页,已经全部加载完成时,移除下一页标签
}
}
});

wordpress模板PHP代码,先显示第一页

<div id="thelist">
<?php while (have_posts()) : the_post();?>
<div class="theli thewidth ">
<div class="img">
<span class="ib imgbox">
<a rel="bookmark" target="_blank" href="<?php echo get_the_permalink(); ?>"><img src="<?php echo post_thumbnail();?>"></a>
<i class="ib cat"><a rel="bookmark" href="<?php echo get_category_link(get_the_category()[0]->term_id); ?>"><?php echo get_the_category()[0]->name ;?></a></i>
</span>
</div>
<div class="content">
<h2><a rel="bookmark" target="_blank" href="<?php echo get_the_permalink(); ?>"><?php the_title();?></a></h2>
<p class="ib info">
<i class="ib line"><?php the_author();?></i>
<i class="ib line"><?php time_tran(get_the_time('U'));?></i>
<?php if(get_the_tags()){$thistag='';foreach(get_the_tags() as $tag){$thistag.= '<a target="_blank" rel="bookmark" href="'.get_bloginfo('url').'/tag/'.$tag->name.'">'.$tag->name.'</a>,';} echo '<i class="ib line m_none">'.rtrim($thistag,",").'</i>';} ?>
<i class="ib li"><?php post_views('阅读(', ')'); ?></i>
</p>
<div class="text"><?php echo strip_tags(apply_filters('the_content', $post->post_content)); ?></div>
</div>
<div class="btnbox">
<a rel="bookmark" target="_blank" href="<?php echo get_the_permalink(); ?>"><span class="ib link">阅读全文</span></a>
</div>
</div>
<?php endwhile;wp_reset_query(); ?>
</div>
<div id="page"><?php par_pagenavi($pn); ?></div>
<div id="getpage"><?php echo get_next_posts_link('加载下一页'); ?></div>

wordpress无限下拉加载大概就时这种,其实,不管什么程序,下拉无限下载,也差不多都时这样的写法

发表评论

电子邮件地址不会被公开。 必填项已用*标注