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

Question

我最近開始學習如何使用WordPress，並且我選擇了一個簡單的主題並希望實施bootstrap導航欄固定頂部菜單。

到目前爲止，我已經成功了，並且在屏幕處於完整模式時可以使用菜單，並在正確的主菜單中加載。

但是，我需要幫助幾件事情。

• 首先，我有導航欄設置，所以當你將鼠標懸停在一個下拉列表中，它自動下拉菜單的子菜單，但我想父鏈接，可以點擊到它的相關頁面也
• 在標準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

如果要使父鏈接可點擊，您需要編輯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 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 : ''; 
} 

我在這裏所做的是我改變了父鏈接來打印自己的鏈接，而不是用#

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

相反這是對父鏈接更改爲#

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