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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值