pagenavi插件几乎每个WP都必备的插件吧，但是我升级wp2.92后,随便更新了各个插件,其中包括pagenavi。结果默认的pagenavi-css.css和我的风格有很大冲，背景是黑色，字也是黑色可想而知有多难看了吧。

于是想自己动手改pagenavi-css.css文件了，可惜很久前自学的CSS，所以懒得自己改了，就又百度谷歌了一番。还真被我发现到宝贝了，不敢独吞，拿来分享。

先炫一下效果，是动态样式的：

pagenavi插件美化

最新的pagenavi插件支持在WP主题目录里读取样式，为了以后更新pagenavi插件的时候不用重复修改pagenavi-css.css 我们只需把pagenavi-css.css文件【位于/wp-content/plugins/wp-pagenavi/】复制到你当前使用的主题目录下然后将pagenavi-css.css文件内容改成如下的CSS代码就可以了。是参考sivan的文章来的(http://sivan.in/blog/give-pagenavi-hover-style/)

.wp-pagenavi a,.wp-pagenavi a:link {padding:2px 4px;margin:2px;text-decoration:none;border:1px solid #c1c1c1;color:#c1c1c1;background:#fff;}
.wp-pagenavi a:hover {border:1px solid #c1c1c1 !important;color:#666 !important;background:#e1e1e1 !important;padding: 6px 12px !important;font-size:16px !important;}
.wp-pagenavi span.pages {padding: 2px 4px 2px 4px;margin:2px;color:#c1c1c1;border:1px solid #e1e1e1;background:#fff;}
.wp-pagenavi span.current {padding:6px 12px;margin:2px;border:1px solid #c1c1c1;color:#333;background:#e1e1e1;font-size:18px;}
.wp-pagenavi span.extend {padding:2px 4px;margin:2px;border:1px solid #e1e1e1;color:#c1c1c1;background:#fff;}
.wp-pagenavi span.current + a.page,.wp-pagenavi a:hover + a {background:#efefef;border:1px solid #e1e1e1;color:#999;margin:2px;padding:4px 8px;font-size:16px;}

还有后台pagenavi的设置选项：很多人想要这样的效果

我改的方法是在“页数”文字设置里填上：【当前 %CURRENT_PAGE%页共%TOTAL_PAGES%页】