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

Lesezeit: 4 Minuten

So fugen Sie dem aktuellen Menupunkt wp nav menu eine aktive Klasse
mzrnsh

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.

So fugen Sie dem aktuellen Menupunkt wp nav menu eine aktive Klasse
mzrnsh

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:

  • Hat super funktioniert. Haben Sie auch eine Lösung zum Verfolgen von untergeordneten Beiträgen? Es funktioniert auf meinem Blog-Link, aber nicht für die Kinderbeiträge.

    – OneMohrTime

    11. September 2016 um 19:21 Uhr

  • @OneMohrTime sehen Sie sich die andere Antwort unten an.

    – Einhornist

    4. August 2017 um 15:19 Uhr

  • Was ist mit einem Element? Wie kann ich eine „aktive“ Klasse hinzufügen? .current-menu-item a Element ?

    – Fatih Toprak

    9. Februar 2020 um 10:42 Uhr

  • Update 2022: Das funktioniert noch

    – mzrnsch

    5. Januar um 16:37 Uhr

So fugen Sie dem aktuellen Menupunkt wp nav menu eine aktive Klasse
Peerbolte

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

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

  • Perfekt, um Menüs komplett neu zu erstellen, zB zum Importieren aus anderen CMS wie Typo3 und Joomla!

    – Chakmear

    27. April 2021 um 8:44 Uhr

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

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

  • deine lösung ist für mich die beste. Gibt viel Freiheit beim Anpassen des WordPress-Menüs 🙂

    – Tuxi

    25. Juli 2020 um 10:24 Uhr

  • deine lösung ist für mich die beste. Gibt viel Freiheit beim Anpassen des WordPress-Menüs 🙂

    – Tuxi

    25. Juli 2020 um 10:24 Uhr

964120cookie-checkSo fügen Sie dem aktuellen Menüpunkt wp_nav_menu() eine “aktive” Klasse hinzu (einfacher Weg)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy