WordPress 3.0 – 2:导航菜单使用教程wp_nav_men…

wordpress 3.0的导航菜单功能或许是最受欢迎的一项新功能。不管对于WordPress新手还是开发人员来说，它都提供了极大的便利。本文将教你如何使用WordPress 3.0的导航菜单功能。

1、激活导航菜单功能

在外观/Appearance里面有个Menus菜单项，如果你的主题并没有激活导航菜单功能，该页将显示提示：

The current theme does not support menus.

你的主题还没有激活菜单功能。如何激活呢？很简单，把下面的代码放到你的functions.php文件中：

以下为引用的内容： add_theme_support( 'nav-menus' );

然后刷新Menus页面，你会看到下图中的样子。

WordPress beta2 Menus截图

如果你看过本站之前发布的文章WordPress 3.0 – 1：强大新功能一览，你会发现，之前的菜单页面截图和现在不同。是的，之前用的是3.0 beta1， 现在是3.0 beta2，导航菜单功能的界面有了很大的改变，估计3.0正式版出来，应该也就是这个样子了。

2、添加导航菜单和菜单项

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

添加进去以后，你可以又再编辑每个项目的链接，输出文本和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样式化，比如把页面、分类和自定义链接指定不同的字体颜色，让当前项反色显示等等。

好了， 这就是Wordpress 3.0的导航菜单使用教程了，让我们一起期待正式版的发布吧。

来源于：WordPress 3.0 – 2：导航菜单使用教程wp_nav_menu()

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有