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

By NetPuter on 2008-10-02 / * WordPress / # , , , !
70

十月以来，陪伴我一个三个月的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整容吧！

茶余饭后　　收藏与分享
Comments (70)
« 早前评论
117
NetPuter said on 2008-10-12

@loke, 欢迎你再来哦!
aunsen said on 2008-10-12

@loke, 你个挨驴踢的！
loke said on 2008-10-12

@NetPuter, 肯定啦！
喜欢上这个博客只用了1秒。。。
Jinwen said on 2008-10-12

不错，省工夫。
NetPuter said on 2008-10-12

@loke, 您囧啥呢?
NetPuter said on 2008-10-12

@aunsen, 您继续吵,我默默的路过了..
loke said on 2008-10-12

@NetPuter, 遇见老情人了.
NetPuter said on 2008-10-12

@loke, 非常感谢,欢迎用更先进的方法:RSS订阅哈!
NetPuter said on 2008-10-12

@Jinwen, 功夫?工夫?..中国文化博大精深!
loke said on 2008-10-12

@NetPuter, 地球淫都知道^_^
Hong Xiaowan said on 2008-12-06

不错，收藏！
都知道 said on 2008-12-18

好象功能类的文章特别手欢迎。 ..
Sean said on 2009-01-02

请问下 你文章里的 放代码的那个框 是怎么实现的？
NetPuter said on 2009-01-02

@Sean, 用的是 WP-Syntx 这款插件,你可以在这里了解到:http://wpland.cn/2008/08/wp-syntax.html
Sean said on 2009-01-02

@NetPuter, 谢谢了哈 我去研究下。没事去我那逛哈
NetPuter said on 2009-01-02

@Sean, 有吖,不过 Python 和我不是很熟~
洋洋妈妈 said on 2009-02-07

谢谢￣￣正需要呢
leftkey said on 2009-03-20

嘿嘿 正找呢。····
老虎机上分器 said on 2009-04-05

这么长一偏文章，感觉好复杂的啊。
抽筋儿 said on 2009-08-13

搜到这里来啦~~发现图片出不来，特报告下奶瓶童鞋~
« 早前评论
Write a comment

Advertise Here