wp nav menu changer sous-menu nom de classe?

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

Je connais l'ul parent que vous pouvez supprimer ou changer le nom avec 'menu_class' => 'newname'

Je ne pouvais pas trouver... essayé 'submenu_class' => 'customname': D me semble logique, mais évidemment ce n'est pas le bon..

Des idées?

53
demandé sur Richard M 2011-02-18 00:21:52

12 réponses

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 simplement une instance de votre walker comme argument à wp_nav_menu comme ceci:

'walker' => new My_Walker_Nav_Menu()
88
répondu Richard M 2012-09-07 21:26:36

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>' 
  ) )
);
15
répondu vralle 2014-05-09 08:33:07

Vous pouvez utiliser WordPress preg_replace filtre (dans vos fonctions de thème.fichier php) exemple:

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

add_filter('wp_nav_menu','new_submenu_class'); 
11
répondu Pushpendu Mondal 2017-01-27 09:58:29

Voici une mise à jour de ce que Richard a fait qui ajoute un indicateur de "profondeur". La sortie est de niveau 0, niveau 1, 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
répondu Jonathan Wold 2011-03-23 20:18:59

C'est une vieille question et je ne suis pas sûr si la solution que je vais mentionner était disponible au moment où vous 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) que vous voulez:

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' );
6
répondu FlavioEscobar 2017-06-21 02:53:05

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

Il a pensé 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 dans le forum de support Wordpress

5
répondu zartgesotten 2012-09-22 08:06:36

, j'ai dû 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
répondu Vinnie James 2016-01-30 00:17:59

Cela peut vous être utile

Comment ajouter une classe parent pour l'é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-moi

2
répondu naveenkumar.s 2016-04-13 14:20:26

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

$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
répondu Artemiy Egorov 2018-08-05 18:15:48

Dans ce qui précède, j'ai besoin d'un petit changement que j'essaie de placer mais je ne suis pas capable 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 celui ci-dessus, j'ai placé la classe parent dans le lien d'ancrage parent qui <li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>

0
répondu Kundan SIngh 2014-04-23 07:58:09

Je suggère de remplacer votre nom de classe CSS cutomclass par un sous-menu. utilisez rechercher et remplacer: ie. trouver: .customclass remplacer par .sous-menu, fonctionne pour moi.

0
répondu gfivehost 2014-10-06 23:58:15

Pour changer le nom de classe "sous-menu" par défaut, il existe un moyen simple. Vous pouvez simplement le changer dans le fichier wordpress.

Emplacement : www/project_name/wp-includes/nav-menu modèle.php.

Ouvrez ce fichier et à la ligne 49, modifiez le nom de la classe de sous-menu avec votre classe personnalisée.

Ou vous pouvez également ajouter votre classe personnalisée à côté du sous-menu.

Fait.

Ça a marché pour moi.J'ai utilisé wordpress-4.4.1.

-5
répondu Sandeep Singh 2016-02-25 07:21:57