[prisna-google-website-translator]
wordpress 滚动拉下加载更多文章(适用于瀑布流)

第一步

引入jquery-ias.min.js ,点击下载

第二步

function.php 添加

 //获取总分类下文章总数
function ludou_get_cat_postcount($id) {
 // 获取当前分类信息
 $cat = get_category($id);
 // 当前分类文章数
 $count = (int) $cat->count;
 // 获取当前分类所有子孙分类
 $tax_terms = get_terms('category', array('child_of' => $id));
 foreach ($tax_terms as $tax_term) {
  // 子孙分类文章数累加
  $count +=$tax_term->count;
 }
 return $count;
}


//设置分页
function par_pagenavi($range = 5){

if ( is_singular() ) return; // 文章与插页不用
global $wp_query, $paged;
$max_page = $wp_query->max_num_pages;
if ( $max_page == 1 ) return; // 只有一页不用
if ( empty( $paged ) ) $paged = 1;
//echo ‘<span class=”pages”>页数:’ . $paged . ‘ / ‘ . $max_page . ‘</span>’; // 显示页数

global $paged, $wp_query;
if ( !$max_page ) {$max_page = $wp_query->max_num_pages;}
if($max_page > 1){
if(!$paged){$paged = 1;}
next_posts_link('More');
}
}

第三步

<?php $wp_query = new WP_Query(array('cat'=>1,'showposts'=>20,'paged'=>$paged)); ?>
<div class="waterfall_box clearfix">

<?php if($wp_query->have_posts()) : while($wp_query->have_posts()) : $wp_query->the_post(); ?>
		
<div class="waterfall_item">
							
</div>
<?php endwhile; ?>
<?php else :  ?>
<?php endif; ?>
		
</div>
		
<div class="gdta t3"><span class="nav-previous"><?php par_pagenavi(100000); ?></span></div>
<?php wp_reset_query();?>



<script type="text/javascript">

	var page_num = Math.round(<?php echo ludou_get_cat_postcount(1);?> / 20);
	var ias = $.ias({
	    container: ".waterfall_box", //包含所有文章的元素
	    item: ".waterfall_item", //文章元素
	    pagination: ".gdta", //分页元素
	    next: ".nav-previous a", //下一页元素
	    
	});
	ias.extension(new IASTriggerExtension({
	    text: 'More+', //此选项为需要点击时的文字
	    offset: page_num+1, //设置此项后,到 offset+1 页之后需要手动点击才能加载,取消此项则一直为无限加载
	    
	}));
	ias.extension(new IASSpinnerExtension());
	ias.extension(new IASNoneLeftExtension({
	    text: 'There is no more.', // 加载完成时的提示
	    
	}));
	
	ias.on('loaded',function(items){
		
	})
	ias.on('rendered', function(items) {
        
    })
 
	
</script>

暂无评论

发送评论 编辑评论


				
上一篇
下一篇