漂泊的灵魂

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

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

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

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

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

<div>
<div><?php previous_post_link(‘<strong>上一篇: </strong> %link’) ?></div>
<div><?php next_post_link(‘<strong>下一篇: </strong> %link’) ?></div></div>
然后打开打开主题的style.css文件, 搜索上面分页代码中

<div>
中的样式.

例如上面的例子, 我们可以搜索的就是”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>
<?php par_pagenavi(9); ?>
</div>
最后保存后上传到服务器看看效果

原来地址：http://www.ei2u.com/wordpress/work/273.html