Wordpress菜单函数wp_nav_menu各参数详解及示例

https://blog.csdn.net/qq_37296622/article/details/82633833

 

注册菜单
首先要注册菜单，将以下函数添加至function.php函数里

register_nav_menus(array(
'PrimaryMenu'=>'导航',
'friendlinks'=>'友情链接',
'footer_nav'=>'页脚导航'));
add_theme_support('nav_menus'); 
1
2
3
4
5
‘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
  ) );
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
这些是几乎所有的参数，还有一个item_space参数没写进去，觉得没什么必要

接着来讲讲这些参数如何使用，并给出了相应例子，以供参考

最简单的用法
    wp_nav_menu( array( 'theme_location'=>'PrimaryMenu', 'depth' => 0) );
?> 
1
2
3
输出结果为：

   

   
• 首页

   
• 一级导航
     
    
         
  • 二级导航
  
         
  • 二级导航1
  
         
  • 二级导航2
  
     
  
     

   

 
1
2
3
4
5
6
7
8
9
10
11
12
这里的类名带有中文，即在后台创建菜单的名称。这是一个默认输出的导航菜单结构

修改最外层容器标签及类名和id
以下这几个参数，可以修改最外层容器的标签，以及它的类名和id，默认为div

      wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'container'  => 'div', 
    'container_class' => 'divclass',
    'container_id'  => 'divid', 
    'depth' => 0
    ));
 ?> 
1
2
3
4
5
6
7
8
9
输出结果

   

   
• 首页

   
• 一级导航
         
    
             
  • 二级导航
  
         
  
     

   

 
1
2
3
4
5
6
7
8
9
10
修改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
    ));
?> 
1
2
3
4
5
6
7
8
输出结果

 

   

   
• 首页

   
• 一级导航
         
    
         
  • 二级导航
  
     

   

 

 
1
2
3
4
5
6
7
8
9
menu参数的使用
menu参数是用来调用想显示的菜单。一般我们都是在后台操作，创建好菜单，勾选了主题位置后，该位置即使用这个菜单。如果有多菜单的情况下，可以通过menu参数去选择，一般输入菜单名称或菜单id。例如我在后台又创建了一个名为nav1的菜单

然后如下设置

    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'menu'   => 'nav1',  //期望显示的菜单（输入名称或菜单id）
    'depth' => 0
    ));
?> 
1
2
3
4
5
6
7
输出结果

   

   
• 示例页面

   

 
1
2
3
4
5
可以看到已经不是输出刚才的菜单了

插入文本参数的使用
通过这四个参数，可以添加文本到导航栏的文本中

    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'before' => '1', //链接前文本
    'after'  => '2', //链接后文本
    'link_before'  => '3',   //链接文本前
    'link_after'  => '4',//链接文本后
    'depth' => 0
    ));
?> 
1
2
3
4
5
6
7
8
9
10
示例输出如下

   

   
• 13首页42

    ………………
1
2
3
4


当然，不止是文本，也可以输出html标签，所以灵活使用这四个参数，可以打造出别具一格的导航菜单

items_wrap参数的使用
这个参数控制次层容器，默认为ul标签，通过修改该参数，可以输出不同的菜单结构

    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'items_wrap'  => '

%3$s
',
    'depth' => 0
    ));

    /*
    参数： 
    %1$s：最外层容器(由参数container控制)的class名，即参数container_class的值
    %2$s：次一层容器class名，默认为menu，即参数menu_class的值
    %3$s：菜单内容
    */
?> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
输出结果


   

   
• 首页

    ………………
   


 
1
2
3
4
5
6
去除ul标签

    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'items_wrap'  => '%3$s',
    'depth' => 0
    ));
?> 
1
2
3
4
5
6
7
输出结果


   
首页

    …………

 
1
2
3
4
关于其他参数
像depth这个参数，默认0就行了

还有其他参数因为几乎很少用到，所以就不讲了

具体内容可以查阅官方文档:https://developer.wordpress.org/reference/functions/wp_nav_menu/

去除或保留菜单多余类名
将以下代码添加至function.php文件即可

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item','current-post-ancestor','current-menu-ancestor','current-menu-parent')) : '';
}
1
2
3
4
5
6
需要去除什么，保留什么，根据使用情况，修改上面的代码即可

构造多级菜单
通过上述例子，很明显默认二级菜单的类名为sub-menu

那么，如果要构造更多级的菜单，以及要修改类名，该怎么办呢？

其实这个可以通过Walker参数来设置

这个参数用于调用一个对象定义显示导航菜单

默认调用的就是Walker_ Nav_Menu这个类

所以我们也可以自己写一个类，来构造多级菜单

例如

 class new_walker extends Walker_Nav_Menu
 {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent

\n";
     }
 }
1
2
3
4
5
6
7
调用方法

    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'walker' => new new_walker(),
    'fallback_cb' => '',
    'depth' => 0
    ));
?> 
1
2
3
4
5
6
7
8
上面只是一个简单例子，通过这个方法，可以自己写一个菜单并调用

如果只是简单修改，可以更改\wp-includes\nav-menu-template.php中默认的Walker_Nav_Menu函数

示例如下：

    function start_lvl( &$output, $depth = 0, $args = array() ) {
    if( $depth == 0 ){
    $output .= '

';
    }else{
    $output .= '
';
    }
    }
?>
    function end_lvl( &$output, $depth = 0, $args = array() ) {
    if( $depth == 0 ){
    $output .= "
";
    }else{
    $output .= '
';
    }
    }
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
按照以上代码，则生成二级菜单时类名为sub-menul,三级菜单为third-menu

那么，以上就是wp_ nav_menu函数的详解及示例了。已经写得尽量详细了，掌握了这些参数的使用，相信实现任何菜单都不在话下。刚接触wordpress时，最早碰到的就是这个函数，吃到了不少苦头，为了做一个菜单功能花了很长时间。现在，终于是理解了这个函数的几乎全部用法，也希望能帮到大家
--------------------- 
作者：逝去abcde 
来源：CSDN 
原文：https://blog.csdn.net/qq_37296622/article/details/82633833 
版权声明：本文为博主原创文章，转载请附上博文链接！