### [WordPress制作主题导航菜单的方法（一）](https://www.prosaas.cn/article/7602)
**Published:** 2023-02-22T11:49:15
**Author:** 5201314
**Excerpt:** WordPress怎么制作主题导航菜单？下面本篇文章给大家分享一下WordPress主题导航菜单制作的几种方法…
WordPress怎么制作主题导航菜单？下面本篇文章给大家分享一下WordPress主题导航菜单制作的几种方法，希望对大家有所帮助！
在WordPress主题制作中，导航菜单的制作算是一个重点，已经写好导航菜单的HTML代码，放在WordPress主题中如何动态调用呢？本文将给你介绍几种编写PHP代码动态实现导航的方法，本文也将只侧重于动态代码的开发，不会教你如何编写HTML、CSS和Javascript来实现华丽的导航菜单。
### **WP 3.0自定义菜单的制作**
WordPress 3.0之后的版本开始支持自定义动态菜单，所谓的动态菜单，也就是允许用户自行决定将哪些项目添加到导航菜单中，进入WordPress的**管理后台 - 外观 - 菜单**栏目，通过拖拉相应的栏目，即可创建自己的菜单。这对于WordPress主题开发者和使用者来说，都是皆大欢喜的事情。要想实现自定义菜单，需要用到的函数是wp\_nav\_menu()，给这个函数传递一些参数就可以输出自定义菜单菜单，下面简单讲讲如何使用使用这个函数。
首先，在主题目录下的functions.php的 3d38b4685f1387219e2e05ec2f41bf10 之间，添加以下菜单注册代码，这样你就可以在主题文件中使用wp\_nav\_menu函数了：
// This theme uses wp\_nav\_menu() in one location.
register\_nav\_menus();
接着我们在主题的导航栏处调用wp\_nav\_menu()，即可输出导航菜单HTML代码：
'mymenu', 'depth' => 1) );
?>
以上代码输出的HTML代码形式如下：
这里列出的 li 项为你在**后台 - 外观 - 菜单**添加的栏目，如果你还没有在后台添加菜单，导航栏将列出所有页面。另外，wp\_nav\_menu会为每个 li 添加class，不同的class标记这个菜单项的属性，如当前打开的是某个文章页面，**分类A** 就是这篇文章所属的分类，那么 **分类A** 所在的 li 将会如下代码所示：
如果是在首页，那么首页的菜单项的 li 可能会如下所示：
从这些class的名称就知道它们的作用，通过给这些class添加css属性，可以达到如高亮当前导航菜单的目的，如将当前菜单链接定义成红色：
.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 的形式来构建菜单列表：如：
如果主题的前端代码不是你写的，而且导航栏的代码写得很龟毛，这根本不是上面的WordPress标准的 ul 导航栏形式，如下面的代码：
- 标题
- 菜单A
- 菜单B
重写前端代码？我想谁都不愿意这样做，那怎么办呢？还有，如果导航栏不使用分类和页面，也不让使用自定义菜单，那怎么办？在实际的应用中，我们还会遇到各种各样且稀奇古怪的需求，下期内容我们将继续探讨这个问题！
推荐学习：《WordPress教程》
以上就是WordPress制作主题导航菜单的方法（一）的详细内容，更多请关注知企PROSAAS其它相关文章！
**Tags:** class, css, html, JavaScript, li, php, ul, WordPress
**Categories:** WordPress
---