WordPress下的分页插件很多, 像PageNavi, Pagebar, WP Page Numbers等等, 这些插件能够让你的Wordpress增加多样式的导航, 同时也带上一定的样式效果.

但是, 插件附带的效果越多, 加载的东西一般也是越来越多. 对于只需要多页面导航的普通要求, 越来越样式化的插件效率与用途似乎不成比例了.

一般分页插件会在head上加载插件自带的CSS样式表, 有的还会加载十多K甚至几十K的JS脚本. 想要加速Wordpress的话, 代码的精简和减少对服务器的负担是最有效的方法.

其实, 实现这个功能并不困难, 我们完全可以自己完成, 看看下面的代码就可以知道我们自己完成的分页导航有多简单了, 但是代码精简不代表样式不好看. 想看具体效果可以参照Ei2U的网站, 完全媲美插件打造的分页效果.

开始的第一步就是打开主题的index.php, 找到类似于下面的默认分页代码

<div class="page_navi pro_next">
<div class="pageleft"><?php previous_post_link('<strong>上一篇: </strong> %link') ?></div>
<div class="pageright"><?php next_post_link('<strong>下一篇: </strong> %link') ?></div></div>

然后打开打开主题的style.css文件, 搜索上面分页代码中

<div class="">

在CSS内相对应的样式表.

例如上面的例子, 我们可以搜索的就是"page_navi pro_next", 然后把下面样式中的".page_navi"全部改成刚才搜索的关键词, 例子中就改为"page_navi pro_next", 接着覆盖掉原有的样式.

/* Page Navigation */
.page_navi{ float:left; width:100%; height:36px; line-height:36px; text-align:center; background:url(images/icon.png) no-repeat 0px -153px; overflow:hidden; }
.page_navi span{float:left;width:120px;height:36px;display:block;line-height:36px;color:#999;}
.page_navi span strong{color:#666;}
.page_navi a{ padding:3px 7px !important; margin:2px; text-decoration:none !important; color:#454545 !important; border:1px solid #CCC !important; }
.page_navi a:hover, .page_navi a.extend:hover{ color:#000 !important; border:1px solid #990B25 !important;}
.page_navi a.extend{ padding-left:9px !important; margin:2px; color:#454545 !important; border:1px solid #CCC !important;}
.page_navi a.current{ padding:3px 7px !important; margin:2px; color:#EEE !important; background-color:#D73555 !important; border:1px solid #990B25 !important;}

样式表中依据个人需要可以修改的有颜色类和边框, 上面的样式为红色背景, Ei2U上的为蓝色, 如果加入后有偏移的可以试着修改宽度, 背景图片需要自行替换.

最后一步就是打开主题的functions.php, 加上下面的函数

//Pagenavi

function par_pagenavi($range = 9){
  // $paged - number of the current page
  global $paged, $wp_query;
  // How much pages do we have?
  if ( !$max_page ) {
  $max_page = $wp_query->max_num_pages;
  }
  // We need the pagination only if there are more than 1 page
  if($max_page > 1){
  if(!$paged){
  $paged = 1;
  }
  echo '<span><strong>导航页码:&nbsp;&nbsp;&nbsp;</strong>'.$paged.' / '.$max_page.'</span>';
  // On the first page, don't put the First page link
  if($paged != 1){
  echo "<a href='" . get_pagenum_link(1) . "' class='extend' title='跳转到首页'> 返回首页 </a>";
  }
  // To the previous page
  previous_posts_link(' « ');
  // We need the sliding effect only if there are more pages than is the sliding range
  if($max_page > $range){
  // When closer to the beginning
  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>";
  }
  }
  // When closer to the end
  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>";
  }
  }
  // Somewhere in the middle
  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>";
  }
  }
  }
  // Less pages than the range, no sliding effect needed
  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 page
  next_posts_link(' » ');
  // On the last page, don't put the Last page link
  if($paged != $max_page){
  echo "<a href='" . get_pagenum_link($max_page) . "' class='extend' title='跳转到最后一页'> 最后一页 </a>";
  }
  }
  }

这段代码可以显示9页的分页, 可以自己修改需要的数目.

现在我们可以开始调用了, 调用的函数为

<?php par_pagenavi(9); ?>

例子中的函数为

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

最后保存后上传到服务器看看效果.

新增当前页不可点击的效果

在上面function.php的代码中, 搜索

echo "<a href='" . get_pagenum_link($i) ."'";
if($i==$paged) echo " class='current'";
echo ">$i</a>";

用

if($i==$paged) echo "<a class='current'>$i</a>";
else echo "<a href='" . get_pagenum_link($i) ."'>$i</a>";

替换查找到的四个结果即可, 其他代码不变.