it-swarm.com.de

Wie fügt man dem aktuellen Menüpunkt wp_nav_menu () eine "aktive" Klasse hinzu (auf einfache Weise)

Ich erstelle ein benutzerdefiniertes Wordpress-Theme mit einem Starter-Theme _Underscores. Ich benutze Bootstrap auch als Frontend-Framework.

Ich möchte wp_nav_menu so ändern, dass es dem aktuellen Menüpunkt class = "active" anstelle von class = "current-menu-item" (standardmäßig) zugewiesen wird. Oder weist zumindest beide Klassen 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 werden von Wp erzeugt, bitte scrollen, 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 Folgendes brauche ich:

<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 und auch nicht js verwenden.


Ich fand die Antwort kurz vor dem Posten dieser Frage (alles war fertig, deshalb ist sie immer noch so geformt, als würde ich immer noch die Antwort suchen), aber es fiel mir schwer, sie zu finden, also entschied ich mich, sie als zu posten eine QA. Ich hoffe, jemand findet das nützlich.

25
mizurnix

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 zu wordpress.org: link1 , link2

72
mizurnix

Um auch den Menüpunkt hervorzuheben, wenn eine der untergeordneten Seiten aktiv ist, überprüfen Sie auch die andere Klasse (current-page-ancestor) wie folgt:

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

Wenn Ihre Menüelemente neben den vorherigen Antworten Kategorien sind und Sie beim Navigieren durch Beiträge hervorheben möchten, überprüfen Sie auch 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;
}
4
Ivan

Wenn Sie "aktiv" in der HTML-Datei haben möchten: 

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 '';
}
1
Vince Verhoeven

In 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
        )
    );
?>

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