为什么我的 html 菜单到 WordPress 转换主题没有显示？

Question

我一直在尝试将 HTML 中的菜单添加到 WordPress 转换的主题，我已经制作了header.php 、 footer.php和index.php 。 现在在我的header.php文件中，我有我的菜单，但我对如何添加菜单感到困惑，因为它的结构完全不同。 我通过 Pinegrow 主题转换器在其中添加了菜单的“header.php”文件

 <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() 函数（通常在 header.php 中）以通过向 wp_nav_menu args 数组添加“walker”项来使用新的 walker。

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