wordpress实现文章的ajax无限加载

刚学习wordpress 写一个网站的文章的无限加载，原本想的好难啊，可是真的自己写了之后感觉真的挺简略的，所以啊必定要做一下小小的总结：

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

首要：在你要完成无限加载的也面参加ajax代码：

<scripttype="text/javascript">
/*
*jqueryscrollajaxloadmorepost
*/
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('<pclass="bottom-loadingloading"align="center">loading.......</p>');
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='<articleid="post-'+p['ID']+'">';
outHtml+='<headerclass="entry-header">';
outHtml+='<h2class="entry-title"><ahref="'+p['url']+'"rel="bookmark"title="'+p['title']+'">'+p['title']+'</a></h2>';
outHtml+='<inputtype="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('<pclass="the-end"align="center">End</p>');
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();必不可少这个办法主要写要回来前台数据。

这就能够了还有网页上要有p id 为main-list就能够了