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

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

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

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

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

给PageNavi开刀之前 记一下它长啥样

可怜的娃儿，你怎么长这么丑……

要给PageNavi开刀整成啥样

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

开刀整容吧

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.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代码Copy出来，你会发现整容的内容（这里拿Digg的为例）。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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比较了解的朋友发现了吧，这段代码比较臃肿，你可以稍微优化下。看看我是怎么整容的：

1. 把上面代码中的“DIV.digg”替换成“.wp-pagenavi”，注意要灵活变通哦。
2. 把“.wp-pagenavi A”和“.wp-pagenavi A:link”合并到一起，也就是写成“.wp-pagenavi A, .wp-pagenavi A:link {内容}”这样。
3. 同样再把“.wp-pagenavi A:hover”和“.wp-pagenavi A:active”合并到一起。
4. 你可以把修改后的“.wp-pagenavi SPAN.disabled”部分删掉，因为根本就没有用。
5. 如果你不想显示前面的“Page 1 of 4”，你可以在CSS中增加以下代码：

   1 2 3

   .wp-pagenavi SPAN.pages { display: none; }

6. 最后，把上面修改的内容添加到你正在使用的主题目录下的“style.css”的屁股。

快看整成什么样

哈哈，这娃儿变得很漂亮啦，赶快去给你的PageNavi整容吧！