枫竹丹青SAP博客

SAP & IT 你是否在意,我都在那里,不悲,不喜

WordPress 整合Bootstrap分页代码

  枫竹丹青   2015-01-08 03:01   813 views   网站技术    

  没有评论   , , , , ,

WordPress(简称WP)显示列表的界面,如主界面、分类、搜索、标签等,都会在主循环程序后显示分页,WP自带的分页函数previous_posts_link、next_posts_link可显示上一页、下一页的链接,但更复杂的则需要代码段进行控制。

各经典主题都有相应的分页代码程序,以下是自写的分页程序,逻辑清楚可读性强,显示首页、尾页、上一页,下一页,可根据参数显示前后页码,并且对当前页去掉链接不再跳转。程序可根据需要可进行修改和剪裁,配合Bootstrap框架可以很容易实现美观的效果,效果如图 1所示。

图 1 显示效果

整个程序作为一个函数如下所示,可放在主题的functions.php、index.php或其它文件中进行调用。

<?PHP
function fz_pagelink($ranged = 2){
	global $paged, $wp_query;
	if ( !$max_page ) {$max_page = $wp_query->max_num_pages;}
	if($max_page == 1){return;}  //如果只有单页则退出 ?>

			<ul class="pagination"> <!--也可用"pager"类-->
<?php	
	if(!$paged){$paged = 1;}	
	
	//计算显示的开始、结束页面
	$pa_begin=$paged - $ranged <1 ? 1:$paged - $ranged;
	$pa_end = $paged + $ranged >$max_page ?$max_page:$paged+$ranged;
	
	if($pa_begin > 1): ?>
	<li class="previous"><?php previous_posts_link('上一页');?></li>
	<li><a href="<?php echo get_pagenum_link(1); ?>">1</a></li>
	<li class="disable"><a >...</a></li>
<?php
	endif;
	
	for($i = $pa_begin;$i <= $pa_end;$i++)
	{
		if($i == $paged){ ?>
			<li class="active"><span><?php echo $i ?><span class="sr-only">(current)</span></span></li>
		<?php }else{ 
			echo "<li><a href='". get_pagenum_link($i)."'>".$i."</a></li>";
		}
	}
	
	if($pa_end < $max_page): ?>
	<li class="disable"><a>...</a></li>
	<li><a href="<?php echo get_pagenum_link($max_page)?>"><?php echo $max_page;?></a></li>
	<li class="next"><?php next_posts_link('下一页'); ?></li>
<?php
	endif; ?>
			</ul>
		</nav>
	</div>

<?php
}
?>

 

函数名为fz_pagelink,内含Bootstrap V3的结构,其中为ul使用Bootstrap V3的类. pagination,每个页码是一个<li>和</li>闭合。

程序主要用到以下函数:

  • previous_posts_link、next_posts_link:返回前一页、后一页的链接及文字。
  • get_pagenum_link:根据页码返回链接。

根据不同状态,li用了以下的类,这些都专属于Bootstrap V3:

  • . disable:页码链接无效时使用;
  • . active:当前页码时使用,链接无效;
  • . previous:上一页状态专用类,当ul使用. pager类时在最左边显示;
  • .next:下一页状态专用类,当ul使用. pager类时在最右边显示。

该函数直接调用既可,一般在主循环之后使用,可根据参数显示当前页左、右两边的页码显示数量,默认为3个可自行更改。

	<div > <!--根据需要设定div的class值>
		<nav>
		<?php fz_pagelink(); ?>
		</nav>
	</div>

当把函数中的ul类. pagination改成.pager,则分页以圆角方式显示如图 2所示,上一页、下一页分列最左和最右。

图 2 pager显示效果

关注本站

枫竹丹青 SAP&IT

站长微博

© 2015枫竹丹青SAP博客. Powered by WordPress. Theme by 枫竹丹青. . 总浏览564710次