WordPress打造CMS教程(三):导航菜单

转自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的评论数量,那么这些技巧都需要在教程(四)页面技巧中进行讲述了,敬请期待。