web-dev-qa-db-fra.com

Comment ajouter une classe "active" à l'élément de menu actuel wp_nav_menu () (manière simple)

Je crée un thème Wordpress personnalisé à l'aide d'un thème de démarrage _Underscores. J'utilise aussi Bootstrap en tant que framework frontal.

Je voudrais modifier wp_nav_menu pour qu’il assigne l’élément de menu actuel class = "active" au lieu de class = "current-menu-item" (valeur par défaut). Ou peut-être au moins assigne ces deux classes. J'ai besoin de cela pour pouvoir utiliser la classe .active de bootstrap.css.

Voici l'exemple de ce que j'ai (toutes ces classes sont générées par wp, s'il vous plaît faites défiler pour voir ce que je veux dire):

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

Et voici ce dont j'ai besoin:

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

Je préférerais le faire correctement - je ne veux rien changer dans .wp-includes/nav-menu-template.php, je ne veux pas utiliser js non plus.

Eh bien, j’ai trouvé la réponse juste avant d’afficher cette question (tout était prêt, c’est pourquoi elle est toujours formée de la même manière que si je cherchais toujours la réponse), mais j’avais du mal à la trouver et j’ai donc décidé un QA. J'espère que quelqu'un trouvera cela utile.

wordpressmenuitem
25
mizurnix

Il suffit de coller ce code dans le fichier 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;
}

Plus sur wordpress.org: link1 , link2

72
mizurnix

Pour mettre également en surbrillance l'élément de menu lorsqu'une des pages enfants est active, recherchez également l'autre classe (current-page-ancestor) comme ci-dessous:

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

Outre les réponses précédentes, si vos éléments de menu sont des catégories et que vous souhaitez les mettre en surbrillance lorsque vous parcourez les publications, recherchez également 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

Si vous voulez le 'actif' dans le HTML: 

en-tête avec html et 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

Dans header.php, insérez ce code pour afficher le menu:

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

Dans functions.php, utilisez ceci:

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