wordpress中wp_nav_menu的用法

1. 作用

wp_nav_menu主要用于显示一个导航菜单，此函数存在于wp-includes/nav-menu-template.php的文件中。

2.参数

wp_nav_menu接受一个可选的数组参数，不传任何参数，默认为一个空数组args=array()

• menu

    (Int/String),可以是一个菜单id，别名，名称或者对象。

    这里在wordpress管理后台创建了两个菜单

于是可以这样使用：

<?php 

wp_nav_menu(array("menu"=>"myFirstMenu"));
?>

或者

<?php 

wp_nav_menu(array("menu"=>145));
?>

效果如下：

可以看一下源码，打开google调试工具，

• menu_class

不过这样看起来终究不是美观，可以加一个类来美化,menu_class这个参数允许添加自定义CSS类，将被添加在ul元素上，如果不设置这个参数，有一个默认值'menu'

这里添加一个'sf-menu'CSS类，

<?php 

wp_nav_menu(array("menu"=>145,"menu_class"=>"sf-menu"));
?>

效果如下：

查看源码，可以看到ul元素上默认值menu被替换成了'sf-menu',

如果要添加多个类，只需将字符串用空格隔开即可

<?php
 wp_nav_menu(array("menu"=>145,"menu_class"=>"sf-menu aa bb"));
?>

• menu_id

要给ul元素加一个id，那么menu_id就有用了，如果不设置这个menu_id,那么menu-菜单别名(slug)将被使用。

<?php 

wp_nav_menu(array("menu"=>145,"menu_class"=>"sf-menu","menu_id"=>"aa"));
?>

• container

container这个选项，允许定义在ul元素的外边使用什么标签，如果没有设置，默认的使用div。

<?php 

wp_nav_menu(array("menu"=>145,"menu_class"=>"sf-menu","menu_id"=>"aa","container"=>"div"));
?>

• container_class

给这个容器设置CSS类

• container_id

给这个容器设置id

• fallback_cb

如果给定的菜单不存在，此回调函数被调用，默认调用wp_page_menu,设置成false，不调用。

注意，此处的菜单不存在并不是指的是调用时写了一个错误的菜单名称，指的是没有创建菜单。

• before 和 after

表示在链接标记的前后加字符串，可以是文本和html。理解：类似jQuery的before和after

• link_before和link_after

表示在链接文字的前后加字符串，可以是文本和html。理解：类似jQuery的prepend和append

<?

php wp_nav_menu(array(
    "menu"=>"myFirstMenu",
    "menu_class"=>"sf-menu",
    "menu_id"=>"aa",
    "container"=>"div",
    "container_class"=>"bb",
    "container_id"=>"cc",
    "fallback_cb"=>"noMenu",
    "link_before"=>"<span>my</span>",
    "link_after"=>"gg",
));

?>

• echo

表示是否输出字符串还是返回字符串，默认为true，如果你设置成false，你可以使用变量接受此函数返回的结果。

• depth

是指菜单返回的层级，默认为0，这表示返回所有层级。

<?php echo wp_nav_menu(array(
    "menu"=>"myFirstMenu",
    "menu_class"=>"sf-menu",
    "menu_id"=>"aa",
    "container"=>"div",
    "container_class"=>"bb",
    "container_id"=>"cc",
    "fallback_cb"=>"noMenu",
    "link_before"=>"<span>my</span>",
    "link_after"=>"gg",
    "echo"=>false,
    "depth"=>2
));

?>

• walker

一个自定义walker类的实例

• theme_location

要使用的位置，需要使用register_nav_menu()注册后使用。

在主题functions.php中注册kitty，

<?php
add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
  register_nav_menu( 'kitty', __( 'kitty Menu', 'theme-slug' ) );
}
?>

结果：

• items_wrap
• item_spacing

仅有两个可选值，discard和preserve，表示是否去除空格，默认值为preserve