WordPress wp_nav_menu所有参数,以及使用示例

在 WordPress 里,wp_nav_menu() 是个很重要的函数,它的作用是显示已注册的导航菜单。下面为你详细介绍该函数的所有参数和使用示例:

核心参数

  1. theme_location:此参数用于指定要显示的菜单位置,比如 'primary' 或者 'footer-menu'。在主题的 functions.php 文件中,需要先对这些位置进行注册。
  2. menu:可以通过菜单的 ID、名称或者 slug 来直接指定要使用的菜单。
  3. container:该参数决定了菜单的容器元素,默认是 div。若不想使用容器,可将其设置为 false
  4. container_class:用于给容器添加 CSS 类。
  5. container_id:为容器设置唯一的 ID。
  6. menu_class:给菜单列表(<ul>)添加 CSS 类,默认是 menu
  7. menu_id:为菜单列表设置唯一的 ID。
  8. echo:若设置为 false,函数就不会直接输出菜单,而是返回菜单的 HTML 字符串。
  9. fallback_cb:当指定的菜单不存在时,会调用这个回调函数。若设置为 false,则不会显示任何内容。
  10. before:在菜单项链接之前插入的内容。
  11. after:在菜单项链接之后插入的内容。
  12. link_before:在菜单项链接文本之前插入的内容。
  13. link_after:在菜单项链接文本之后插入的内容。
  14. depth:控制菜单的显示深度。设置为 0 时不限制深度,设置为 1 时只显示顶级菜单。
  15. walker:可以传入自定义的 Walker 类,用于自定义菜单的 HTML 结构。
  16. items_wrap:自定义菜单项的包裹 HTML,例如 '<ul>%3$s</ul>'
  17. item_spacing:设置菜单项之间的间距,可选值为 'preserve' 或者 'discard'

使用示例

下面是一些常见的使用场景示例:

基础用法

wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'nav-menu',
    'container'      => 'nav',
    'container_class'=> 'main-navigation',
) );

自定义菜单项结构

wp_nav_menu( array(
    'theme_location' => 'primary',
    'before'         => '<span class="item-prefix">| </span>',
    'after'          => '<span class="item-suffix"> |</span>',
    'link_before'    => '<strong>',
    'link_after'     => '</strong>',
) );

只显示一级菜单

wp_nav_menu( array(
    'theme_location' => 'primary',
    'depth'          => 1,
    'menu_class'     => 'top-level-menu',
) );

不使用容器

wp_nav_menu( array(
    'theme_location' => 'primary',
    'container'      => false,
    'menu_class'     => 'inline-menu',
) );

使用自定义 Walker 类

 

自定义包裹结构

wp_nav_menu( array(
    'theme_location' => 'primary',
    'walker'         => new Custom_Nav_Walker(),
) );

注意要点

  • 要先在主题的 functions.php 文件中使用 register_nav_menus() 函数注册菜单位置。
  • 可以通过 WordPress 后台的 “外观→菜单” 来创建和管理菜单。
  • 若想对菜单结构进行深度定制,比如添加多级下拉菜单,就需要自定义 Walker 类。
  • 借助 beforeafterlink_before 和 link_after 参数,能够灵活地自定义菜单项的 HTML 结构。

通过合理运用这些参数,你可以轻松实现各种导航菜单样式,满足不同的设计需求。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

兔格号 WordPress知识 WordPress wp_nav_menu所有参数,以及使用示例 https://www.tglzm.com/jishu/wp/1422.html

一个独行者,独揽万古

WordPress wp_nav_menu所有参数,以及使用示例
下一篇:

已经没有下一篇了!

常见问题

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务