我们在开发网站使用 WordPress 制作导航菜单,会使用 wp_nav_menu 函数,它可以自动调用出后台创建的导航菜单。但是使用默认的 wp_nav_menu 函数生成的菜单结构比较单调,有时很难达到我们自己的需要。
下面学做介绍一下 WordPress 如何使用 wp_nav_menu 函数生成需要的 class 结构。
在WordPress主题中使用函数来创建导航菜单。确保你在主题的文件中注册了一个自定义菜单。
在主题模板文件中添加以下代码来显示导航菜单:
需要用到下面这个函数
如果使用Bootstrap样式:
使用Bootstrap的CSS类来样式化导航菜单。例如,你可以将导航菜单容器设置为Bootstrap的类,并添加其他所需的类。
wp_nav_menu() 默认使用的菜单项CSS类
以下类适用于菜单项,即HTML生成的HTML 标签wp_nav_menu():
:此类添加到每个菜单项。
:此类已添加到具有子项的菜单项。
:此类添加到每个菜单项,其中{object}是发布类型或分类法。
:此类已添加到与类别相对应的菜单项中。
:此类已添加到与标签相对应的菜单项中。
:此类已添加到与静态页面相对应的菜单项中。
:此类已添加到与自定义帖子类型或自定义分类法相对应的菜单项。
:此类添加到每个菜单项,其中{type}是“ post_type”或“分类”。
:此类被添加到与帖子类型相对应的菜单项中:静态页面或自定义帖子类型。
:此类添加到与分类法相对应的菜单项:即类别,标签或自定义分类法。
当前页面菜单项
:此类已添加到与当前呈现的页面相对应的菜单项中。
当前页面父菜单项
:此类已添加到与当前呈现的页面的层次结构父级相对应的菜单项中。
:此类被添加到与当前渲染的对象的层次父级相对应的菜单项中,其中{object}对应于.menu-item-object- {object}所使用的值。
:此类已添加到与当前呈现的类型的层级父级相对应的菜单项中,其中{type}对应于.menu-item-type- {type}所使用的值。
当前页面祖先菜单项
:此类被添加到与当前呈现的页面的层次祖先相对应的菜单项中。
:此类已添加到与当前渲染的对象的层级祖先相对应的菜单项中,其中{object}对应于.menu-item-object- {object}所使用的值。
:此类被添加到与当前呈现类型的层次结构祖先相对应的菜单项中,其中{type}对应于.menu-item-type- {type}所使用的值。
网站首页菜单项
:此类已添加到与网站首页相对应的菜单项中。
并且向后兼容wp_page_menu()添加了以下类以保持与[[Function Reference / wp_page_menu | wp_page_menu() ]]函数输出:
:此类已添加到与静态页面相对应的菜单项中。
:此类被添加到具有子页面的菜单项中。
:此类被添加到与静态页面相对应的菜单项中,其中$ ID是静态页面ID。
:此类被添加到与当前呈现的静态页面相对应的菜单项中。
:此类已添加到与当前呈现的静态页面的层次结构父级相对应的菜单项中。
:此类已添加到与当前呈现的静态页面的分层祖先相对应的菜单项中。
这个 Walker 类负责生成符合 Bootstrap 样式的导航菜单。请将以上两段代码添加到你的主题的 文件中。需要创建一个自定义的导航菜单 Walker 类来处理 Bootstrap 的导航结构。下面是一个 Walker 类:
上面代码直接放在文件中即可,当然如果觉得放在中臃肿,还可以单独放在一个文件中,在中引用即可。如下: