转自E-space
教程(二)中讲述了主页模板的制做,如此便能够添加一个页面风格一致却内容别具一格的home给自己的Blog了。然后你肯定会需要一个和CMS系统类似的菜单来方便读者进行导航。
其实大多数的WordPress模板都会设计好菜单的功能,用户在使用时便可以直接发布新的Page来自动生成链接到顶部的菜单中,像比较流行的K2模板等等。但是如果自己的模板并不支持自动添加菜单,比如WP默认的模板等,那么就需要自己手动来添加这个功能了。其实有写模板的或者是些wp高手都会自己来添加这个功能,那么我们这些低手只有来仿照了,我便是依照的K2方法:
其实只需要在header.php中的body之后加入CSS控制格式的调用WP Page List的语句就行了,如下所示:
1 2 3 | <ul id="menu"> <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?> </ul> |
当你在wp中建立一个新的page后,在Page Slug中填写的字段便会自动转成链接的结尾地址,标题便成了菜单的名称了。当然,如果你并不想每个page都出来一个按钮的话,那么在建立时选择一下父页面就好了。如果你根本不想用page来自动生成菜单,那么可以使用如下代码来自己定义菜单的链接:
1 2 3 4 5 | <ul id="menu"> <li><a href=”http://www.yourlink.com/” >link</a></li> <li><a href=”http://www.yourlink.com/” >link2</a></li> <li><a href=”http://www.yourlink.com/” >link3</a></li> </ul> |
然后在style.css中则需要为menu加入格式代码了,像位置,字体,背景颜色,鼠标指上去时的背景颜色等等,代码如下(注意:此处均为我自己的CSS定义,效果可以参考我的顶部菜单,使用时请根据自己的模板进行更改):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | #menu { font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif; position: absolute; width: 780px; font-size: 12px; margin: 0 0 0 30px; padding: 6px 16px 5px 16px; _padding: 7px 16px 7px 16px; text-align: left; display: block; } #menu li { text-transform: lowercase; display: inline; } #menu a { color: #FFFFFF; background: #0082C3; font-weight: normal; height: 19px; padding: 6px 16px 5px 16px; _padding: 7px 16px 7px 16px; } #menu a:hover { color: #FFFFFF; background: #95c300; } |
这里应该有人会有疑问,我应该怎么样让处在当前页面下时,菜单中页面的按钮和其它按钮不一样呢?这个时候就要做一个巧妙的处理了,也就是在
1 | <ul id="menu"> |
后面加入如下代码,来定义一个class给当面页面:
1 | <li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"></li> |
然后在相应的sytle.css中加入如下代码,来区别一下颜色就可以了。
1 2 3 4 | #menu .current_page_item a { color: #FFFFFF; background: #95c300; } |
如此方法,我们便为自己的Blog加入了一个标准的页面菜单来进行导航了。
现在你应该对自己的成果相当满意了吧,那么你发现自己的blog和我的一些不同了么?是的,浏览器中显示的标题,home时应该只显示你blog的名称,现在却多了个可恶的page名称。还有,是否发现你自己加入的日志摘要并不是像我的一样,或者是home中的日志也不显示comment的评论数量,那么这些技巧都需要在教程(四)页面技巧中进行讲述了,敬请期待。