Wordpress 下拉菜单（引导程序）

Posted 2023-03-21

【中文标题】Wordpress 下拉菜单（引导程序）

【英文标题】：Wordpress dropdown menu (bootstrap)

【发布时间】：2021-07-22 06:32:19

【问题描述】：

我在我的 Wordpress 中创建了菜单，其中一个菜单项有一个子菜单。那么，我应该如何修改此代码以获得像 Bootstrap Navs 中的下拉导航？

<?php 
       wp_nav_menu(array(
       'theme-location'=>'header_menu',
       'menu_class' => 'nav',
       'my_menu_li_class' => 'nav-item',
        'my_menu_a_class' => 'nav-link js-scroll-trigger'
                        
    )); 
?>
                 

引导示例：

<ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

【参考方案1】：

我找到了解决办法。

我使用theme将此代码添加到我的目录中 在function.php中我添加了这段代码：

function register_navwalker() 
   require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

add_action( 'after_setup_theme', 'register_navwalker' );

然后我在菜单代码中添加了参数：

<?php 
        wp_nav_menu(array(
        'theme-location'=>'header_menu',
        'menu_class' => 'nav',
        'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
        'walker' => new WP_Bootstrap_Navwalker(),                     
   )); 
?>