版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012809520/article/details/88572385
提前阅读:
WordPress主题制作之菜单
在使用wp_nav_menu设置菜单显示项,对于二级菜单的类名(默认sub-menu)无法修改。在这种情况下可以利用Walker来设置。
实际上,wp_nav_menu()函数默认调用了一个核心提供的对象,即“Walker_ Nav_Menu”。
这里重新写了一个类,比如起名wp_bootstrap_navwalker(),继承“Walker_ Nav_Menu”并重新编写。以便构造合适的多级菜单。
通过代码:‘walker’ => new wp_bootstrap_navwalker() 调用该对象。实现对二级菜单类名的修改。
案例,原始代码如下(还没有调用wordpress代码):
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
实现步骤如下:
第一步、准备类:
如下类是我们在一直支持bootstrap的主题中找到的,
文件名:class-wp-bootstrap-navwalker.php
类:understrap_WP_Bootstrap_Navwalker()
class Understrap_WP_Bootstrap_Navwalker extends Walker_Nav_Menu
其他来源:
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
第二步:在functions.php导入bootstrap菜单样式
include_once(‘inc/wp_bootstrap_navwalker.php’);
第三步:显示
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here -->
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'depth' => 2,
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
)
);
?>
</div>
</nav>
对应HTML
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here -->
<div id="navbarNavDropdown" class="collapse navbar-collapse">
<ul id="main-menu" class="navbar-nav ml-auto">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1121" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1121 nav-item"><a title="Home" href="#" class="nav-link">Home</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1122" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1122 nav-item"><a title="About" href="#" class="nav-link">About</a></li>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-1122" role="menu">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1125" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1125 nav-item"><a title="sub-about" href="#" class="dropdown-item">sub-about</a></li>
</ul>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1123" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1123 nav-item"><a title="Services" href="#" class="nav-link">Services</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1124" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1124 nav-item"><a title="Contact" href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>
备注:多余的类和ID是程序自动添加的,可以去除或保留菜单多余类名,参考相关文档《去除或保留菜单多余类名》。