web-dev-qa-db-fra.com

wp_nav_menu change le nom de la classe du sous-menu?

Est-il possible de changer l'enfant <ul class="sub-menu"> généré par WordPress lui-même à un nom de classe personnalisé?

Je connais le parent <ul> vous pouvez supprimer ou modifier le nom avec 'menu_class' => 'newname'.

Je n'ai pas pu trouver la réponse. J'ai essayé 'submenu_class' => 'customname'. Cela me semble logique, mais ce n’est évidemment pas le bon.

des idées?

wordpress
61
Cam

Il n'y a pas d'option pour cela, mais vous pouvez étendre l'objet 'walker' que WordPress utilise pour créer le menu HTML. Une seule méthode doit être remplacée:

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"my-sub-menu\">\n";
  }
}

Ensuite, vous passez juste une instance de votre marcheur comme argument à wp_nav_menu ainsi:

'walker' => new My_Walker_Nav_Menu()
90
Richard M

remplacer la classe:

echo str_replace('sub-menu', 'menu menu_sub', wp_nav_menu( array(
    'echo' => false,
    'theme_location' => 'sidebar-menu',
    'items_wrap' => '<ul class="menu menu_sidebar">%3$s</ul>' 
  ) )
);
17
vralle

Vous pouvez utiliser l'exemple WordPress preg_replace filter (dans votre fichier functions.php de thème)):

function new_submenu_class($menu) {    
    $menu = preg_replace('/ class="sub-menu"/','/ class="yourclass" /',$menu);        
    return $menu;      
}

add_filter('wp_nav_menu','new_submenu_class');
14
Pushpendu Mondal

Voici une mise à jour de ce que Richard a fait qui ajoute un indicateur "de profondeur". La sortie est le niveau 0, le niveau 1, le niveau 2, etc.

class UL_Class_Walker extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"level-".$depth."\">\n";
  }
}
10
Jonathan Wold

C'est une vieille question et je ne sais pas si la solution que je vais mentionner était disponible au moment où vous l'avez demandé, mais je pense que cela vaut la peine d'être mentionné. Vous pouvez obtenir ce que vous voulez en ajoutant un filtre à nav_menu_submenu_css_class. Voir l'exemple ci-dessous - vous pouvez remplacer my-new-submenu-class par la (les) classe (s) souhaitée (s):

function my_nav_menu_submenu_css_class( $classes ) {
    $classes[] = 'my-new-submenu-class';
    return $classes;
}
add_filter( 'nav_menu_submenu_css_class', 'my_nav_menu_submenu_css_class' );
8
FlavioEscobar

Comme toujours, après avoir cherché longtemps avant d'écrire quelque chose sur le site, une minute après avoir posté ici, j'ai trouvé ma solution.

Je pensais que je le partagerais ici pour que quelqu'un d'autre puisse le trouver.

//Add "parent" class to pages with subpages, change submenu class name, add depth class

    class Prio_Walker extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
        $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
        $GLOBALS['dd_depth'] = (int) $depth;
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

     function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"children level-".$depth."\">\n";
  }
}

add_filter('nav_menu_css_class','add_parent_css',10,2);
function  add_parent_css($classes, $item){
     global  $dd_depth, $dd_children;
     $classes[] = 'depth'.$dd_depth;
     if($dd_children)
         $classes[] = 'parent';
    return $classes;
}

//Add class to parent pages to show they have subpages (only for automatic wp_nav_menu)

function add_parent_class( $css_class, $page, $depth, $args )
{
   if ( ! empty( $args['has_children'] ) )
       $css_class[] = 'parent';
   return $css_class;
}
add_filter( 'page_css_class', 'add_parent_class', 10, 4 );

C’est là que j’ai trouvé la solution: Solution in WordPress

5
zartgesotten

Je devais changer:

function start_lvl(&$output, $depth)

à:

function start_lvl( &$output, $depth = 0, $args = array() )

Parce que je recevais une erreur d'incompatibilité:

Strict Standards: Declaration of My_Walker_Nav_Menu::start_lvl() should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array)

3
Vinnie James

Vous n'avez pas besoin d'étendre le Walker. Cela fera:

function overrideSubmenuClasses() {
    return array('myclass1', 'myclass2');
}
add_action('nav_menu_submenu_css_class', 'overrideSubmenuClasses');
2
Lucas Bustamante

Cela peut vous être utile

Comment ajouter une classe parente pour un élément de menu 

function wpdocs_add_menu_parent_class( $items ) {
$parents = array();

// Collect menu items with parents.
foreach ( $items as $item ) {
    if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
        $parents[] = $item->menu_item_parent;
    }
}

// Add class.
foreach ( $items as $item ) {
    if ( in_array( $item->ID, $parents ) ) {
        $item->classes[] = 'menu-parent-item';
    }
}
return $items;
 }
add_filter( 'wp_nav_menu_objects', 'wpdocs_add_menu_parent_class' );

/**
 * Add a parent CSS class for nav menu items.
 * @param array  $items The menu items, sorted by each menu item's menu order.
 * @return array (maybe) modified parent CSS class.
*/

Ajout de classes conditionnelles aux éléments de menu 

function wpdocs_special_nav_class( $classes, $item ) {
    if ( is_single() && 'Blog' == $item->title ) {
    // Notice you can change the conditional from is_single() and $item->title
    $classes[] = "special-class";
}
return $classes;
}
add_filter( 'nav_menu_css_class' , 'wpdocs_special_nav_class' , 10, 2 );

Pour référence: cliquez sur moi

2
naveenkumar.s

Vous pouvez simplement utiliser un crochet

add_filter( 'nav_menu_submenu_css_class', 'some_function', 10, 3 );
function some_function( $classes, $args, $depth ){
    foreach ( $classes as $key => $class ) {
    if ( $class == 'sub-menu' ) {
        $classes[ $key ] = 'my-sub-menu';
    }
}

return $classes;
}

où

$classes(array) - The CSS classes that are applied to the menu <ul> element.
$args(stdClass) - An object of wp_nav_menu() arguments.
$depth(int) - Depth of menu item. Used for padding.
1
Artemiy Egorov

dans ce qui précède, j'ai besoin d'un petit changement que j'essaie de placer, mais je ne suis pas en mesure de le faire, votre sortie ressemblera à ceci

<ul>
<li id="menu-item-13" class="depth0 parent"><a href="#">About Us</a>
<ul class="children level-0">
    <li id="menu-item-17" class="depth1"><a href="#">Sample Page</a></li>
    <li id="menu-item-16" class="depth1"><a href="#">About Us</a></li>
</ul>
</li>
</ul>

ce que je cherche

<ul>
<li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>
<ul class="children level-0">
    <li id="menu-item-17" class="depth1"><a href="#">Sample Page</a></li>
    <li id="menu-item-16" class="depth1"><a href="#">About Us</a></li>
</ul>
</li>
</ul>

dans ce qui précède, j'ai placé la classe parente à l'intérieur du lien d'ancrage par lequel <li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>

0
Kundan SIngh

Je suggérerais de remplacer votre nom de classe cutomclass css par un sous-menu. utiliser rechercher et remplacer: ie. find: .customclass remplace par .sub-menu, fonctionne pour moi.

0
gfivehost