pzg's blog

导航菜单使用教程wp_nav_menu()

添加导航菜单和菜单项

你可以创建多个导航菜单,每个菜单里,可以添加自定义链接项、页面项和分类项进去。

添加进去以后,你可以又再编辑每个项目的链接,输出文本和Title属性。

你可以拖拽每个项目来排序菜单项。

3、通过Widget输出导航菜单

添加好菜单后,进入Appearance-》Widgets(外观-》小工具), 把Navigation Menu这个Widget拖到你的Sidebar模块里,选择一个菜单输出即要。

4、通过手动代码输出导航菜单

如果你的主题不支持Widget或你不想使用Widget,你可以使用函数wp_nav_menu()直接输出导航菜单:

以下为引用的内容:

<?php wp_nav_menu($args); ?>
 


该函数可传递一个数组进去,指定该菜单的各项参数,比如调用哪个菜单、如何排序、给菜单指定一个div层等等。具体的各参数取值请见官方说明文档。

当你使用<?php wp_nav_menu(); ?>时,将调用第一个导航菜单。如果你想调用其它菜单,可以通过菜单的id, slug, menu名称来指定:

以下为引用的内容:

<?php wp_nav_menu(array(‘id’=>5));  ?>
or
<?php wp_nav_menu(array(‘menu’=>’Test Menu’));  ?>
or
<?php wp_nav_menu(array(‘slug’=>’testmenu’));  ?>
 
但不知道是beta2还有bug还是我没折腾成功,有几个问题需要注意:

我测试时,使用id并不能成功指定某个菜单。

没有地方指定和寻找菜单的slug。

‘menu’=>’’菜单名称’可用。但当菜单名称使用的是中文,且你手动函数输出菜单的时候,你的模板代码应该是UTF-8或ANSI as UTF-8模式,才能正确的指定某个菜单。但不建议使用中文做为菜单名,中文菜单名还会输出一长串URL编码的字符指定为该菜单的id值,看着特不舒服。

5、CSS样式化菜单风格

下图是我测试的一个菜单输出的html代码,它包含几个外部自定义链接,一篇内部文章的自定义链接,一个分类和一个页面。

我们可以看到,每个菜单项都含有一系列的class选择器:

每个菜单项都含class选择器menu-item

每个菜单项含有菜单类型class选择器: 比如自定义链接项含menu-item-type-custom, 页面项含menu-item-type_post_type, 分类项含menu-item-type-taxonomy

1、页面项含菜单的对象类型class选择器 menu-item-object-page

2、分类项含菜单的对象类型class选择器menu-item-object-category

3、当位置处于当前页面或当前分类的时候,增加一个供高亮样式的class选择器current-menu-item

4、当位置是一篇post文章时,该post如果在菜单中,也会增加高亮class选择器,同时,它所属的分类也会增加高亮class选择器。

所以,我们可以通过这些选择器的不同来进行CSS样式化,比如把页面、分类和自定义链接指定不同的字体颜色,让当前项反色显示等等。

《 “导航菜单使用教程wp_nav_menu()” 》 有 2 条评论

  1. 学夫子 的头像

    我用的是emlog,飘过,哈哈

    1. countmeon 的头像

      各有所好,所以会有不同的不文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注