Как отделить вывод подменю и сохранить связь с родительским элементом

Вопрос или проблема

Я создаю меню, похожее на это https://squareup.com/. У меня готовы html, css и jquery. Теперь я пытаюсь:

Создать элементы меню с его подменю через wp-admin -> внешний вид -> меню (что я уже сделал).

Вывести элемент меню с его соответствующими подменю отдельно и динамически.

<header>
<?php if ( get_field(‘landing_hero_image’) ): ?>
<div class=”menu” style=”background-image: url(<?php the_field(‘landing_hero_image’); ?>);”>
<a class=”click-me”>
основной элемент меню
</a>
</div>
<div class=”hidden-content”>
подменю, связанное с основным элементом
</div>
<div class=”banner” style=”background-image: url(<?php the_field(‘landing_hero_image’); ?>);”>
</div>
<?php endif; ?>
</header>

Таким образом, в итоге, как мне разделить вывод (html) элементов меню и их детей?

Большое спасибо заранее.

Зарегистрируйте местоположение навигационного меню в файле functions.php вашей темы, используя функцию register_nav_menu(), назначьте ваше настраиваемое меню этому местоположению в Панели управления > Внешний вид > Меню, затем используйте функцию wp_nav_menu() в шаблонах вашей темы, чтобы вывести разметку меню в подходящих местах.

См. обзор навигационных меню в Codex.

Ответ или решение

Чтобы разделить вывод элементов основного меню и его подпунктов в WordPress, и при этом сохранить их взаимосвязь, вам потребуется внести некоторые изменения как в функции вашего шаблона, так и в структуру вывода HTML. Приведенные ниже шаги помогут вам решить эту задачу.

Шаг 1: Регистрация меню в functions.php

В начале убедитесь, что вы зарегистрировали навигационное меню. Это можно сделать в файле functions.php вашей темы:

function my_theme_setup() {
    register_nav_menu('main-menu', __('Main Menu'));
}
add_action('after_setup_theme', 'my_theme_setup');

Шаг 2: Создание меню в админочной панели

Перейдите в админку вашего сайта (Внешний вид -> Меню) и создайте меню, добавляя как основные пункты, так и подпункты. Убедитесь, что подпункты соответствуют родительскому пункту.

Шаг 3: Получение меню в шаблоне

Теперь в вашем шаблоне (например, в header.php) используйте функцию wp_nav_menu(), чтобы получить элементы меню. Чтобы разделить вывод родительских элементов и их подпунктов, вам нужно будет использовать фильтр или настраиваемый классовый формат.

Шаг 4: Вывод HTML с разделением

Для начала, используйте wp_nav_menu() в следующем формате:

<header>
    <?php if (get_field('landing_hero_image')): ?>
        <div class="menu" style="background-image: url(<?php the_field('landing_hero_image'); ?>);">
            <?php
            wp_nav_menu(array(
                'theme_location' => 'main-menu',
                'items_wrap' => '%3$s',
                'walker' => new WP_Bootstrap_Navwalker() // если нужен кастомный вывод 
            ));
            ?>
        </div>
        <div class="hidden-content">
            <?php foreach(new WP_Query(array('post_type' => 'page')) as $item): ?>
                <div class="submenu-container">
                    <?php if($item->post_parent): ?>
                        <div class="submenu-item" data-parent="<?php echo $item->post_parent; ?>">
                            <?php echo $item->post_title; // Заголовок подпункта ?>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </div>
        <div class="banner" style="background-image: url(<?php the_field('landing_hero_image'); ?>);"></div>
    <?php endif; ?>
</header>

Шаг 5: Связь подпунктов с родительскими элементами

Используя класс data-parent в подпунктах, вы устанавливаете связь между родительскими и дочерними элементами. Убедитесь, что ваш JavaScript, например, на jQuery, делает эту связь интерактивной: при наведении на родительский пункт можно отображать соответствующий подпункт.

Шаг 6: Настройка JavaScript для взаимодействия

Добавьте следующий код jQuery для управления отображением элементов:

jQuery(document).ready(function($) {
    $('.menu a').hover(function() {
        var parentID = $(this).data('parent');
        $('.hidden-content .submenu-container').hide(); // Скрыть все
        $('.hidden-content .submenu-container[data-parent="' + parentID + '"]').show(); // Показать соответствующий элемент
    }, function() {
        $('.hidden-content .submenu-container').hide(); // Скрыть при наведении вне области
    });
});

Заключение

С помощью этих шагов можно динамически разделять меню и их подпункты, поддерживая между ними связь. Используйте полученные знания для настройки пользовательского интерфейса вашего сайта. Адаптируйте код в соответствии с вашими требованиями и обеспечьте корректное отображение на разных устройствах.