So fügen Sie dem aktuellen Menüpunkt wp_nav_menu() eine “aktive” Klasse hinzu (einfacher Weg)

Question 1

Ich erstelle ein benutzerdefiniertes WordPress-Design mit einem Starter-Design _Underscores und Bootstrap.

Ich möchte modifizieren wp_nav_menu damit es den aktuellen Menüpunkt zuweist .active Klasse statt der Vorgabe .current-menu-item. Ich benötige diese zur Nutzung .active Klasse von Bootstrap.

Hier ist, was ich habe (zusätzliches Material kommt von WP, also scrollen Sie bitte nach rechts):

<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, 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 ohne Änderung zu erreichen ../wp-includes/nav-menu-template.php und ohne Verwendung von JS.

UPDATE: Ich habe die Antwort kurz vor dem Posten dieser Frage gefunden, aber da es mir ziemlich schwer gefallen ist, sie zu finden, poste ich sie als QA, um hoffentlich jemandem etwas Zeit zu sparen.

Question 2

Fügen Sie einfach diesen Code in die Datei functions.php ein:

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:

Question 3

Um den Menüpunkt auch hervorzuheben, wenn eine der untergeordneten Seiten aktiv ist, suchen Sie auch nach der anderen 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;
}

Question 4

Wenn Sie das ‘aktiv’ im 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="https://stackoverflow.com/questions/26789438/$menu_item->url">";
                echo $menu_item->title;
                echo "</a></li>";
            }
        }
        ?>

Funktionen.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 '';
}

Question 5

Wenn es sich bei Ihren Menüpunkten um Kategorien handelt und Sie diese beim Navigieren durch die Beiträge hervorheben möchten, prüfen Sie zusätzlich zu den vorherigen Antworten auch auf 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;
}

Question 6

Im header.php Fügen Sie diesen Code ein, um das Menü anzuzeigen:

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

Im functions.php benutze das:

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