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

转自E-space

教程(二)中讲述了主页模板的制做,如此便能够添加一个页面风格一致却内容别具一格的home给自己的Blog了。然后你肯定会需要一个和CMS系统类似的菜单来方便读者进行导航。

其实大多数的WordPress模板都会设计好菜单的功能,用户在使用时便可以直接发布新的Page来自动生成链接到顶部的菜单中,像比较流行的K2模板等等。但是如果自己的模板并不支持自动添加菜单,比如WP默认的模板等,那么就需要自己手动来添加这个功能了。其实有写模板的或者是些wp高手都会自己来添加这个功能,那么我们这些低手只有来仿照了,我便是依照的K2方法:

其实只需要在header.php中的body之后加入CSS控制格式的调用WP Page List的语句就行了,如下所示:

  1. <ul id="menu">
  2. <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
  3. </ul>

当你在wp中建立一个新的page后,在Page Slug中填写的字段便会自动转成链接的结尾地址,标题便成了菜单的名称了。当然,如果你并不想每个page都出来一个按钮的话,那么在建立时选择一下父页面就好了。如果你根本不想用page来自动生成菜单,那么可以使用如下代码来自己定义菜单的链接:

  1. <ul id="menu">
  2. <li><a href=”http://www.yourlink.com/” >link</a></li>
  3. <li><a href=”http://www.yourlink.com/” >link2</a></li>
  4. <li><a href=”http://www.yourlink.com/” >link3</a></li>
  5. </ul>

然后在style.css中则需要为menu加入格式代码了,像位置,字体,背景颜色,鼠标指上去时的背景颜色等等,代码如下(注意:此处均为我自己的CSS定义,效果可以参考我的顶部菜单,使用时请根据自己的模板进行更改):

  1. #menu {
  2. font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
  3. position: absolute;
  4. width: 780px;
  5. font-size: 12px;
  6. margin: 0 0 0 30px;
  7. padding: 6px 16px 5px 16px;
  8. _padding: 7px 16px 7px 16px;
  9. text-align: left;
  10. display: block;
  11. }
  12. #menu li {
  13. text-transform: lowercase;
  14. display: inline;
  15. }
  16. #menu a {
  17. color: #FFFFFF;
  18. background: #0082C3;
  19. font-weight: normal;
  20. height: 19px;
  21. padding: 6px 16px 5px 16px;
  22. _padding: 7px 16px 7px 16px;
  23. }
  24. #menu a:hover {
  25. color: #FFFFFF;
  26. background: #95c300;
  27. }

这里应该有人会有疑问,我应该怎么样让处在当前页面下时,菜单中页面的按钮和其它按钮不一样呢?这个时候就要做一个巧妙的处理了,也就是在

  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. #menu .current_page_item a {
  2. color: #FFFFFF;
  3. background: #95c300;
  4. }

如此方法,我们便为自己的Blog加入了一个标准的页面菜单来进行导航了。

现在你应该对自己的成果相当满意了吧,那么你发现自己的blog和我的一些不同了么?是的,浏览器中显示的标题,home时应该只显示你blog的名称,现在却多了个可恶的page名称。还有,是否发现你自己加入的日志摘要并不是像我的一样,或者是home中的日志也不显示comment的评论数量,那么这些技巧都需要在教程(四)页面技巧中进行讲述了,敬请期待。

17fav 收藏本文
,
本文链接: http://www.koryi.net/261
Trackback

本文到目前为止有 1 个回复

  1. 饿^_^ 感谢~~

添加回复