Wordpress Bootstrap 响应式导航菜单 - 如何使用 Bootstrap Navwalker 切换顶部菜单的 href 链接

Question

例如，在我的 wordpress 导航菜单设置中，如下所示。

• 首页
• 关于我们
  • 我们是谁？
  • 我们做什么？
• 服务
  • 网页开发
  • 网页设计

在所有这些菜单和子菜单上，我为每个菜单设置了页面链接，以便用户可以随意导航。

但是当我使用本教程中讨论的 Bootstrap navwalker php 插件时
http://www.pattonwebz.com/wordpress-custom/bootstrap-wordpress-responsive-menu/

关于我们和服务的链接被禁用。这是因为这两个在其中包含子菜单内容，并且插件以某种方式禁用了任何包含子菜单的顶部菜单链接。请问需要做什么才能恢复关于我们和服务菜单上的链接？我可以在下面的这个 wp_nav_menu 代码中切换任何选项吗？

<?php 
        wp_nav_menu( array(
          'menu'       => 'top_menu',
          'depth'      => 2,
          'container'  => false,
          'menu_class' => 'nav',
          'fallback_cb' => 'wp_page_menu',
          'walker' => new wp_bootstrap_navwalker())
        );
?>

Answer 1

可以修改这个 navwalker，让它做你想做的事情 - 即将链接输出为 href 值并允许你点击链接。

这里有两个问题需要解决：

1. 使用的 navwalker 没有将 url 输出到 href 属性（而是输出“#”）。
2. Bootstrap 使用 e.preventDefault 禁用链接点击行为，并用它自己的函数替换它。

让 navwalker 输出一个 url 并停止 Bootstrap 接管点击行为只是在 navwalker 中修改几行的情况。我有一个包含modified version of the walker 的回购分支。

停止引导程序接管链接的点击行为有一些影响。下拉菜单通过 Bootstrap JS 单击打开，因此如果您删除它，则菜单将无法再打开。一个快速的解决方法是让它们出现在父级的悬停上。这是执行此操作的 css：

.menu-item-has-children:hover ul.dropdown-menu {
    display: block;
}

请注意，在 Navwalker 的原始版本中禁用带有下拉菜单的菜单项是有原因的（并且 Bootstrap 核心不支持）。使顶级项目可点击链接意味着下拉菜单需要出现在悬停时。触摸屏用户无法悬停。如果您预计有人会使用触摸屏，那么您应该避免使用下拉链接制作菜单项，而应仅将它们保留为下拉切换。

披露：我写了问题中引用的文章，并为使用的原始 navwalker 贡献了代码。

Answer 2

试试这个：（在尝试之前，您应该从 wordpress 管理面板创建导航菜单，否则它将无法工作。）

<div class="collapse navbar-collapse navbar-ex1-collapse">
    <?php wp_nav_menu(array(
        'container_class' => 'menu-header',
        'theme_location' => 'primary',
        'items_wrap' => '<ul id="%1$s" class="%2$s nav navbar-nav">%3$s</ul>',
        'walker' => new BS3_Walker_Nav_Menu,
    )); ?>
</div>
<!-- /.navbar-collapse -->

有关子菜单，请参阅here