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?
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()
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>'
) )
);
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');
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";
}
}
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' );
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
, 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)
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
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.
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>
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.
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.