@zipper44

Нужно ли для такого меню использовать кастомный Walker?

Есть такое меню (на 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 ?
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
OtshelnikFm
@OtshelnikFm Куратор тега WordPress
Обо мне расскажет yawncato.com
Конечно!
Именно для этого и есть walker.
У вас верстка сильно от ВП отличается - и это решит использование своего walker
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы