Bootstrap導航欄菜單集成在WordPress問題中

Question

我最近開始學習如何使用WordPress，我選擇了一個簡單的主題，並希望實現bootstrap navbar fixed-top菜單。

到目前為止，我已經成功了，並且當屏幕處於完全模式時菜單正常工作，並加載到正確的主菜單中。

但是，我需要一些幫助。

• 首先，我有導航欄設置，所以當你將鼠標懸停在Dropdown上時，它會自動下拉子菜單，但我希望父鏈接可以點擊它的相關頁面
• 在標准的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="" ，因此我可以輸入disable ，因此可以將其作為鏈接單擊。

鏈接目前是“＃”，我無法改變。

最后，當我調整瀏覽器大小以檢查菜單是否響應時，當切換按鈕顯示時，我點擊它並顯示鏈接，一旦我將鼠標懸停在鏈接上，子菜單再次自動下降（這不是什么我希望在顯示響應切換菜單時）。 我想在縮小菜單時單擊鏈接，而不是在全視圖上自動下拉。

Answer 1

如果要使Parent Link可單擊，則需要編輯wp_bootstrap_navwalker.php 。

我之前通過編輯wp_bootstrap_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 : '';
}

這些代碼line 78通常在line 78到line 91 line 78附近，您可以使用以下代碼行替換上面的所有行：

$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 : '';
}

我在這里做的是我已經更改了父鏈接以打印自己的鏈接而不是用#替換它

$atts['href'] = $item->url;

而不是將父鏈接更改為#的原始內容

$atts['href'] = '#';