Мне нужна помощь с навигацией по сайту Wordpress. Я пытаюсь заставить Wordpress печатать мою навигацию в этом формате:
<ul data-menu="main" class="menu__level">
<li class="menu__item"><a class="menu__link" data-submenu="submenu-1" href="#">Vegetables</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-2" href="#">Fruits</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-3" href="#">Grains</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-4" href="#">Mylk & Drinks</a></li>
</ul>
<!-- Submenu 1 / Shown when user clicks the first list item (item with data-submenu="submenu-1") on data-menu="main" -->
<ul data-menu="submenu-1" class="menu__level">
<li class="menu__item"><a class="menu__link" href="#">Stalk Vegetables</a></li>
<li class="menu__item"><a class="menu__link" href="#">Roots & Seeds</a></li>
<li class="menu__item"><a class="menu__link" href="#">Cabbages</a></li>
<li class="menu__item"><a class="menu__link" href="#">Salad Greens</a></li>
<li class="menu__item"><a class="menu__link" href="#">Mushrooms</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1" href="#">Sale %</a></li>
</ul>
<!-- Submenu 2 / Shown when user clicks the second list item (item with data-submenu="submenu-2") on data-menu="main" -->
<ul data-menu="submenu-2" class="menu__level">
<li class="menu__item"><a class="menu__link" href="#">Citrus Fruits</a></li>
<li class="menu__item"><a class="menu__link" href="#">Berries</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-2-1" href="#">Special Selection</a></li>
<li class="menu__item"><a class="menu__link" href="#">Tropical Fruits</a></li>
<li class="menu__item"><a class="menu__link" href="#">Melons</a></li>
</ul>
<!-- Submenu 3 / Shown when user clicks the third list item (item with data-submenu="submenu-3") on data-menu="main" -->
<ul data-menu="submenu-3" class="menu__level">
<li class="menu__item"><a class="menu__link" href="#">Buckwheat</a></li>
<li class="menu__item"><a class="menu__link" href="#">Millet</a></li>
<li class="menu__item"><a class="menu__link" href="#">Quinoa</a></li>
<li class="menu__item"><a class="menu__link" href="#">Wild Rice</a></li>
<li class="menu__item"><a class="menu__link" href="#">Durum Wheat</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-3-1" href="#">Promo Packs</a></li>
</ul>
<!-- Submenu 4 / Shown when user clicks the forth list item (item with data-submenu="submenu-4") on data-menu="main" -->
<ul data-menu="submenu-4" class="menu__level">
<li class="menu__item"><a class="menu__link" href="#">Grain Mylks</a></li>
<li class="menu__item"><a class="menu__link" href="#">Seed Mylks</a></li>
<li class="menu__item"><a class="menu__link" href="#">Nut Mylks</a></li>
<li class="menu__item"><a class="menu__link" href="#">Nutri Drinks</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-4-1" href="#">Selection</a></li>
</ul>
Но я не могу понять, как указать дочерние элементы для определенного родительского элемента, а затем распечатать их с помощью подменю данных.
Структура навигации взята отсюда: http://tympanus.net/Blueprints/MultiLevelMenu/
Спасибо!
Обновление: это пришло мне в голову: было бы проще или чище просто получить навигационные данные с помощью php, а затем заполнить их в правильном формате с помощью Javascript? Кто-нибудь знает, будет ли это лучшим способом справиться с этим?
Или как насчет использования rest-api с этим (я довольно новичок в этом, так что есть ли смысл использовать его как часть небольшого проекта веб-сайта)