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开刀整成啥样

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

开刀整容吧

首先,我们需要了解一些 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 比较了解的朋友发现了吧,这段代码比较臃肿,你可以稍微优化下。看看我是怎么整容的:
  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 中增加以下代码:
      
    .wp-pagenavi SPAN.pages {
      display: none;
    }
    
  6. 最后,把上面修改的内容添加到你正在使用的主题目录下的 style.css 的屁股。