wordpress 非外掛 實現文章的無限載入
阿新 • • 發佈:2019-02-01
剛學習wordpress 寫一個網站的文章的無限載入,本來想的好難啊,但是真的自己寫了之後感覺真的挺簡單的,所以啊一定要做一下小小的總結:
然後在function.php 中加入function
前面的add_action();必不可少這個方法主要寫要返回前臺資料。
首先你要確定你的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就可以了