熟悉WordPress的朋友会知道，WordPress是自带分页导航功能的，就是大家都熟悉的“上一页”，“下一页”。其实使用其自带的分页功能也是不错的选择，如果你暂时不想使用如WP-PageNavi这类罗列分页数字的插件。但如果只是简单显示“上一页”及“下一页”的话又过于简单，恰好有朋友问到现在本站的分页样式如何实现，所以我也写一下作为回复。
如上截图，我在传统的“上一页”和“下一页”之间还加上了“返回主页”（home）及“跳至页首”(top)的两个按钮。因为我相信读者阅读至此，这两个按钮还是很方便他们的。
现在先说在index.php内插入的php代码：
<div id="nav-below" class="navigation">
<div class="nav-home"><a class="home" href="<?php echo get_settings('home') ?>/">HOME</a> | <a class="top" href="#content">Top</a></div>
<div class="nav-previous"><?php next_posts_link(__('Older posts')) ?></div>
<div class="nav-next"><?php previous_posts_link(__('Newer posts')) ?></div>
</div>
上面代码能用，直接复制插入你的index.php文件内则可，一般位置是页面的底部，也就是footer的对上。
然后其CSS样式代码如下：
.nav-previous a {
float: left;
background: transparent url(imgs/allbgs.png) no-repeat 0px -167px;
padding-left: 14px;
}.nav-previous a:hover {
float: left;
background: transparent url(imgs/allbgs.png) no-repeat -79px -166px;
padding-left: 14px;
}.nav-next a{
float: right;
background: transparent url(imgs/allbgs.png) no-repeat 74px -146px;
padding-right: 14px;
}.nav-next a:hover{
float: right;
background: transparent url(imgs/allbgs.png) no-repeat 74px -184px;
padding-right: 14px;
}.nav-home {
left: 194px;
position: relative;
top: 18px;
width: 120px;
}a.top {
background: transparent url(imgs/allbgs.png) no-repeat -138px -197px;
padding-right: 14px;
}a.top:hover {
background: transparent url(imgs/allbgs.png) no-repeat -56px -196px;
padding-right: 14px;
}
其中红字部分就是用来控制居中显示“home”和“top”的代码，建议增加width的属性，否则最右侧（上一页）的按钮会被遮挡，能显示而不能点击；另外在上面的代码中，我是为各个链接及其激活状态下都设置了背景图片，在你的模板中需要根据实际情况改一下各图片的路径；最后要说的是上述代码还可以整合一下；不过我这样写会比较清楚，刚开始学习CSS的朋友能更好理解。
