WordPress主题导航菜单制作的几种方法(一)

Ludou
人气: 4,506 我要评论( 26 ) 我要投稿
文章目录

     在WordPress主题制作中，导航菜单的制作算是一个重点，已经写好导航菜单的HTML代码，放在WordPress主题中如何动态调用呢？本文将给你介绍几种编写PHP代码动态实现导航的方法，本文也将只侧重于动态代码的开发，不会教你如何编写HTML、CSS和Javascript来实现华丽的导航菜单。

WP 3.0自定义菜单的制作

     WordPress 3.0之后的版本开始支持自定义动态菜单，所谓的动态菜单，也就是允许用户自行决定将哪些项目添加到导航菜单中，进入WordPress的管理后台 – 外观 – 菜单栏目，通过拖拉相应的栏目，即可创建自己的菜单。这对于WordPress主题开发者和使用者来说，都是皆大欢喜的事情。要想实现自定义菜单，需要用到的函数是wp_nav_menu()，给这个函数传递一些参数就可以输出自定义菜单菜单，下面简单讲讲如何使用使用这个函数。

     首先，在主题目录下的functions.php的 <?php ….. ?> 之间，添加以下菜单注册代码，这样你就可以在主题文件中使用wp_nav_menu函数了：

1
2
// This theme uses wp_nav_menu() in one location.
register_nav_menus();

     接着我们在主题的导航栏处调用wp_nav_menu()，即可输出导航菜单HTML代码：

1
2
3
4
<?php
    // 列出顶部导航菜单，菜单名称为mymenu，只列出一级菜单
    wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) );
?>

     以上代码输出的HTML代码形式如下：

1
2
3
4
5
6
7
<div class="menu-menu-container">
    <ul class="menu" id="menu-menu">
        <li class="..." id="menu-item-1"><a href="...">首页</a></li>
        <li class="..." id="menu-item-2"><a href="...">分类A</a></li>
        ...
    </ul>
</div>

     这里列出的 li 项为你在后台 – 外观 – 菜单添加的栏目，如果你还没有在后台添加菜单，导航栏将列出所有页面。另外，wp_nav_menu会为每个 li 添加class，不同的class标记这个菜单项的属性，如当前打开的是某个文章页面，分类A 就是这篇文章所属的分类，那么 分类A 所在的 li 将会如下代码所示：

1
<li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分类A</a></li>

     如果是在首页，那么首页的菜单项的 li 可能会如下所示：

1
<li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首页</a></li>

     从这些class的名称就知道它们的作用，通过给这些class添加css属性，可以达到如高亮当前导航菜单的目的，如将当前菜单链接定义成红色：

1
2
3
.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {
    color: red;
}

     好了，WordPress 3.0的自定义菜单的调用就是这么简单。wp_nav_menu还有很多参数，如自定义 ul 节点、ul 父节点的id和class的参数等等，详情可以参考文档：官方文档 | 中文文档

使用分类和页面作为导航栏

     在 WordPress 3.0 之前，大部分WordPress主题都是拿页面作为导航栏的，导航中只能添加页面，显得不够自由。我刚用WordPress 2.7的时候，就为此问题烦恼，最后翻了文档，查了一些资料，实现了在导航中添加分类，详情请看我之前写的文章：WordPress 分类做导航栏，并高亮显示

非常规导航栏的制作

     以上提到的两种方式，都是使用WordPress自带的函数来实现，他们输入的HTML代码也都是限定好的，就是使用 ul li 的形式来构建菜单列表：如：

1
2
3
4
<ul>
    <li class="..">...</li>
    <li class="..">...</li>
</ul>

     如果主题的前端代码不是你写的，而且导航栏的代码写得很龟毛，这根本不是上面的WordPress标准的 ul 导航栏形式，如下面的代码：

1
2
3
4
5
<dl>
    <dt><strong>标题</strong></dt>
    <dd><a target="_blank" title="#" href="#">菜单A</a></dd>
    <dd><a target="_blank" title="#" href="#">菜单B</a></dd>
</dl>

     重写前端代码？我想谁都不愿意这样做，那怎么办呢？还有，如果导航栏不使用分类和页面，也不让使用自定义菜单，那怎么办？在实际的应用中，我们还会遇到各种各样且稀奇古怪的需求，下期内容我们将继续探讨这个问题！详见：WordPress主题导航菜单制作的几种方法(二)

订阅 分享 回复

本文版权归露兜博客所有，转载引用请完整注明以下信息：
本文作者：Ludou
本文标题：WordPress主题导航菜单制作的几种方法(一)
本文地址：http://www.ludou.org/wordpress-create-navigation-menu.html

Ludou

露兜博客博主，男生，业余Web程序员，儒家思想受益者。文采不佳，不喜欢聚光灯，不喜欢吹牛，不喜欢无序的做事方式。闲时喜欢写些代码自娱自乐，并在博客中分享一些个人技术经验。

标签: , ,

26 条评论

我来说两句
  1. wEixiNu
    2011年4月14日 19:54

    学习了
    貌似用wordpress的页面再加上二级页面等等再转向存档也可以达到菜单效果

    回复
  2. 刘峰律师博客
    2011年4月14日 23:57

    非常喜欢博主的文章，希望能交换友链，方便常来支持。

    回复
  3. 倡萌
    2011年4月15日 00:45

    很好的教程，呵呵呵

    回复
  4. 猫10博客
    2011年4月15日 07:55

    我找了好些天关于导航的教程了 太谢谢了~

    回复
  5. 花花视界
    2011年4月15日 10:29

    wp程序一只都很强大的，方便扩展的。

    回复
  6. 软件盒子
    2011年4月15日 12:52

    有付费服务了，好啊，支持

    回复
  7. WordPress啦
    2011年4月16日 11:56

    自定义的CSS学的不好的话，还真是不好做

    回复
  8. 瞿胜佳
    2011年4月17日 15:32

    这个可以有。

    回复
  9. 笨猫
    2011年4月17日 20:48

    不错。学习了哈

    回复
  10. alenzen
    2011年4月17日 22:34

    现在很多主题都支持自定义菜单了，都懒得折腾。

    回复
  11. 皇家元林
    2011年4月19日 13:16

    有个问题，我设置二级菜单后，居然直接显示在导航下面，而不是当鼠标移到主菜单时 才显示，，这是为什么啊？

    回复
  12. 求索阁
    2011年4月19日 21:34

    这个系列教程很不错~！

    回复
  13. 小胖
    2011年4月20日 12:50

    博主你好，看了你的博客，写得很好。我是新人，我想设置一个我的一个博客新网效果像这个网站***一样，不知道博主是否可以指点一下，先谢谢了。我的QQ：***

    回复
  14. 好去处
    2011年4月24日 20:36

    从文字上已经明白了意思，之前也在弄如何把分类导航换成菜单导航，但一直遇到很多问题，看到这个教程有空再去试试，遇到了问题再发上来和大家讨论

    回复
  15. 李运明
    2011年6月8日 00:58

    找了很久，终于在此找到方法，很详细，很有用，谢谢楼主的分享

    回复
  16. 摇臂钻
    2012年2月3日 20:38

    你的每一篇文章是我每天比关注您的原动力

    回复
  17. 云淡然
    2012年3月17日 14:37

    你的文章非常好, 学制作主题就是从你这里开始的, 长期关注!!!

    回复
  18. jeanva
    2012年3月27日 13:34

    很用心的博主，真的！

    回复

发表评论

订阅评论