Php 引导导航栏菜单集成在WordPress发行版中

我最近开始学习如何使用WordPress，我选择了一个简单的主题，并希望实现引导navbar固定顶部菜单

到目前为止，我已经成功了，当屏幕处于完全模式时，菜单可以正常工作，并加载到正确的主菜单中

不过，我需要一些帮助

• 首先，我设置了导航栏，所以当你将鼠标悬停在下拉菜单上时，它会自动下拉子菜单，但我希望父链接也可以点击到它的相关页面
• 在标准的

  HTML

  和

  CSS

  中，这很简单，但在WordPress中，当您在菜单中加载时，我发现它有点复杂

下面是我如何在

header.php

文件中输入导航栏的：

<div class="navbar navbar-inverse navbar-fixed-top">
    <?php
    // Fix menu overlap bug..
    if ( is_admin_bar_showing() ) echo '<div style="min-height: 28px;"></div>';
    ?>
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/"><?php echo esc_attr( get_bloginfo( 'name' ) ); ?></a>
        </div>
            <?php
            wp_nav_menu( array(
            'menu'              => 'primary-menu',
            'theme_location'    => 'primary-menu',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'navbar-collapse collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
    </div>
</div>

正如您所看到的，主菜单中加载了一些PHP。问题是，它不允许我更改链接上的

a class=”“

，以便我可以输入

禁用

，从而可以将其作为链接单击

此外，该链接当前为“#”，我无法更改

---

最后，当我调整浏览器大小以检查菜单是否响应时，当显示切换按钮时，我单击该按钮并显示链接，当我将鼠标悬停在带有子菜单的链接上时，它将再次自动下拉（显示响应切换菜单时，这不是我想要的）。我希望在缩小菜单时单击链接，而不是在全视图中自动下拉。

如果要使父链接可单击，则需要编辑

wp\u bootstrap\u navwalker.php

我以前在

wp\u bootstrap\u navwalker.php

文件中编辑了一些行，下面是如何操作的

首先对这行代码进行罚款：

$atts = array();
$atts['title']  = ! empty( $item->title )   ? $item->title  : '';
$atts['target'] = ! empty( $item->target )  ? $item->target : '';
$atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
    $atts['href']           = '#';
    $atts['data-toggle']    = 'dropdown';
  $atts['class']          = 'dropdown-toggle';
    $atts['aria-haspopup']  = 'true';
} else {
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

这些代码行通常在

第78行

到

第91行

之间，您可以用这些代码行替换上面的所有代码行：

$atts['title']  = ! empty( $item->title )   ? $item->title  : '';
$atts['target'] = ! empty( $item->target )  ? $item->target : '';
$atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';
// If item has_children add atts to a.
// if ( $args->has_children && $depth === 0 ) {
if ( $args->has_children ) {
    $atts['href'] = $item->url;
    $atts['data-toggle']    = 'dropdown';
    $atts['class']          = 'dropdown-toggle';
} else {
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

我在这里所做的是将父链接更改为打印自己的链接，而不是将其替换为

而不是将父链接更改为

#

---

如果要使父链接可单击，则需要编辑

wp\u bootstrap\u navwalker.php

我以前在

wp\u bootstrap\u navwalker.php

文件中编辑了一些行，下面是如何操作的

首先对这行代码进行罚款：

$atts = array();
$atts['title']  = ! empty( $item->title )   ? $item->title  : '';
$atts['target'] = ! empty( $item->target )  ? $item->target : '';
$atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
    $atts['href']           = '#';
    $atts['data-toggle']    = 'dropdown';
  $atts['class']          = 'dropdown-toggle';
    $atts['aria-haspopup']  = 'true';
} else {
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

这些代码行通常在

第78行

到

第91行

之间，您可以用这些代码行替换上面的所有代码行：

$atts['title']  = ! empty( $item->title )   ? $item->title  : '';
$atts['target'] = ! empty( $item->target )  ? $item->target : '';
$atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';
// If item has_children add atts to a.
// if ( $args->has_children && $depth === 0 ) {
if ( $args->has_children ) {
    $atts['href'] = $item->url;
    $atts['data-toggle']    = 'dropdown';
    $atts['class']          = 'dropdown-toggle';
} else {
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

我在这里所做的是将父链接更改为打印自己的链接，而不是将其替换为

而不是将父链接更改为

#

---

我不太明白你想要做什么：/请编辑你的问题，让它更清楚你想要实现什么。请看帮助：）我不太明白你想做什么：/请编辑你的问题，让它更清楚你想实现什么。请参阅帮助：）谢谢，链接已从#更改为相关URL，唯一的问题是现在链接根本没有点击。菜单仍然会自动下拉，但当您单击父链接时，它什么也不做。好的，我通过在“dropdown toggle”类旁边添加disabled来使用它。。。但我现在遇到的问题是，当浏览器缩小并显示“切换为菜单”按钮时，当您单击菜单关闭时，父链接仍会自动显示下拉列表，而不是单击它（应该是这样的）。我相信这只是您添加的一些CSS，以使下拉悬停在所有设备上使用。最好的选择-如果CSS使其悬停，请将其放入

媒体（最小宽度：992px）

这就是为什么它只适用于992pxOk以上的屏幕，我使用了该部分，谢谢。。。最后一个问题，然后应该对其进行排序，通过下拉切换将禁用添加到类中，这意味着即使在浏览器收缩且显示切换菜单时，如果单击父链接，它会把你带到那个页面，而不是显示下拉菜单。是的，这确实没有解决办法-这里最好的选择是在手机上始终显示下拉列表，只是为了手机。为此，链接已从#更改为它的相关URL，唯一的问题是现在链接根本没有点击。菜单仍然会自动下拉，但当您单击父链接时，它什么也不做。好的，我通过在“dropdown toggle”类旁边添加disabled来使用它。。。但我现在遇到的问题是，当浏览器缩小并显示“切换为菜单”按钮时，当您单击菜单关闭时，父链接仍会自动显示下拉列表，而不是单击它（应该是这样的）。我相信这只是您添加的一些CSS，以使下拉悬停在所有设备上使用。最好的选择-如果CSS使其悬停，请将其放入

媒体（最小宽度：992px）

这就是为什么它只适用于992pxOk以上的屏幕，我使用了该部分，谢谢。。。最后一个问题，然后应该对其进行排序，通过下拉切换将禁用添加到类中，这意味着即使在浏览器收缩且显示切换菜单时，如果单击父链接，它会把你带到那个页面，而不是显示下拉菜单。是的，这真的没有解决办法-这里最好的选择是在手机上总是显示下拉列表，只是为手机