1. 程式人生 > >wordpress 非外掛 實現文章的無限載入

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就可以了