A-A+

WordPress iNove主题修改备忘：不用插件为文章列表页添加分页导航

2013年01月18日 Web之旅

　　今天为“三好网志”的文章列表页底部添加了分页导航栏，没有使用之前介绍过的WP-PageNavi插件，而是使用了一些代码，据说这样可以减少插件对系统的拖累。三好酋长下面详细介绍一下实现方法：

　　1.编辑iNove主题下的functions.php文件，在最后的一个“?>”标签前添加以下代码：

function par_pagenavi($range = 6){
	global $paged, $wp_query;
	if ( !$max_page ) {$max_page = $wp_query->max_num_pages;}
	if($max_page > 1){if(!$paged){$paged = 1;}
	if($paged != 1){echo "<a href='" . get_pagenum_link(1) . "' class='extend' title='跳转到首页'> 返回首页 </a>";}
	previous_posts_link(' 上一页 ');
    if($max_page > $range){
		if($paged < $range){for($i = 1; $i <= ($range + 1); $i++){echo "<a href='" . get_pagenum_link($i) ."'";
		if($i==$paged)echo " class='current'";echo ">$i</a>";}}
    elseif($paged >= ($max_page - ceil(($range/2)))){
		for($i = $max_page - $range; $i <= $max_page; $i++){echo "<a href='" . get_pagenum_link($i) ."'";
		if($i==$paged)echo " class='current'";echo ">$i</a>";}}
	elseif($paged >= $range && $paged < ($max_page - ceil(($range/2)))){
		for($i = ($paged - ceil($range/2)); $i <= ($paged + ceil(($range/2))); $i++){echo "<a href='" . get_pagenum_link($i) ."'";if($i==$paged) echo " class='current'";echo ">$i</a>";}}}
    else{for($i = 1; $i <= $max_page; $i++){echo "<a href='" . get_pagenum_link($i) ."'";
    if($i==$paged)echo " class='current'";echo ">$i</a>";}}
	next_posts_link(' 下一页 ');
    if($paged != $max_page){echo "<a href='" . get_pagenum_link($max_page) . "' class='extend' title='跳转到最后一页'> 最后一页 </a>";}}
}

　　2.编辑主题下的index.php和archive.php文件，找到以下代码：

<div id="pagenavi">
	<?php if(function_exists('wp_pagenavi')) : ?>
		<?php wp_pagenavi() ?>
	<?php else : ?>
		<span class="newer"><?php previous_posts_link(__('Newer Entries', 'inove')); ?></span>
		<span class="older"><?php next_posts_link(__('Older Entries', 'inove')); ?></span>
	<?php endif; ?>
	<div class="fixed"></div>
</div>

　　替换成：

<div class="page_navi"><?php par_pagenavi(6); ?></div>

　　3.把下面的CSS样式代码添加到主题style.css的末尾

.page_navi{
border-top:1px solid #CCC;
width:100%;
height:36px;
line-height:36px;
text-align:center;
overflow:hidden;
padding-top:1em;
}
.page_navi a{
padding:3px 8px;
margin:2px;
text-decoration:none;
color:#888;
border:1px solid #ccf;
}
.page_navi a:hover,
.page_navi a.current{
border:1px solid #2970A6;
color:#2970A6;
font-weight:bolder;
}

　　至此，大功告成！效果请查看“三好网志”的文章列表页底部。
　　另外，style.css文件中原来的分页样式代码已经用不着了，建议删除掉，以精简css样式表文件。需删除的代码内容如下：

#pagenavi, 
#postnavi {
	border-top:1px solid #CCC;
	margin:10px -5px 0;
	padding:10px 5px 0;
}
#pagenavi {
	font-size:11px;
}
#pagenavi .newer a, 
#postnavi .prev a {
	background:url(img/icons.gif) 0 -224px no-repeat;
	padding-left:22px;
	float:left;
	height:16px;
	line-height:16px;
}
#pagenavi .older a, 
#postnavi .next a {
	background:url(img/icons.gif) 100% -240px no-repeat;
	padding-right:22px;
	float:right;
	height:16px;
	line-height:16px;
}
标签：

给我留言