WordPress 技巧：超实用的 Web 2.0 风格翻页代码

十月以来，陪伴我一个三个月的 ADSL 包月上网已经和我 Say GoodBye 了，取而代之的是每个月 30 小时 68 元的套餐。对于我这种人来说明显是不够的，所以就开始研究 WordPress 啦。于是今天就给大家带来这篇《 WordPress 技巧：超实用的 Web 2.0 风格翻页代码》。

给WordPress增加一个高级翻页功能

WordPress 几乎无所不能，只拿来做 Blog 略显单调，拿来做 CMS 、工作室甚至是微博客都绰绰有余。如何显示这些文章呢？文章比较少还好，但是对于几十甚至几百甚至几千篇文章， WordPress 原生翻页功能就几乎变成了鸡肋了，尤其是它只能上一页、下一页的滚动，很麻烦！

还好，国外的高手制作了这款 WP-PageNavi 插件，让我们能够轻松拥有一个高级的翻页功能。我想应该很多人知道这一款插件吧，就不用我多介绍啦。需要的童鞋可以猛击这里。

事实上，还有很多增强 WordPress 翻页功能的插件，个人比较比较喜欢 WP-PageNavi ，所以下文就拿这款插件开刀啦~

要给PageNavi开刀整成啥样

如果主题色彩非常有特色的话，你可以参考主题色系进行整容。
在这里 NetPuter 给大家强烈推荐这个玩意儿： 24 款超实用的 Web 2.0 风格翻页代码。这里面包含了 24 款翻页风格，比如说 Digg 、 Yahoo 、 Flickr 等等，更重要的是这套风格和 PageNavi 的样式长得很像，脸型也差不多，方便我们修改。下载链接。
这娃儿命太苦了，算了，别折磨它了……

开刀整容吧

首先，我们需要了解一些 PageNavi 默认的代码样式，位于 WP-PageNavi 插件目录下的 pagenavi-css.css ）：

.wp-pagenavi a, .wp-pagenavi a:link {
  padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;border: 1px solid #0066cc;color: #0066cc;background-color: #FFFFFF;
}
.wp-pagenavi a:visited {
  padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;border: 1px solid #0066cc;color: #0066cc;background-color: #FFFFFF;
}
.wp-pagenavi a:hover {
  border: 1px solid #000000;color: #000000;background-color: #FFFFFF;
}
.wp-pagenavi a:active {
  padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;border: 1px solid #0066cc;color: #0066cc;background-color: #FFFFFF;
}
.wp-pagenavi span.pages {
  padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #000000;background-color: #FFFFFF;}
.wp-pagenavi span.current {
  padding: 2px 4px 2px 4px;margin: 2px;font-weight: bold;border: 1px solid #000000;color: #000000;background-color: #FFFFFF;
}
.wp-pagenavi span.extend {
  padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #000000;color: #000000;background-color: #FFFFFF;
}

然后我们将之前提到的 24 款超实用的 Web 2.0 风格翻页代码中的 CSS.CSS 所需要的 CSS 代码提取出来，你会发现整容的内容（这里拿 Digg 的为例）。

DIV.digg {
  PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
  BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
  BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg A:active {
  BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg SPAN.current {
  BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099
}
DIV.digg SPAN.disabled {
  BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}

对 CSS 比较了解的朋友发现了吧，这段代码比较臃肿，你可以稍微优化下。看看我是怎么整容的：

把上面代码中的 DIV.digg 替换成 .wp-pagenavi ，注意要灵活变通哦。
把 .wp-pagenavi A 和 .wp-pagenavi A:link 合并到一起，也就是写成 .wp-pagenavi A, .wp-pagenavi A:link {内容} 这样。
同样再把 .wp-pagenavi A:hover 和 .wp-pagenavi A:active 合并到一起。
你可以把修改后的 .wp-pagenavi SPAN.disabled 部分删掉，因为根本就没有用。
如果你不想显示前面的 Page 1 of 4 ，你可以在 CSS 中增加以下代码：
```
.wp-pagenavi SPAN.pages {
  display: none;
}
```
最后，把上面修改的内容添加到你正在使用的主题目录下的 style.css 的屁股。