+1 vote
by
Это то как мне нужно в идеале вывести меню:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Home<i class="fas fa-chevron-down fa-xs"></i></a>
<!-- Dropdown Menu -->
<ul class="dropdown-menu">
<li class="active"><a class="dropdown-item" href="index.html">Home 01</a></li>
<li><a class="dropdown-item" href="index-02.html">Home 02</a></li>
<li><a class="dropdown-item" href="index-03.html">Home 03</a></li>
<li><a class="dropdown-item" href="index-04.html">Home 04</a></li>
<li><a class="dropdown-item" href="index-05.html">Home 05</a></li>
<li><a class="dropdown-item" href="index-06.html">Home 06</a></li>
</ul>
</li>
Сейчас у меня так (header.php):

<!-- Navbar START -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<?php
wp_nav_menu( [
'theme_location' => 'main',
'menu' => 'main',
'container' => false,
'container_class' => '',
'container_id' => '',
'menu_class' => 'navbar-nav m-auto',
'menu_id' => '',
'echo' => true,
'fallback_cb' => '',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 2,
'walker' => new Main_Walker_Nav_Menu(),
'add_li_class' => ''
] );

?>
Сейчас у меня так (functions.php):
register_nav_menus(
array(
'main' => __( 'Главное меню', '' ),
'footer-info' => __( 'Информация', '' ),
'footer-menu' => __( 'Меню сайта', '' ),
)
);


add_filter( 'category_link', function($a){
return str_replace( 'category/', '', $a );
}, 99 );

class Main_Walker_Nav_Menu extends Walker_Nav_Menu {
/*
* Позволяет перезаписать <ul class="sub-menu">
*/
function start_lvl(&$output, $depth = 3, $args = array()) {
/*
* $depth – уровень вложенности, например 2,3 и т д
*/

if($depth == 0){
$output .= "<ul class=\"dropdown-menu\" role=\"menu\">";
}

if($depth == 1){
$output .= "<ul class=\"dropdown-menu\" role=\"menu\">";
}


}
/**
* @see Walker::start_el()
* @since 3.0.0
*
* @param string $output
* @param object $item Объект элемента меню, подробнее ниже.
* @param int $depth Уровень вложенности элемента меню.
* @param object $args Параметры функции wp_nav_menu
*/


function end_lvl( &$output, $depth = 3, $args = array()) {

$output .= "</ul>";
}
}


function add_class_to_all_menu_anchors( $atts ) {
$atts['class'] = 'nav-item dropdown';
$atts['data-toggle'] = '';

return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_class_to_all_menu_anchors', 10 );

function menu_set_dropdown( $sorted_menu_items, $args ) {
$last_top = 0;
foreach ( $sorted_menu_items as $key => $obj ) {
// it is a top lv item?
if ( 0 == $obj->menu_item_parent ) {
// set the key of the parent
$last_top = $key;
} else {
$sorted_menu_items[$last_top]->classes['dropdown'] = 'nav-item dropdown';
}
}
return $sorted_menu_items;
}
add_filter( 'wp_nav_menu_objects', 'menu_set_dropdown', 10, 2 );


add_filter(
'nav_menu_link_attributes',
function($atts, $item, $args, $depth) {
// добавляем класс nav-link для элементов <a>
$atts['class'] = 'nav-link dropdown-toggle';
return $atts;
},
10,
4
);

2 Answers

0 votes
by
I can't put classes on the submenu, and what's more interesting is that the nested
<ul class="dropdown-menu">
<li class="active"><a class="dropdown-item" href="index.html">Home 01</a></li>
<li><a class="dropdown-item" href="index-02.html">Home 02</a></li>
<li><a class="dropdown-item" href="index-03.html">Home 03</a></li>
<li><a class="dropdown-item" href="index-04.html">Home 04</a></li>
<li><a class="dropdown-item" href="index-05.html">Home 05</a></li>
<li><a class="dropdown-item" href="index-06.html">Home 06</a></li>
</ul>
</li>
0 votes
by
Look in the web inspector to see what's different from the "reference" layout
by
I can't put classes on the submenu, and what's more interesting is that the nested
<ul class="dropdown-menu">
<li class="active"><a class="dropdown-item" href="index.html">Home 01</a></li>
<li><a class="dropdown-item" href="index-02.html">Home 02</a></li>
<li><a class="dropdown-item" href="index-03.html">Home 03</a></li>
<li><a class="dropdown-item" href="index-04.html">Home 04</a></li>
<li><a class="dropdown-item" href="index-05.html">Home 05</a></li>
<li><a class="dropdown-item" href="index-06.html">Home 06</a></li>
</ul>
</li>
...