Почему мое меню в html в конвертированную тему WordPress не отображается?

Question

Я пытался добавить меню в HTML в конвертированную тему WordPress, я сделал все header.php, footer.php и index.php. Теперь в моем файле header.php у меня есть меню, но я не понимаю, как его добавить, поскольку его структура совершенно иная. Мой файл 'header. php', в который я добавил меню через конвертер тем Pinegrow

<header class="header-area"> 
    <!-- Top Header Area -->             
    <div class="top-header"> 
        <div class="container h-100"> 
            <div class="row h-100"> 
                <div class="col-12 h-100"> 
                    <div class="header-content h-100 d-flex align-items-center justify-content-between"> 
                        <div class="academy-logo"> 
                            <!-- <a href="index.html"><img src="img/core-img/logo.png" alt=""></a>  -->
                            <h3 style="color: #F3F3F3"><?php _e( 'JCI', 'mytheme' ); ?></h3>
                        </div>
                        <div class="login-content"> 
                            <a href="#" style="color:#F3F3F3;"><?php _e( 'Students Portal', 'mytheme' ); ?></a> 
                        </div>                                 
                    </div>                             
                </div>                         
            </div>                     
        </div>                 
    </div>             
    <!-- Navbar Area -->             
    <div class="academy-main-menu"> 
        <div class="classy-nav-container breakpoint-off"> 
            <div class="container"> 
                <!-- Menu -->                         
                <nav class="classy-navbar justify-content-between" id="academyNav"> 
                    <!-- Navbar Toggler -->                             
                    <div class="classy-navbar-toggler"> 
                        <span class="navbarToggler"><span></span><span></span><span></span></span> 
                    </div>                             
                    <!-- Menu -->                             
                    <div class="classy-menu"> 
                        <!-- close btn -->                                 
                        <div class="classycloseIcon"> 
                            <div class="cross-wrap">
                                <span class="top"></span>
                                <span class="bottom"></span>
                            </div>                                     
                        </div>                                 
                        <!-- Nav Start -->                                 
                        <?php if ( has_nav_menu( 'primary' ) ) : ?>
                            <?php
                                PG_Smart_Walker_Nav_Menu::$options['template'] = '<ul id="{ID}" class="{CLASSES}"> 
                                                                        <li>
                                                                            <a {ATTRS}>{TITLE}</a>
                                                                        </li>                                         
                                                                                                                 
                                                                    </ul>';
                                wp_nav_menu( array(
                                    'container' => '',
                                    'theme_location' => 'primary',
                                    'items_wrap' => '<div class="%2$s classynav" id="%1$s">%3$s</div>',
                                    'walker' => new PG_Smart_Walker_Nav_Menu()
                            ) ); ?>
                        <?php endif; ?> 
                        <!-- Nav End -->                                 
                    </div>                             
                    <!-- Calling Info -->                             
                    <div class="calling-info"> 
                        <div class="call-center"> 
                            <a href="tel:+918210585885"><i class="icon-telephone-2"></i> <span><?php _e( '(+91) 8210585885', 'mytheme' ); ?></span></a> 
                        </div>                                 
                        >
                    </div>                             
                </nav>                         
            </div>                     
        </div>                 
    </div>             
</header>  

и вот полная структура меню, которое я хочу вставить.

<header class="header-area"> 
            <!-- Top Header Area -->             
            <div class="top-header"> 
                <div class="container h-100"> 
                    <div class="row h-100"> 
                        <div class="col-12 h-100"> 
                            <div class="header-content h-100 d-flex align-items-center justify-content-between"> 
                                <div class="academy-logo"> 
                                    <!-- <a href="index.html"><img src="img/core-img/logo.png" alt=""></a>  -->
                                    <h3 style="color: #F3F3F3">JCI</h3>
                                </div>
                                <div class="login-content"> 
                                    <a href="#" style="color:#F3F3F3;">Students Portal</a> 
                                </div>                                 
                            </div>                             
                        </div>                         
                    </div>                     
                </div>                 
            </div>             
            <!-- Navbar Area -->             
            <div class="academy-main-menu"> 
                <div class="classy-nav-container breakpoint-off"> 
                    <div class="container"> 
                        <!-- Menu -->                         
                        <nav class="classy-navbar justify-content-between" id="academyNav"> 
                            <!-- Navbar Toggler -->                             
                            <div class="classy-navbar-toggler"> 
                                <span class="navbarToggler"><span></span><span></span><span></span></span> 
                            </div>                             
                            <!-- Menu -->                             
                            <div class="classy-menu"> 
                                <!-- close btn -->                                 
                                <div class="classycloseIcon"> 
                                    <div class="cross-wrap">
                                        <span class="top"></span>
                                        <span class="bottom"></span>
                                    </div>                                     
                                </div>                                 
                                <!-- Nav Start -->                                 
                                <div class="classynav"> 
                                    <ul> 
                                        <li>
                                            <a href="index.html">Home</a>
                                        </li>                                         
                                        <li>
                                            <a href="#">Downloads</a> 
                                            <ul class="dropdown"> 
                                                <li>
                                                    <a href="index.html">Admission Form</a>
                                                </li>                                                 
                                                <li>
                                                    <a href="about-us.html">Our Prospectus</a>
                                                </li>                                                 
                                            </ul>                                             
                                        </li>                                         
                                        <li>
                                            <a href="about.html">About Us</a>
                                        </li>                                         
                                        <li>
                                            <a href="course.html">Course</a>
                                        </li>                                         
                                        <li>
                                            <a href="contact.html">Contact</a>
                                        </li>                                         
                                        <li>
                                            <a href="blog.html">Notice and Events</a>
                                        </li>                                         
                                    </ul>                                     
                                </div>                                 
                                <!-- Nav End -->                                 
                            </div>                             
                            <!-- Calling Info -->                             
                            <div class="calling-info"> 
                                <div class="call-center"> 
                                    <a href="tel:+918210585885"><i class="icon-telephone-2"></i> <span>(+91) 8210585885</span></a> 
                                </div>                                 
                                >
                            </div>                             
                        </nav>                         
                    </div>                     
                </div>                 
            </div>             
        </header> 

Я также пытался добавить классы в меню при создании меню в Wordpress, включив параметр классов из опции экрана в верхнем левом углу.

ожидаемые результаты это

и конечные результаты, которые я получил (меню создаются успешно, но при попытке добавить выпадающие списки это происходит )

Answer 1

Добавьте или обновите любые функции wp_nav_menu () в вашей теме (часто встречающиеся в заголовке. php), чтобы использовать нового обходчика, добавив элемент 'walker' в массив аргументов wp_nav_menu.

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
) );

Ваше меню теперь будет отформатировано с правильным синтаксисом и классами для реализации раскрывающейся навигации Bootstrap.

Как правило, меню оборачивается дополнительной разметкой, вот пример меню с фиксированным верхом, которое сворачивается для отзывчивого навигация в точке останова md.

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
        ?>
    </div>
</nav>

https://github.com/wp-bootstrap/wp-bootstrap-navwalker