当前位置: Home » Blog » WordPress, 学海无牙 » Blog article: WordPress打造CMS教程(三):导航菜单
« DNS与人品
WordPress2.1怪现象 »

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

教程（二）中讲述了主页模板的制做，如此便能够添加一个页面风格一致却内容别具一格的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 {<br />
  2. font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;<br />
  3. position: absolute;<br />
  4. width: 780px;<br />
  5. font-size: 12px;<br />
  6. margin: 0 0 0 30px;<br />
  7. padding: 6px 16px 5px 16px;<br />
  8. _padding: 7px 16px 7px 16px;<br />
  9. text-align: left;<br />
  10. display: block;<br />
  11. }<br />
  12. #menu li {<br />
  13. text-transform: lowercase;<br />
  14. display: inline;<br />
  15. }<br />
  16. #menu a {<br />
  17. color: #FFFFFF;<br />
  18. background: #0082C3;<br />
  19. font-weight: normal;<br />
  20. height: 19px;<br />
  21. padding: 6px 16px 5px 16px;<br />
  22. _padding: 7px 16px 7px 16px;<br />
  23. }<br />
  24. #menu a:hover {<br />
  25. color: #FFFFFF;<br />
  26. background: #95c300;<br />
  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 {<br />
  2. color: #FFFFFF;<br />
  3. background: #95c300;<br />
  4. }

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

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




*You must say some Chinese, or just copy 你好! as begin.


This blog uses the CommentLuv plugin which will try and parse your sites feed and display a link to your last post, please be patient while it tries to find it for you.
2007-02-03
WordPress, 学海无牙
,,
Comments Feed
Trackback
Home Loans