0 721 2021-01-24 14:32:18
收藏刚学习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
如果您认可我们的分享,有意与我们合作开展帝国cms网站建设与开发业务或插件定制,请联系右侧在线客服。我们能给您的,就是高质量的模板与售后。
标注了信息来源为下载鸥的文章皆为原创,如果是转载的优质文章,我们也都标注了出处。如果您喜欢我们的文章,请按照下载鸥所标注的文章出处进行标注,谢谢您的配合。
WordPress是世界级的博客程序,有过百万的模板插件支持,其外型大多十分美观,功能十分强大,可作为博客用户的首选。但如果是企业网站建设,则不建议选用WordPress:数据量是个大问题。
目前市面上的第三方建站程序很多,但使用WordPress建站无疑具备了高效、美观...
我知道wordpress有神奇的自定义函数,这个自定义函数基本上可以代替大部分的...
相对日期,文章或者评论发表日期以“发表于1小时前”,这种形式显示,相对日期会...
打造互联网个体品牌的用户个体越来越多,WordPress是一个相当不错的方案。但...
wordpress是全世界最流行的博客程序,国内用wordpress建站的站长占比也很高,当...
wordpress数据库里写了很多与域名相关的东西,如果更换了域名,需要对域名进行...
WordPress有缩略图字段,但如果没有录入缩略图,能否自动获取文章内的第一张图...
WordPress博客程序非常好用,但他的一个缺点是不带面包屑导航。而面包屑导航...
使用帝国cms的企业用户、新闻资讯类站点的用户很多,此类站点很多时候需要有...
本插件适用于内网用户,可查看单篇文章访问者ip地址。如果添加访问者ip组,可查...
帝国cms 对接纳米数据(www.nami.com)接口,本接口主要接收、整理足球比赛实时数...
帝国cms有自带的给关键词添加内链功能,但需要手动添加关键词,容易出现疏漏和...
一直没看到好用的帝国cms在线考试插件,所以自己开发了一款。在线考试插件用...
本插件基于帝国cms帝国cms每日自动审核插件,在自动审核指定条数信息的基础上...
通过本插件,可以实现帝国cms网站对接百度云api实现图像去雾的功能。经过实际...
通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...