WordPress 整合Bootstrap分页代码

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显示效果