将 Bootstrap 4 导航栏与 wordpress 4.x 结合的问题答案

【问题标题】：Problems incorporating Bootstrap 4 navbar with wordpress 4.x将 Bootstrap 4 导航栏与 wordpress 4.x 结合的问题
【发布时间】：2018-12-16 11:47:38
【问题描述】：

使用 wordpress 开发一个合并的引导导航栏，它不适合我。下面是 wordpress wp_nav_menu 函数和我注释掉的导航栏代码（有效）。我注意到奇怪的事情是 wordpress 把课程放在了错误的地方。

<?php
   wp_nav_menu( array(
      'theme_location'   => 'primary',
      'menu'             => 'primary',
      'container'        => 'div',
      'container_class'  => 'navbar-collapse collapse justify-content-end',
      'menu_class'       => 'nav navbar-nav'
                    ) );
?>
<!-- <div class="navbar-collapse collapse justify-content-end">
        <ul class="nav navbar-nav">
           <li class="nav-item"><a href="/" class="nav-link">Test 1</a></li>
           <li class="nav-item"><a href="/" class="nav-link">Test 2</a</li>           
        </ul>
     </div> 
-->

Wordpress 按如下方式构建 html，因为类没有应用在正确的节点上，这当然会中断。 ul 没有类，因为容器有错误的类。

<div class="nav navbar-nav">
   <ul>
      <li class="page_item page-item-12"><a 
      href="http://localhost/fmr/Test1">Test 1</a></li>
      <li class="page_item page-item-8 current_page_item"><a 
      href="http://localhost/fmr/">Test 2</a></li>
   </ul>
</div>

有什么建议吗？

谢谢！

【问题讨论】：

我刚刚在 WordPress 4.9.7 上对其进行了测试，它运行良好。我得到了预期的结果。我想知道有没有一个插件弄乱了它。您是否经历过通常的 WordPress 调试 - 打开和关闭插件和主题等？
这看起来与您的问题wordpress.org/support/topic/wp_nav_menu-menu_class-usage-bug/… 的行为相似，并且此处发布了解决方案：thinkncode.com/…。你试过了吗？
@DerekNolan 不，我没有通常的 wordpress 调试，因为我不知道那是什么意思 :-) 这些年来我一直在最低限度地使用 wordpress。这一次，我试图深入了解它。至于打开/关闭插件。我还没有任何插件。所以不要认为这是这里的问题
@DerekNolan 我尝试了上面的解决方案。它建议添加 'fallback_cb' => 'false' 但现在菜单完全消失了。
菜单存在吗？ 'menu' => 'primary'，表示你在后台设置了一个名为'primary'的菜单。

标签： html css wordpress twitter-bootstrap

【解决方案1】：

在设置数组中，菜单设置为primary。这应该设置为后端菜单的标题。在这种情况下，菜单应该是主菜单。

<?php
   wp_nav_menu( array(
      'theme_location'   => 'primary',
      'menu'             => 'Main Menu',
      'container'        => 'div',
      'container_class'  => 'navbar-collapse collapse justify-content-end',
      'menu_class'       => 'nav navbar-nav'
   ) );
?>

【讨论】：