« 终于没有忍住，掉泪了
通过一个小例子来说明 css 工作原理 »

如何制作 wordpress 分类的下拉式导航

2,501 Views 五月 20th, 2008 by peterzsk

最近在修改一个 wordpress 主题，准备开个新站，期间碰到一些之前没有碰到的问题，上网查了些资料，结合自己的实际使用，会陆陆续续写一些 wordpress 主题制作的文章。

今天先来说说 如何制作 wordpress 分类的下拉式选单：

wordpress 默认的导航看起来很不爽（估计看多了），有一些网站里使用下拉式导航，觉得不错，决定将新站改成那样：

menu-pages-categories-wordpress.png

1 . 修改 PHP

首先，修改主题的 header.php 文件，用底下的代码代替旧的相应代码：

  1. <ul id="nav" class="clearfloat">
  2. <li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
  3. <?php wp_list_pages('title_li='); ?>
  4. <li class="cat-item"><a href="#">Categories</a>
  5. <ul class="children">
  6. <?php wp_list_categories('orderby=name&title_li=');
  7. $this_category = get_category($cat);
  8. if (get_category_children($this_category->cat_ID) != "") {
  9. echo "<ul>";
  10. wp_list_categories('orderby=id&show_count=0&title_li=
  11. &use_desc_for_title=1&child_of='.$this_category->cat_ID);
  12. echo "</ul>";
  13. }
  14. ?>
  15. </ul>
  16. </li>
  17. </ul>

例如我原本的 header.php 文件里面相应部分是：

  1. <ul id="nav">
  2. <?php if ('page' != get_option('show_on_front')) { ?>
  3. <li class="<?php if ( is_home() || is_archive() || is_single() || is_paged() || is_search() || (function_exists('is_tag') && is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>">
  4. <a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home','unnamed'); ?>"><?php _e('Home','unnamed'); ?></a>
  5. </li>
  6. <?php } ?>
  7. </ul>

最终被修改成：

  1. <ul id="nav">
  2. <?php if ('page' != get_option('show_on_front')) { ?>
  3. <li class="<?php if ( is_home() || is_archive() || is_single() || is_paged() || is_search() || (function_exists('is_tag') && is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>">
  4. <a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home','unnamed'); ?>"><?php _e('Home','unnamed'); ?></a>
  5. </li>
  6. <?php } ?>
  7. <li class="cat-item"><a href="#">Categories</a>
  8. <ul class="children">
  9. <?php wp_list_categories('orderby=name&title_li=');
  10. $this_category = get_category($cat);
  11. if (get_category_children($this_category->cat_ID) != "") {
  12. echo "<ul>";
  13. wp_list_categories('orderby=id&show_count=0&title_li=
  14. &use_desc_for_title=1&child_of='.$this_category->cat_ID);
  15. echo "</ul>";
  16. }
  17. ?>
  18. </ul>
  19. </li>
  20. </ul>

这段代码是在导航栏里增加一个分类下拉式菜单。

2 . 修改 CSS

有了代码还不行，还需要设定一个 CSS 样式，每个人都有自己不同的 css 设定，这里用我测试blog（zsktest.akaka.com.cn) 里用的主题样式作为例子：

  1. #nav{
  2. background:#222;
  3. font-size:1.1em;
  4. }
  5. #nav, #nav ul {
  6. list-style: none;
  7. line-height: 1;
  8. }
  9. #nav a, #nav a:hover {
  10. display: block;
  11. text-decoration: none;
  12. border:none;
  13. }
  14. #nav li {
  15. float: left;
  16. list-style:none;
  17. border-right:1px solid #a9a9a9;
  18. }
  19. #nav a, #nav a:visited {
  20. display:block;
  21. font-weight:bold;
  22. color: #f5f5f4;
  23. padding:6px 12px;
  24. }
  25. #nav a:hover, #nav a:active, .current_page_item a, #home .on {
  26. background:#000;
  27. text-decoration:none
  28. }
  29. #nav li ul {
  30. position: absolute;
  31. left: -999em;
  32. height: auto;
  33. width: 174px;
  34. border-bottom: 1px solid #a9a9a9;
  35. }
  36. #nav li li {
  37. width: 172px;
  38. border-top: 1px solid #a9a9a9;
  39. border-right: 1px solid #a9a9a9;
  40. border-left: 1px solid #a9a9a9;
  41. background: #777;
  42. }
  43. #nav li li a, #nav li li a:visited {
  44. font-weight:normal;
  45. font-size:0.9em;
  46. color:#FFF;
  47. }
  48. #nav li li a:hover, #nav li li a:active {
  49. background:#000;
  50. }
  51. #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
  52. left: auto;
  53. }
  54. a.main:hover {
  55. background:none;
  56. }

3 . 最后修改 Javascript 脚本

这一步的主要目的是为了使最终的页面在 IE6 里也能正常显示。如果你的 Javascript 在 ie6 已经是正常的，请跳过。需要的请加入：

  1. <![CDATA[//><!--
  2. sfHover = function() {
  3. var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  4. for (var i=0; i<sfEls.length; i++) {
  5. sfEls[i].onmouseover=function() {
  6. this.className+=” sfhover”;
  7. }
  8. sfEls[i].onmouseout=function() {
  9. this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
  10. }
  11. }
  12. }
  13. if (window.attachEvent) window.attachEvent(”onload”, sfHover);
  14. //–><!]]>

我的blog在ie6下已经是正常显示了，所以我跳过这步了。

最终就会显示和第一张图里一样的下拉式导航了。

参考：hackwordpress.com
作者：peterzsk
本文永久链接：http://zsk.akaka.com.cn/2008/05/how-to-make-drop-down-menu/
采用CC创作共用协议,转载需保留以上信息并<署名、非商业和保持一致>。

如果您喜欢我的文章，可以订阅我的 谢谢。

  • 看过本篇的朋友，还看过：

    • 6 Responses to “如何制作 wordpress 分类的下拉式导航”

    1. Gravatar Icon
      1paran

      不错.

      [回复]

      peterzsk reply on 2008-05-20 1:02 pm:

      谢谢

      [回复]

      Comment on May 20th, 2008 at 12:54 pm  
    2. Gravatar Icon
      2一亿度

      我也在考虑要不要做一个导航菜单，mark，以后回来参考

      [回复]

      peterzsk reply on 2008-05-20 5:44 pm:

      主要是 css 很难搞，最近几天弄的头很晕

      [回复]

      一亿度 reply on 2008-05-20 8:56 pm:

      -_-

      [回复]

      Comment on May 20th, 2008 at 5:35 pm  
    1. 1如何制作 wordpress 分类的下拉式导航 | boyeye

      […] 今天先来说说 如何制作 wordpress 分类的下拉式选单： […]

      Pingback on Dec 2nd, 2008 at 6:32 pm   

    Leave a Reply

    « 终于没有忍住，掉泪了
    通过一个小例子来说明 css 工作原理 »