2014-11-06 2 views
19

Ich erstelle benutzerdefinierte Wordpress Theme mit einem Starter-Thema _Underscores. Ich benutze auch Bootstrap als ein Front-End-Framework.Wie "aktive" Klasse zu wp_nav_menu() aktuellen Menüpunkt hinzufügen (einfache Möglichkeit)

Ich möchte wp_nav_menu so ändern, dass es den aktuellen Menüpunkt class = "active" anstelle von class = "current-menu-item" zuweist (was standardmäßig ist). Oder teilt zumindest diese beiden Klassen zumindest zu. Ich brauche das, um die .active-Klasse von bootstrap.css zu verwenden.

Hier ist das Beispiel von dem, was ich habe (alle diese Klassen wp erzeugt werden, blättern Sie bitte um zu sehen, was ich meine):

<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> 

Und hier ist das, was ich brauche:

<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> 

Ich würde es vorziehen, dies auf eine korrekte Art und Weise zu tun - ich möchte nichts in ..wp-includes/nav-menu-template.php ändern, ich möchte auch nicht js verwenden.


Nun fand ich die Antwort, kurz bevor diese Frage veröffentlichen (es war alles fertig, deshalb ist es immer noch in einer Art und Weise ausgebildet ist, als ob ich immer noch die Antwort suchen bin), aber ich hatte ziemlich schwer, es zu finden Also habe ich beschlossen, es als QA zu veröffentlichen. Ich hoffe, dass jemand das nützlich finden wird.

Antwort

58

einfach diesen Code in functions.php Datei einfügen:

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; 
} 

Mehr auf wordpress.org: link1, link2

+0

fantastisch gearbeitet. Haben Sie eine Lösung, um untergeordnete Posts zu verfolgen? Es funktioniert auf meinem Blog-Link, aber nicht für die Kinder-Posts. – OneMohrTime

+0

Einfach und auf den Punkt. Ich liebe es. – racl101

+2

@ OneMohrTime überprüfen Sie die andere Antwort unten. – Unicornist

8

Um auch den Menüpunkt zu markieren, wenn eine der untergeordneten Seiten aktiv ist, auch Check für die andere Klasse (current-page-ancestor) wie unten:

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; 
} 
0

Neben früheren Antworten, wenn Ihre Menüpunkte Kategorien ein sind d Sie wollen, dass sie markieren, wenn sie durch Beiträge der Navigation, überprüfen auch für 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; 
} 
0

In header.php Einsatz dieser Code Menü anzuzeigen:

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

In functions.php Verwendung dieses:

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>'; 
    } 
} 
0

Wenn Sie das 'aktiv' in der html:

wollen

Header mit HTML und 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 ''; 
}