Wordpress菜单函数wp_nav_menu各参数详解及示例
Wordpress菜单函数wp_nav_menu各参数详解及示例
注册菜单
首先要注册菜单，将以下函数添加至function.php函数里
register_nav_menus(array(
'PrimaryMenu'=>'导航',
'friendlinks'=>'友情链接',
'footer_nav'=>'页脚导航'));
add_theme_support('nav_menus');
'PrimaryMenu'=>'导航'
这个表示导航栏的名称，左边是别名，右边是名称。别名会用在导航栏的调用上，名称则显示在菜单后台页面上
添加上述函数后，进入wp后台，在左侧菜单的"外观"里即多了"菜单"选项
创建菜单
创建一个名称为"导航栏"的菜单
可以看到主题位置显示了三个位置，即刚才我们添加到function.php的函数里设置的
注册导航栏
在后台创建了菜单，并勾选主题位置后，开始下一步
引用菜单
在主题文件对应位置，引用导航栏。需要用到下面这个函数
wp_nav_menu( array(
'theme_location' => '',//导航别名
'menu' => '', //期望显示的菜单
'container' => 'div', //容器标签
'container_class' => '',//ul父节点class值
'container_id' => '', //ul父节点id值
'menu_class' => 'menu', //ul节点class值
'menu_id' => '', //ul节点id值
'echo' => true,//是否输出菜单，默认为真
'fallback_cb' => 'wp_page_menu', //菜单不存在时，返回默认菜单，设为false则不返回
'before' => '', //链接前文本
'after' => '', //链接后文本
'link_before' => '', //链接文本前
'link_after' => '',//链接文本后
'items_wrap' => '
- %3$s
'depth' => 0, //菜单深度，默认0
'walker' => '' //自定义walker
) );
?>
这些是几乎所有的参数，还有一个item_space参数没写进去，觉得没什么必要
接着来讲讲这些参数如何使用，并给出了相应例子，以供参考
最简单的用法
wp_nav_menu( array( 'theme_location'=>'PrimaryMenu', 'depth' => 0) );
?>
1
2
3
输出结果为：
这里的类名带有中文，即在后台创建菜单的名称。这是一个默认输出的导航菜单结构
修改最外层容器标签及类名和id
以下这几个参数，可以修改最外层容器的标签，以及它的类名和id，默认为div
wp_nav_menu( array(
'theme_location'=>'PrimaryMenu',
'container' => 'div',
'container_class' => 'divclass',
'container_id' => 'divid',
'depth' => 0
));
?>
输出结果
修改ul的class和id
导航菜单的次层容器默认为ul，当然也是可改的，后面会讲到。这里给出了如何修改ul的类名和id
wp_nav_menu( array(
'theme_location'=>'PrimaryMenu',
'menu_class' => 'menuclass', //ul节点class值
'menu_id' => 'menuid', //ul节点id值
'depth' => 0
));
?>
输出结果
menu参数的使用
menu参数是用来调用想显示的菜单。一般我们都是在后台操作，创建好菜单，勾选了主题位置后，该位置即使用这个菜单。如果有多菜单的情况下，可以通过menu参数去选择，一般输入菜单名称或菜单id。例如我在后台又创建了一个名为nav1的菜单
menu
然后如下设置
wp_nav_menu( array(
'theme_location'=>'PrimaryMenu',
'menu' => 'nav1', //期望显示的菜单（输入名称或菜单id）
'depth' => 0
));
?>
输出结果
可以看到已经不是输出刚才的菜单了
插入文本参数的使用
通过这四个参数，可以添加文本到导航栏的文本中
wp_nav_menu( array(
'theme_location'=>'PrimaryMenu',
'before' => '1', //链接前文本
'after' => '2', //链接后文本
'link_before' => '3', //链接文本前
'link_after' => '4',//链接文本后
'depth' => 0
));
?>
示例输出如下