• 浅说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