坚持wordpress菜单到bootstrap

Question

我希望我的菜单保持这种状态。

<ul class="navbar-nav ml-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Inicio
      <span class="sr-only">(current)</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Nosotros</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contactanos</a>
  </li>
</ul>

我尝试按如下方式进行

<ul class="navbar-nav ml-auto">
  <?php 
    wp_nav_menu([
      'container'      => false,
      'items_wrap'     => '%3$s',
      'theme_location' => 'menu_top'               
    ]);
  ?>
</ul>

在档案functions.php

<?php 

register_nav_menus([
   'menu_top' => 'Menu superior'
]);

?>

但我实现的目标是获得以下内容

<ul class="navbar-nav ml-auto">
    <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a href="#">inicio</a></li>
</ul>

就像我做的那样放置我想要的类，并且像我一样指定一个选项是active。我正在使用bootstrap 4。

Answer 1

使用此代码，您可以收集菜单的项目并使用foreach打印：

<?php
  $currentURL         = home_url( $_SERVER['REQUEST_URI'] );                      
  $menuItemCollection = wp_get_nav_menu_items( 'menu_top' );
?>

<ul class="navbar-nav ml-auto">
  <?php foreach ( $menuItemCollection as $menuItem ): ?>
    <?php $activeClass = ($menuItem->url == $currentURL) ? ' active' : ''; ?>

    <li class="nav-item<?php echo $activeClass; ?>">
      <a class="nav-link" href="<?php echo $menuItem->url; ?>">                                        
        <?php echo $menuItem->title; ?>
      </a>
    </li>

  <?php endforeach; ?>
</ul>