Я следую этому руководству, чтобы создать мега-меню в WordPress. Он использует виджеты для размещения содержимого подменю. Моя проблема заключается в повторении виджета, который отображается вне родителя в DOM.
Вот мой текущий код:
<ul class="menu"> <?php $locations = get_nav_menu_locations(); if ( isset( $locations[ 'mega_menu' ] ) ) { $menu = get_term( $locations[ 'mega_menu' ], 'nav_menu' ); if ( $items = wp_get_nav_menu_items( $menu->name ) ) { foreach ( $items as $item ) { echo "<li>"; echo "<a href=\"{$item->url}\">{$item->title}</a>"; if ( is_active_sidebar( 'mega-menu-widget-area-' . $item->ID ) ) { echo "<div id=\"mega-menu-{$item->ID}\" class=\"mega-menu\">"; dynamic_sidebar( 'mega-menu-widget-area-' . $item->ID ); echo "</div>"; } echo "</li>"; } } } ?> </ul> Содержимое виджета не является рендерингом в качестве дочернего элемента <div> , а скорее выполняет рендеринг как родственного родителя <li> .
Текущий вывод DOM:
<ul class="menu"> <li> <a href="http://water-wp/">Home</a> </li> <li> <a href="http://water-wp/solutions/">Solutions</a> </li> <!-- Should not be a list item, but rather a child div of the previous list item --> <li id="text-2" class="widget widget_text"> <h2 class="widgettitle">Heading</h2> <div class="textwidget">hnjsf skhdfj sdf</div> </li> <div id="mega-menu-32" class="mega-menu"> 1</div> </ul>
Желаемый вывод DOM:
<ul class="menu"> <li> <a href="http://water-wp/">Home</a> </li> <li> <a href="http://water-wp/solutions/">Solutions</a> <div id="mega-menu-32" class="mega-menu"> <h2 class="widgettitle">Heading</h2> <div class="textwidget">hnjsf skhdfj sdf</div> </div> </li> </ul>
dynamic_sidebar выводит боковую панель при ее вызове. Попробуйте использовать его с буферизацией и сохранить в переменной, как показано ниже:
<ul class="menu"> <?php $locations = get_nav_menu_locations(); if ( isset( $locations[ 'mega_menu' ] ) ) { $menu = get_term( $locations[ 'mega_menu' ], 'nav_menu' ); if ( $items = wp_get_nav_menu_items( $menu->name ) ) { foreach ( $items as $item ) { echo "<li>"; echo "<a href=\"{$item->url}\">{$item->title}</a>"; ob_start(); dynamic_sidebar('mega-menu-widget-area-' . $item->ID); $sidebar = ob_get_contents(); ob_end_clean(); if ( is_active_sidebar( 'mega-menu-widget-area-' . $item->ID ) ) { echo "<div id=\"mega-menu-{$item->ID}\" class=\"mega-menu\">"; echo $sidebar; echo "</div>"; } echo "</li>"; } } } ?> </ul>
Надеюсь это поможет!!