wordpress 非插件 实现文章的无限加载

刚学习wordpress 写一个网站的文章的无限加载，本来想的好难啊，但是真的自己写了之后感觉真的挺简单的，所以啊一定要做一下小小的总结：首先你要确定你的wordpress的jQuery功能能用你可以在header.php里wp_head();前面加上wp_enqueue_script('jquery'); 一定要在他的前面，这加载的是wordpress自带的jQuery，也可以加载自己的，方法就不用我说了。然后就是要写ajax异步调用了。不过我还真的对ajax不太熟悉。不过别人写的方法借用了一下。首先：在你要实现无限加载的也面加入ajax代码：

<script type="text/javascript">/** jquery scroll ajax load more post*/var count=-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-loading loading" align="center"> loading.......</div>');setTimeout(function(){ajaxLoadMose(10);},100);}}});function ajaxLoadMose(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){var total = 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']+"本来就有的数据数目");var outHtml = '<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);var article = jQuery(outHtml).hide();//jQuery('#main-list').append(article);article.fadeIn('fast');}initOne=false;stop=true;jQuery('#main-list').removeClass('bottom-loading loading');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('<div class="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');function ajaxLoadMore(){$amount = @$_POST['amount'];$count = @$_POST['count_'];global $wpdb;$sql = "SELECT ID,post_title,post_name from lasv_posts WHERE post_status='publish' AND post_type='post'  ORDER BY post_date DESC LIMIT $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($rs as $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-width wp-post-image img-buy-s-".$p_id ,'title'	=> $title,);// Post thumbnail.// video img type: default , hqdefault , mqdefault , sddefault , maxresdefault//get_the_post_thumbnail($p_id,'medium' , $attr );$img_path = get_video_img_path($p_id,'mqdefault');$img= '<a href="'.$url.'.html" class="img-a"><span class="'.show_post_style($p_id).'"></span></span><img src="'.$img_path.'"></a>';$arrList[] = array('ID'		=>	$p_id ,'title'		=>	$title ,'img'		=>	$img ,'url'		=>	$url ,//'end'		=>	$end,'count'=>$count,);}echo json_encode($arrList );exit;}

前面的add_action();必不可少这个方法主要写要返回前台数据。这就可以了还有网页上要有div id 为main-list就可以了