A-A+
WordPress iNove主题修改备忘:不用插件为文章列表页添加分页导航
今天为“三好网志”的文章列表页底部添加了分页导航栏,没有使用之前介绍过的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; } |