Мега-меню без плагина (WordPress) (код готов, но не работает) - PullRequest
Новая
       46

Мега-меню без плагина (WordPress) (код готов, но не работает)

0 голосов
/ 11 февраля 2020

Я прошу помощи.

Это моя структура заголовка: 

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="wrapper" class="hfeed">
<header id="header" role="banner">
<div id="branding">
<div id="site-title">
<?php if ( is_front_page() || is_home() || is_front_page() && is_home() ) { echo '<h1>'; } ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_html( get_bloginfo( 'name' ) ); ?>" rel="home"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a>
<?php if ( is_front_page() || is_home() || is_front_page() && is_home() ) { echo '</h1>'; } ?>
</div>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
</div>
<nav id="menu" role="navigation">
<button type="button" class="menu-toggle"><span class="menu-icon">&#9776;</span><span class="menu-text screen-reader-text"><?php esc_html_e( ' Menu', 'generic' ); ?></span></button>

<?php
               $menu_name = 'main-menu';
                $locations = get_nav_menu_locations();
          $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
               $menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );               
?>
                     <ul class="nav">
                         <?php
                         $count = 0;
                         $submenu = true;

                         foreach( $menuitems as $item ):
                             // set up title and url
                             $title = $item->title;
                             $link = $item->url;

                             // item does not have a parent so menu_item_parent equals 0 (false)
                             if ( !$item->menu_item_parent ):

                                       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>";
                                    }
                             // save this id for later comparison with sub-menu items
                             $parent_id = $item->ID;
                         ?>

                         <li>
                             <a href="<?php echo $link; ?>">
                                 <span><?php echo $title; ?></span>
                             </a>

                         <?php endif; ?> 

                            <?php if ( $parent_id == $item->menu_item_parent ): 

                                ?>
                              <?php if ( !$submenu ): $submenu = true; 

                                ?>
                                 <div class="mega-menu sub-menu-columns">
                                  <div class="mega-bg">
                                    <div class="mega-mrg">
                                  <div class="maga-half">
                                  <ul>
                                 <?php endif; ?>
                                  <li><a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a></li>
                                  <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
                                 </ul>                                 
                                  </div>

                               </div>  
                               </div>
                               </div>  

                                <?php $submenu = false; endif; ?>
                                 <?php endif; ?>       

                              <?php if (@$menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
                         </li>                           
                         <?php $submenu = false; endif; ?>

                     <?php $count++; endforeach; ?>

</ul>
</nav>
</header>
<div id="container">

Я зарегистрировал пользовательскую боковую панель в функциях. php 

function wpmm_init() {
    $location = 'main-menu';
    $css_class = 'has-mega-menu';
    $locations = get_nav_menu_locations();
    if ( isset( $locations[ $location ] ) ) {
        $menu = get_term( $locations[ $location ], 'nav_menu' );
        if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
            foreach ( $items as $item ) {
                if ( in_array( $css_class, $item->classes ) ) {
                    register_sidebar( array(
                        'id'   => 'mega-menu-widget-area-' . $item->ID,
                        'name' => $item->title . ' - Mega Menu',
                    ) );
                }
            }
        }
    }
}
add_action( 'widgets_init', 'wpmm_init' );

Теперь - если пункт меню имеет класс has-mega-menu, сам виджет создается только для определенного пункта меню. Я могу поставить туда изображение, html, пользовательские ссылки и т.д. c.

custom menu

, если у пункта меню есть класс "has-mega-menu", этот виджет получает уникальный идентификатор, и я могу поместить свое изображение и некоторое описание.

menu

К сожалению, это не работает. Например, контейнер, содержащий изображение и остальные ссылки, выводится за пределы родительского элемента с помощью ul

console

Я хочу, чтобы этот конкретный уникальный виджет был выводится в классе ul (родительском), поэтому он будет работать как мегаменю. Кто-нибудь может мне помочь? Пожалуйста. Я пытаюсь исправить этот код (я только начинающий), но это буквально третий день, и я не могу найти решение.

...