如何添加「活動」類到wp_nav_menu（）當前菜單項（簡單方法）

我正在使用初學者主題_Underscores創建自定義Wordpress主題。我也使用Bootstrap作爲前端框架。如何添加「活動」類到wp_nav_menu（）當前菜單項（簡單方法）

我想修改wp_nav_menu，以便它指定當前菜單項class =「active」，而不是class =「current-menu-item」（默認值）。或者，也許至少分配這兩個類。我需要這個以便使用bootstrap.css中的.active類。

這裏是我有什麼例子（所有這些類WP產生，請滾動到明白我的意思）：

<ul id="menu-main-menu" class="nav navbar-nav"> 
    <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-14"><a href="">item1</a></li> 
    <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">item2</a></li> 
</ul>

這裏是我所需要的：

<ul id="menu-main-menu" class="nav navbar-nav"> 
    <li id="menu-item-14" class="active menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-14"><a href="">item1</a></li> 
    <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">item2</a></li> 
</ul>

我寧願以正確的方式做到這一點 - 不想在..wp-includes/nav-menu-template.php中更改任何內容，當然也不希望使用js。

嗯，我找到了答案，只是發表了這個問題（這是所有準備好了，這就是爲什麼它仍然是形成一種方式，如果我仍然在尋求答案）之前，但我寧願很難找到它所以我決定將它作爲QA發佈。我希望有人會覺得這很有用。

來源

2014-11-06 mizurnix

只需將此代碼粘貼到functions.php文件：

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); 

function special_nav_class ($classes, $item) { 
    if (in_array('current-menu-item', $classes)){ 
     $classes[] = 'active '; 
    } 
    return $classes; 
}

更多關於wordpress.org：link1，link2

來源

2014-11-06 21:09:47 mizurnix

曾任職真棒。您是否有解決方案來跟蹤子帖子？它適用於我的博客鏈接，但不適用於兒童帖子。 – OneMohrTime 2016-09-11 19:21:48

簡單而重要。我喜歡它。 – racl101 2016-10-02 03:23:21

@OneMohrTime檢查下面的其他答案。 – Unicornist 2017-08-04 15:19:25

要還強調該菜單項時，子頁面的一個是積極的，也檢查其他類（current-page-ancestor）象下面這樣：

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); 

function special_nav_class ($classes, $item) { 
    if (in_array('current-page-ancestor', $classes) || in_array('current-menu-item', $classes)){ 
     $classes[] = 'active '; 
    } 
    return $classes; 
}

來源

2016-12-15 10:43:30 peerbolte

除了以前的答案，如果你的菜單項分類的d你想通過帖子導航時，突出他們，還要檢查current-post-ancestor：

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); 

function special_nav_class ($classes, $item) { 
    if (in_array('current-post-ancestor', $classes) || in_array('current-page-ancestor', $classes) || in_array('current-menu-item', $classes)){ 
     $classes[] = 'active '; 
    } 
    return $classes; 
}

來源

2017-08-07 15:15:22 Ivan

在header.php插入這個代碼來顯示菜單：

<?php 
    wp_nav_menu(
     array(
      'theme_location' => 'menu-one', 
      'walker' => new Custom_Walker_Nav_Menu_Top 
     ) 
    ); 
?>

在functions.php使用這樣的：

class Custom_Walker_Nav_Menu_top extends Walker_Nav_Menu 
{ 
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { 
     $is_current_item = ''; 
     if(array_search('current-menu-item', $item->classes) != 0) 
     { 
      $is_current_item = ' class="active"'; 
     } 
     echo '<li'.$is_current_item.'><a href="'.$item->url.'">'.$item->title; 
    } 

    function end_el(&$output, $item, $depth = 0, $args = array()) { 
     echo '</a></li>'; 
    } 
}

來源

2017-09-02 12:17:00 mghhgm

如果您想在html中使用'active'：

頭與HTML和PHP：

 <?php 
     $menu_items = wp_get_nav_menu_items('main_nav'); // id or name of menu 
     foreach ((array) $menu_items as $key => $menu_item) { 
      if (! $menu_item->menu_item_parent) { 
       echo "<li class=" . vince_check_active_menu($menu_item) . "><a href='$menu_item->url'>"; 
       echo $menu_item->title; 
       echo "</a></li>"; 
      } 
     } 
     ?>

的functions.php：

function vince_check_active_menu($menu_item) { 
    $actual_link = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; 
    if ($actual_link == $menu_item->url) { 
     return 'active'; 
    } 
    return ''; 
}

來源

2017-10-28 14:29:31

如何添加「活動」類到wp_nav_menu（）當前菜單項（簡單方法）

回答

相關問題