wp_nav_menu изменить имя класса подменю?

50

Есть ли способ изменить дочерний элемент <ul class="sub-menu">, сгенерированный самим Wordpress к имени пользовательского класса?

Я знаю родительский ul, который вы можете удалить или изменить имя с помощью 'menu_class' => 'newname'

Я не мог найти... try 'submenu_class' => 'customname': D кажется логичным для меня, но, очевидно, это не то, что нужно.

любые идеи?

Теги:

12 ответов

78
Лучший ответ

Для этого нет возможности, но вы можете расширить объект 'walker', который Wordpress использует для создания HTML-меню. Только один метод необходимо переопределить:

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

Затем вы просто передаете экземпляр вашего ходока в качестве аргумента для wp_nav_menu следующим образом:

'walker' => new My_Walker_Nav_Menu()
  • 1
    Я бы сначала проверил, правильна ли глубина. Вы не хотите иметь испорченное меню, если некоторые объявления нового уровня в пользовательском меню
  • 0
    Я думаю, что я являюсь инструментом, но я не могу заставить это работать! Я вставил секцию class кода в файл functions.php а вторая секция упоминается как часть массива $defaults в wp_nav_menu() . Это правильно?
Показать ещё 5 комментариев
14

заменить класс:

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>' 
  ) )
);
  • 3
    Простой, прямой и решающий проблему.
  • 0
    Не работает это все еще только «подменю». без изменений.
Показать ещё 2 комментария
10

Вы можете использовать фильтр WordPress preg_replace (в вашем файле functions.php темы) Пример:

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

add_filter('wp_nav_menu','new_submenu_class'); 
  • 0
    Спасибо! Я думаю, что этот метод намного проще
10

Здесь обновление к тому, что сделал Ричард, добавляет индикатор глубины. Вывод - уровень 0, уровень-1, уровень-2 и т.д.

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";
  }
}
  • 0
    Есть ли способ добавить имя класса для детей этого гнезда UL?
  • 0
    Конечно! Какой пример имени класса вы хотите добавить?
Показать ещё 1 комментарий
5

Как и всегда, после долгого поиска, прежде чем писать что-то на сайт, всего через минуту после того, как я разместил здесь, я нашел свое решение.

Мне показалось, что я поделюсь им, чтобы кто-то еще мог его найти.

//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 );

Вот где я нашел решение: Решение в форуме поддержки Wordpress

4

Это старый вопрос, и я не уверен, что решение, о котором я собираюсь упомянуть, было доступно к тому моменту, когда вы спросили, но я думаю, это стоит упомянуть. Вы можете добиться того, чего хотите, добавив фильтр в nav_menu_submenu_css_class. См. Пример ниже - вы можете заменить my-new-submenu-class на класс (ы), который вы хотите:

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' );
3

Мне пришлось изменить:

function start_lvl(&$output, $depth)

to:

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

Потому что я получаю ошибку несовместимости:

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

2

Это может быть полезно для вас

Как добавить родительский класс для пункта меню

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 menu order.
 * @return array (maybe) modified parent CSS class.
*/

Добавление условных классов в элементы меню

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

Для справки: нажмите меня

0

Вы можете просто использовать Hook

add_filter( 'nav_menu_submenu_css_class', 'some_function', 10, 3 );
function some_function( $classes, $args, $depth ){
// filter...

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.
  • 0
    Артемий Егоров, не могли бы вы написать весь код внутри function.php спасибо!
  • 1
    Конечно. Если вы хотите добавить классы только в подменю, вы можете использовать: 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; }
Показать ещё 1 комментарий
0

Я бы предложил заменить ваше имя класса cocom-cutomclass на подменю. используйте поиск и замену: т.е. find:.customclass заменить на .sub-menu, работает для меня.

0

в приведенном выше мне нужно небольшое изменение, которое я пытаюсь разместить, но я не могу этого сделать, ваш результат будет выглядеть следующим образом

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

что я ищу

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

в приведенном выше я разместил родительский класс внутри родительской привязки, <li id="menu-item-13" class="depth0"><a class="parent" href="#">About Us</a>

-5

Чтобы изменить имя класса "подменю", существует простой способ. Вы можете просто изменить его в файле wordpress.

местоположение: www/project_name/wp-includes/nav-menu-template.php.

откройте этот файл и в строке с номером 49 измените имя класса подменю на свой собственный класс.

Или вы также можете добавить свой собственный класс рядом с подменю.

Готово.

Это сработало для меня. Я использовал wordpress-4.4.1.

  • 4
    Ваш ответ будет работать только до тех пор, пока WordPress не обновит свои основные файлы. Если WordPress выпускает обновление, которое изменяет файл, которым вы манипулировали, ваши изменения будут стерты. Лучше создать Walker Nav, как предложено выше. Хорошее эмпирическое правило - никогда не изменять файлы ядра, так как они могут изменяться с обновлениями ядра.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню