Есть такое меню (на html, полностью готовое, задача повторить его на wp с возможностью редактирование из под него)
<div class="header__menu menu">
<nav class="menu__body">
<ul class="menu__list">
<li class="menu__item menu-parent">
<a href="#" class="menu__link">1111</a>
<button aria-label="get submenu" class="menu__arrow icon-chevron"></button>
<div class="submenu">
<ul class="submenu__list">
<li class="submenu__item">
<a href="#" class="submenu__link">222</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">33333</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">44444</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">55555</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">66666</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">77777</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">888888</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">9999999</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">1111111</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">2222222</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">3333333</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">444444</a>
</li>
</ul>
</div>
</li>
<li class="menu__item menu-parent">
<a href="#" class="menu__link">5555555</a>
<button aria-label="get submenu" class="menu__arrow icon-chevron"></button>
<div class="submenu">
<ul class="submenu__list">
<li class="submenu__item">
<a href="#" class="submenu__link">666666</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link"> 777777</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">8888888</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">999999</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">111111</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">222222</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">Software Support</a>
</li>
<li class="submenu__item">
<a href="#" class="submenu__link">3333333</a>
</li>
</ul>
</div>
</li>
<li class="menu__item">
<a href="" class="menu__link">444444</a>
</li>
<!-- <li class="menu__item">
<a href="/blog" class="menu__link">555555</a>
</li> -->
<li class="menu__item">
<a href="/about" class="menu__link">66666</a>
</li>
</ul>
</nav>
<div class="header__search search">
<button type="button" aria-label="get search form" class="search__btn icon-search"></button>
<form action="#" class="search__form">
<div class="search__body">
<div class="search__container">
<a href="/" class="search__logo">
<img src="img/1x1.png" data-src="img/logo.svg" alt="logo">
</a>
<input type="text" autocomplete="off" name="search" class="search__form-input form__input" placeholder="Search by keyword or phrase">
<button type="submit" class="search__form-btn btn btn-primary btn-sm icon-search">
<span>Search</span>
</button>
<button type="button" aria-label="hide search form" class="search__close icon-close"></button>
</div>
</div>
</form>
</div>
<a href="#" class="header__btn btn btn-primary btn-sm">888888</a>
</div>
Я его пытаюсь переделать под wp вот так
<?php
add_filter( 'nav_menu_submenu_css_class', 'change_wp_nav_menu', 10, 3 );
function change_wp_nav_menu( $classes, $args, $depth ) {
$classes = [];
$classes = [ 'submenu__list','submenu'];
return $classes;
}
add_filter( 'nav_menu_css_class', 'change_menu_item_css_classes', 10, 4 );
function change_menu_item_css_classes( $classes, $item, $args, $depth ) {
$classes = [];
if( 39 === $item->ID || 52 === $item->ID || 61 === $item->ID || 62 === $item->ID ){
$classes = [ 'menu__item','menu-parent'];
}
else
{
$classes = [ 'submenu__item' ];
}
return $classes;
}
function render_main_header_nav()
{
global $base_nav_settings;
$location = 'main-header-nav';
$nav = $base_nav_settings;
$nav['theme_location'] = $location;
if (has_nav_menu($location)) {
wp_nav_menu([
'theme_location' => 'main-header-nav', // Идентификатор вашего меню, указанный при создании
'menu_class' => 'menu__list', // CSS класс для списка меню
'container' => 'nav',
'container_class' => 'menu__body', // CSS класс для контейнера меню
'container_id' => '', // ID для контейнера меню (необязательно)
]);
}
}
function render_footer_nav()
{
global $base_nav_settings;
$location = 'footer-nav';
$nav = $base_nav_settings;
$nav['theme_location'] = $location;
if (has_nav_menu($location)) {
wp_nav_menu($nav);
}
}
Но мне кажется можно сделать проще и понятнее, неужели для такого меню нужно использовать кастомный Walker ?
Сложный
Простой