WordPress

rozwój motywu – Podmenu z rekurencyjnymi podmenu

  • 6 sierpnia, 2024
  • 3 min read
rozwój motywu – Podmenu z rekurencyjnymi podmenu


Udało mi się utworzyć menu z podmenu za pomocą wp_get_nav_menu_items, ale nie jestem w stanie tworzyć podmenu z podmenu rekurencyjnie

To jest kod, którego użyłem do mojego menu z podmenu

Mam tę metodę w klasie o nazwie Helpers 👇

public static function childMenu( $menuArray, $parentId ): mixed {
    $childMenus = [];

    if ( ! empty( $menuArray ) && is_array( $menuArray ) ) {
        foreach ($menuArray as $menu) {
            if ( intval( $menu->menu_item_parent ) === $parentId ) {
                array_push( $childMenus, $menu );
            }
        }
    }
    return $childMenus;
}

I nazywam to w menu 👇

<?php

use Src\Helpers;

$locMenuName = get_nav_menu_locations()['kiss-menu-top'];

$menuItems   = wp_get_nav_menu_items( $locMenuName );


    if ( ! empty( $menuItems ) && is_array( $menuItems ) ) {
    foreach ($menuItems as $menItem){
        if ( ! $menItem->menu_item_parent ) {
            $childMenuItems = Helpers::childMenu( $menuItems, $menItem->ID );
            $hasChildren = ! empty( $childMenuItems ) && is_array( $childMenuItems );
            if ( ! $hasChildren ) {
                ?>
                <a href="<?php echo esc_url( $menItem->url ) ?>" class="flex items-center justify-between px-3 shadow  group-hover:[&_svg]:rotate-90 w-full p-2 text-xl text-white bg-[#03222e] shadow-black">
                    <?php echo esc_html( $menItem->title ) ; ?>
                </a>
                <?php
            } else {
                ?>
                <div class="group">
                    <a href="<?php echo esc_url( $menItem->url ) ?>" class="flex items-center justify-between px-3 shadow  group-hover:[&_svg]:rotate-90 w-full p-2 text-xl text-white bg-[#03222e] shadow-black">
                        <?php echo esc_html( $menItem->title ) ; ?>
                        <span>
                            <svg xmlns=" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block size-6 hover:text-orange-500 drop-shadow-lg ">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                            </svg>
                        </span>
                    </a>
                    <div class="z-50 hidden gap-1 text-xl p-1 mt-1 text-gray-800 bg-[#2c1010] shadow shadow-black group-hover:flex  group-hover:flex-col ">
                        <?php
                        foreach ($childMenuItems as $childMenu) {
                            ?>

                            <a class="g border-b border-slate-40 text-[#0dda51] p-1 px-3" href="<?php echo esc_url( $childMenu->url );?>">
                                <?php echo esc_html( $childMenu->title );?>
                            </a> 
                            <?php
                        }
                        ?>
                    </div> 
                </div>
                <?php
            }
            
        }

        ?>
        
        <?php
    }
} else {
    ?>
    <div class="p-4 text-2xl text-center rounded-md shadow bg-indigo-950 shadow-black">
        <?php echo "No hay menú aun ... 😒"; ?> 
    </div> 
    <?php
}

Problem polega na tym, że nie potrafię sprawić, by podmenu miało własne podmenu itd. rekurencyjnie.

W jaki sposób mogę ulepszyć ten kod, aby uzyskać rekurencyjne podmenu?

Chcę, żeby tak jak to menu ma podmenu, tak też podmenu miały podmenu.

wpisz tutaj opis obrazka


Źródło

Warto przeczytać!  funkcje - Drugi wyróżniony obraz pojawia się tylko w podglądzie metaboksa po zapisaniu posta w edytorze wordpress