• 浅说WordPress自带分页的CSS样式设计

    分类：WordPress, theme skill | 标签： ,,, | 浏览次数：1,950

    熟悉WordPress的朋友会知道，WordPress是自带分页导航功能的，就是大家都熟悉的“上一页”，“下一页”。其实使用其自带的分页功能也是不错的选择，如果你暂时不想使用如WP-PageNavi这类罗列分页数字的插件。但如果只是简单显示“上一页”及“下一页”的话又过于简单，恰好有朋友问到现在本站的分页样式如何实现，所以我也写一下作为回复。

    wordpress navi bar design 浅说WordPress自带分页的CSS样式设计

    如上截图，我在传统的“上一页”和“下一页”之间还加上了“返回主页”（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的朋友能更好理解。

    或者收藏到 Delicious。建议通过 RSS 订阅本站更新。你还可以 follow me 谢谢！ — by Jinwen @ 2009/03/07 22:52