0 604 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作为顶级博客程序,海量插件一直是为人所津津乐道的。大多数WordPre...
我知道wordpress有神奇的自定义函数,这个自定义函数基本上可以代替大部分的...
相对日期,文章或者评论发表日期以“发表于1小时前”,这种形式显示,相对日期会...
如果你的服务器环境是用的宝塔面板,那么我们就可以通过宝塔面板来优化WordPr...
wordpress数据库里写了很多与域名相关的东西,如果更换了域名,需要对域名进行...
WordPress博客程序非常好用,但他的一个缺点是不带面包屑导航。而面包屑导航...
WordPress虽然非常好用,但如果数据量很大,哪怕仅仅过万,支持也十分不好。那么,W...
有不少使用WordPress建站的站长反映,自己用Wordpress程序建立好网站之后,过几...
有时候我们需要替换文章的某些文字为其它文字,比如给特定的文字加上链接,利用...
现在网络上有很多爬虫,专门四处搜集网站代码中出现的邮箱,搜集到了之后就批量...
WordPress在个人资料面板中是无法更改用户名的,下面的一段代码可帮你轻松修...
wordpress怎样做性能优化?...
jQuery库是时下最流行、最通用的前端开发js框架,目前百分之九十五以上的word...
这篇文章我们为大家把Wordpress外挂小工具分成3类,整理出21个实用的工具,希望...