在使用wordpress过程中,你有可能是下载别人的主题,也有可能是你自己开发的。最终我们都会遇到一个问题:
wordpress如何添加自定义菜单?
是啊!wp如何自定义菜单呢?
今天在做sinaapp上的一个项目的时候遇到了这个问题,于是就记了下来!
一:首先在主题中注册一个菜单
用到的两个函数:
- register_nav_menu(): 注册一个单一的菜单位置。
- register_nav_menus(): 注册多个菜单位置。
在修改的主题文件夹中找到:functions.php,添加下面的代码
[php]
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'Primary Menu' ),
) );</pre>
[/php]
mary Navigation”是我们在代码中用于标识该菜单的别名。“Primary Menu”是我们在控制面板中用于标识该菜单的标签。
也可以用:
[php]add_theme_support( 'nav-menus' );[/php]
但只修改这里,并不会真正在主题导航菜单上启用这个功能,只会在侧边小工具中多出custom menu小工具一项,还需修改导航部分代码,才会体验到新的功能。
二:然后就是显示导航菜单
大多数主题都会在 header.php 模板中调用一个导航栏,但是MENUS能够放在主题的任何位置。调用自定义导航菜单的最简单形式为:
[php]wp_nav_menu();[/php]
该语句将会加载用户创建的菜单或者如果导航菜单不存在的话就调用一个标准的页面列表。
我们可能想对这个调用进行更多的控制。如果从前面提到的 Primary Menu 来调用一个导航菜单,可以这么做:
[php]wp_nav_menu(array('theme_location'=>'primary-menu'));[/php]
你还可以拥有更多的控制权。wp_nav_menu() 函数有几个参数,可以用来对将要显示的菜单进行控制:
theme_location: 调用一个与特定的主题位置相关联的菜单。
menu: 调用指定ID、别名或名称的菜单。
container: 封装该菜单的元素。默认是 div,但是如果你使用HTML 5的话,你也可以改为nav。
container_class: 封装元素的CSS类(指定其显示样式)。
menu_class: 指定无序列表的CSS类,默认是 menu。
fallback_cb: 指定不存在菜单项目时要调用的函数。默认情况下会调用wp_list_pages() 函数(WordPress的静态页面列表)。
before: 要显示在链接文字之前的文字(也是链接的一部分)。
after: 要显示在链接文字之后的文字(也是链接的一部分)。
link_before: 要显示在链接前面的文字(不是链接的一部分)。
link_after: 要显示在链接后面的文字(不是链接的一部分)。
depth: 指定显示菜单的层次深度,这在定义下拉式菜单的比较有用。默认情况是0(所有层次)。
walker: 允许自定义一个walker(巡游?)PHP 类来创建菜单。
echo: 定义是显示该菜单还是仅仅返回数据供PHP程序使用。默认是真,直接显示该菜单。
三:一些有用的相关函数
下拉导航菜单
假设你希望用户加入条目后该菜单才显示出来。该特性让我们可以使用很多的布局方式。下面的说明让你能够支持最多4种布局方式。
这种设置的关键在于确保系统不会因为没有检测到memus而调用默认的菜单。下面以前面创建的主菜单 (Primary Menu) 为例进行说明。
[php]>wp_nav_menu( array('theme_location'=>'primary-menu', 'fallback_cb'=>''));[/php]
上面的代码告诉WordPress,我们不希望WordPress因为用户没有给菜单添加条目(因而该菜单不会显示)而被回调到任何别的菜单(WordPress默认情况下可能会调用默认的菜单,是不是它觉得你总该有个菜单吧:-))。
检查某个主题位置是否存在一个菜单
WordPress 提供了一个条件函数has_nav_menu() 来检查特定主题位置是否存在一个菜单。假设我们创建了一个容器,其中包含了一个菜单和一个搜索框。但是,如果没有为该位置定义菜单,我们希望这两个东西都 不显示出来。也就是说,让这两样东西要么同时出现,要么都不出现。
当你在某个主题位置调用一个菜单时,可以先检查是否有菜单关联到该位置。注意,下面的例子中我们使用菜单别名而不是名称或者ID来进行判断。
[php]has_nav_menu('primary-menu');[/php]
允许更多地菜单容器标签
默认的菜单系统只允许使用 <div> 和 <nav> 作为菜单容器。这能满足大多数需要。但是,如果因为某些原因,你需要使用别的容器来包含菜单,你可以使用下面的代码来实现。
[php]add_filter('wp_nav_menu_container_allowedtags', 'my_menu_allowed_tags');
function my_menu_allowed_tags( $tags ) {
$tags[] = 'p';
return $tags;
}[/php]
请注意,这里的 <p> 标签仅仅是个例子,实际上一般不会使用这样的标签来包含一个菜单。
获取所有主题位置列表
如果你需要列出主题中所有的菜单位置,需要使用下面的函数。该函数返回一个包含所有位置的数组。
[php]$locations = get_nav_menu_locations();[/php]
创建一个菜单
多数主题开发者应该不会使用这样的函数,但是也可能会有需要它的地方。大多数情况下,我们应该使用主题位置定 义函数(register_nav_menu())而不是这个函数。但是,如果你需要通过程序来控制一个菜单的创建,就需要使用 wp_create_nav_menu() 函数了。
[php]wp_create_nav_menu('Menu Name', array('slug' => 'menu-slug'));[/php]
检查指定的菜单是否存在
这个函数对主题开发人员可能没什么用,但是迟早还是会用到的。它让你能够通过ID、名称或别名来检查特定的菜单是否存在。
[php]if ( is_nav_menu( 'menu-slug' ) )
/* 如果该菜单存在则执行…… */
else
/* 如果该菜单不存在就执行…… */[/php]