下载鸥 > 网站下载 > 开发教程 > WordPress

wordpress怎样实现文章的ajax无限加载?

730 2021-01-24 14:32:18

收藏

简述

确定你的wordpress的jQuery功能能用你可以在header.php里wp_head();前面加上wp_enqueue_script('jquery'); 一定要在他的前面,这加载的是wordpress自带的jQuery

刚学习wordpress 写一个网站的文章的无限加载,本来想的好难啊,但是真的自己写了之后感觉真的挺简单的,所以啊一定要做一下小小的总结:

首先你要确定你的wordpress的jQuery功能能用你可以在header.php里wp_head();前面加上wp_enqueue_script('jquery'); 一定要在他的前面,这加载的是wordpress自带的jQuery,也可以加载自己的,方法就不用我说了。然后就是要写ajax异步调用了。不过我还真的对ajax不太熟悉。不过别人写的方法借用了一下。

首先:在你要实现无限加载的也面加入ajax代码:

<script type="text/javascript">
/*
*jquery scrollajaxloadmorepost
*/
varcount=-10;
initOne=true;
jQuery(document).ready(function(){
if(initOne){
ajaxLoadMose(10);
}
});
stop=true;
jQuery(document).scroll(function(){
totalHeight=parseFloat(jQuery(window).height())+parseFloat(jQuery(window).scrollTop());
if(jQuery(document).height()<=totalHeight+560){
if(stop&&!(initOne)){
stop=false;
jQuery('#main-list').append('<div class="bottom-loadingloading" align="center">loading.......</div>');
setTimeout(function(){
ajaxLoadMose(10);
},100);
}
}
});
functionajaxLoadMose(num){
count+=num;
jQuery.ajax({
type:'post',
url:'/wp-admin/admin-ajax.php',
dataType:"json",
data:{action:'ajaxLoadMore',amount:num,count_:count},
success:function(data){
if(data.length){
vartotal=parseInt(jQuery('#main-list').attr('data-count'))+data.length;
jQuery('#main-list').attr('data-count',total);
for(i=0;i<data.length;i++){
p=data[i];
//alert(p['count']+"本来就有的数据数目");
varoutHtml='<article id="post-'+p['ID']+'">';
outHtml+='<header class="entry-header">';
outHtml+='<h2 class="entry-title"><a href="'+p['url']+'"rel="bookmark" title="'+p['title']+'">'+p['title']+'</a></h2>';
outHtml+='<input type="hidden" id="post_url_hidden_'+p['ID']+'"name="post_url_hidden" value="'+p['url']+'">';
outHtml+='</header>';
outHtml+=p['img'];
outHtml+='</article>';
jQuery('#main-list').append(outHtml);
vararticle=jQuery(outHtml).hide();
//jQuery('#main-list').append(article);
article.fadeIn('fast');
}
initOne=false;
stop=true;
jQuery('#main-list').removeClass('bottom-loadingloading');
if(jQuery('.bottom-loading').length>0){
jQuery('.bottom-loading').remove();
}
if(data.length<num){
if(jQuery('.bottom-loading').length>0){
jQuery('.bottom-loading').remove();
}
jQuery('#main-list').append('<divclass="the-end"align="center">End</div>');
stop=false;
}
}
else{
}
},
error:function(){
console.log("error");
}
});
}
</script>

然后在function.php 中加入function

add_action('wp_ajax_ajaxLoadMore','ajaxLoadMore');
add_action('wp_ajax_nopriv_ajaxLoadMore','ajaxLoadMore');
functionajaxLoadMore(){
$amount=@$_POST['amount'];
$count=@$_POST['count_'];
global$wpdb;
$sql="SELECTID,post_title,post_namefromlasv_postsWHEREpost_status='publish'ANDpost_type='post'ORDERBYpost_dateDESCLIMIT$count,$amount";
$rs=$wpdb->get_results($sql);
query_posts(array('paged'=>$amount));
if(have_posts()):
while(have_posts()):the_post();
get_template_part('content','index');
endwhile;
else:
//get_template_part('content','none');
endif;
$arrList=array();
foreach($rsas$k){
$p_id=$k->ID;
$title=get_post($p_id)->post_title;
$url=get_post($p_id)->post_name;
$img='';
$attr=array(
'class'=>"attachment-twentyfourteen-full-widthwp-post-imageimg-buy-s-".$p_id,
'title'=>$title,
);
//Postthumbnail.
//videoimgtype:default,hqdefault,mqdefault,sddefault,maxresdefault
//get_the_post_thumbnail($p_id,'medium',$attr);
$img_path=get_video_img_path($p_id,'mqdefault');
$img='<ahref="'.$url.'.html"class="img-a"><spanclass="'.show_post_style($p_id).'"></span></span><imgsrc="'.$img_path.'"></a>';
$arrList[]=array(
'ID'=>$p_id,
'title'=>$title,
'img'=>$img,
'url'=>$url,
//'end'=>$end,
'count'=>$count,
);
}
echojson_encode($arrList);
exit;
}

前面的add_action();必不可少这个方法主要写要返回前台数据。

这就可以了还有网页上要有div id 为main-list就可以了

本文地址:https://xzo.com.cn/develop/wp/267.html

有帮助,很赞!

信息来源:精准像素
导出教程 下载word版教程
发表评论 共有条评论
关于WordPress


WordPress是世界级的博客程序,有过百万的模板插件支持,其外型大多十分美观,功能十分强大,可作为博客用户的首选。但如果是企业网站建设,则不建议选用WordPress:数据量是个大问题。

推荐WordPress开发教程
不懂开发,怎样用WordPress建站?
不懂开发,怎样用WordPress建站?

目前市面上的第三方建站程序很多,但使用WordPress建站无疑具备了高效、美观...

17 1351
WordPress怎样搬家/更换域名?搬家后乱码/跳转/404怎么办?
WordPress怎样搬家/更换域名?搬家后乱码/跳转/404怎么办?

对于建站时间稍长的站长来说,换域名、换服务器、搬家都是必要的操作。如果使...

10 1936
Wordpress怎样设置短代码?
Wordpress怎样设置短代码?

我知道wordpress有神奇的自定义函数,这个自定义函数基本上可以代替大部分的...

17 446
怎样通过宝塔面板来优化WordPress缓存加速?
怎样通过宝塔面板来优化WordPress缓存加速?

如果你的服务器环境是用的宝塔面板,那么我们就可以通过宝塔面板来优化WordPr...

12 467
使用WordPress搭建个人博客要如何选择服务器呢?
使用WordPress搭建个人博客要如何选择服务器呢?

打造互联网个体品牌的用户个体越来越多,WordPress是一个相当不错的方案。但...

1 802
wordpress怎样调用注册会员发表的文章数量?
wordpress怎样调用注册会员发表的文章数量?

由于客户需要在wordpress展示会员发布的信息总量,但wordpress默认是没有这个...

0 391
wordpress的模板配置方法
wordpress的模板配置方法

wordpress是全世界最流行的博客程序,国内用wordpress建站的站长占比也很高,当...

0 507
分享一段WordPress面包屑导航源码
分享一段WordPress面包屑导航源码

WordPress博客程序非常好用,但他的一个缺点是不带面包屑导航。而面包屑导航...

1 520
推荐插件
帝国cms百度文字识别ocr接口对接插件
帝国cms百度文字识别ocr接口对接插件

许多网站会做一些小功能小插件给客户使用以增强用户黏性,比如图片转文字,这种...

0 501
帝国cms纳米数据接口(足球比赛中最新数据)
帝国cms纳米数据接口(足球比赛中最新数据)

帝国cms 对接纳米数据(www.nami.com)接口,本接口主要接收、整理足球比赛实时数...

0 481
帝国cms在线考试系统模板插件
帝国cms在线考试系统模板插件

一直没看到好用的帝国cms在线考试插件,所以自己开发了一款。在线考试插件用...

0 1343
帝国cms百度AI图像无损放大api接口对接插件
帝国cms百度AI图像无损放大api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像无损放大的功能。经过...

0 493
帝国cms百度AI图像去雾api接口对接插件
帝国cms百度AI图像去雾api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像去雾的功能。经过实际...

0 492
帝国cms百度AI图像清晰度增强api接口对接插件
帝国cms百度AI图像清晰度增强api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...

0 557
帝国cms智能自动审核按星期几审核指定栏目带推送插件
帝国cms智能自动审核按星期几审核指定栏目带推送插件

采集站的必备资源是自动审核,要做到日收录也离不开定时发布。而本插件的自动...

0 1342
帝国cms网站会员登录与退出历史记录日志插件
帝国cms网站会员登录与退出历史记录日志插件

帝国cms默认只有上次登录时间与ip,没有一个记录清单,所以今天,我们分享这个帝...

0 445
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入