將活動類添加到 Wordpress 中當前選定的錨點

Question

如何在 Wordpress 中將活動類添加到我的錨點？ 當前代碼如下：

$args = array(
    'theme_location' => 'primary',
    'container' => 'div',
    'container_class' => 'collapse navbar-collapse',
    'menu_class' => 'nav navbar-nav navbar-right'
);
wp_nav_menu( $args );

我為每個菜單項得到這個輸出：

<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
    <a href="http://localhost:8888/axial/services/">Services</a>
</li>

但我希望 'a' 標簽有一個 'active' 類，如下所示：

<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
    <a class="active" href="http://localhost:8888/axial/services/">Services</a>
</li>

Answer 1

是的，有可能，請嘗試以下代碼：

function add_class_to_href( $classes, $item ) {
    if ( in_array('current_page_item', $item->classes) ) {
        $classes['class'] = 'active';
    }
    return $classes;
}
add_filter( 'nav_menu_link_attributes', 'add_class_to_href', 10, 2 );

Answer 2

只需將此代碼粘貼到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; }

Answer 3

你可以用 CSS 做到這一點。

您可以使用默認添加的 current-menu-item 類。

 /*you have to add the active menu item styles like this*/ a{ padding:5px; font-family:arial; color:#333; text-decoration:none; } .navbar-right ul li{ display:inline-block; list-style-type:none; border:1px solid #bbb; padding:5px; } .navbar-right li.current-menu-item > a { color:#fff; background:#bbb; /*you can add the active anchor styles here*/ }

 <nav class="navbar-right"> <ul> <li class="current-menu-item"><a href="/home/">Home</a></li> <li class="menu-item"><a href="/about/">About</a></li> <li class="menu-item"><a href="/contact/">Contact</a></li> </ul> </nav>

Answer 4

今天大部分時間我們必須處理 wordpress 中的下拉菜單，所以，為了即興回答上述問題，您可以使用：

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

function add_active_class($classes, $item) {
  if( $item->menu_item_parent == 0 && in_array('current-menu-item', $classes) ) {
      $classes[] = "active";
   }
   return $classes;
 }

you can add active class for child elements using the below code: 
add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );
function add_active_class($classes, $item)
{
  if( in_array( 'current-menu-item', $classes ) ||
  in_array( 'current-menu-ancestor', $classes ) ||
  in_array( 'current-menu-parent', $classes ) ||
  in_array( 'current_page_parent', $classes ) ||
  in_array( 'current_page_ancestor', $classes )) 
    {
       $classes[] = "active";
    }
   return $classes;
}

Answer 5

我也面臨同樣的問題，在搜索了很多頁面后，我只能找到我必須使用 jquery 代碼設置它的解決方案。 所以我在我的頁面“.current_page_item”中找到了一個獨特的類添加，你可能有相同的或“.current_menu_item”等。所以只需在你的頁腳中包含以下jquery代碼，你的頁面就會正常工作。

$(".current_page_item a").addClass("active");

跳這將解決您的問題。

Answer 6

您可以將“導航鏈接”類添加到所有錨標記，同時僅使用此代碼在當前菜單項上具有“活動”類。

/**
 * Add CSS class for "<a>" tags in menu
 */
function your_theme_add_menu_link_class( $classes, $item ) {
    $classes['class'] = "nav-link"; // Add class to every "<a>" tags
    if ( in_array('current_page_item', $item->classes) ) {
        $classes['class'] = 'nav-link active'; // Add class to current menu item's "<a>" tag
    }
    return $classes;
}
add_filter( 'nav_menu_link_attributes', 'your_theme_add_menu_link_class', 10, 2 );