为什么我的html菜单中未显示WordPress转换主题?

问题描述 投票:0回答:1

我一直在尝试将HTML菜单添加到WordPress转换主题中,我已经完成了header.phpfooter.phpindex.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中创建菜单时,向菜单中添加类。

预期结果are this

以及我得到的最终结果(成功创建了菜单,但是尝试添加下拉列表this happens时]

html wordpress menu html-select custom-wordpress-pages
1个回答
0
投票

添加或更新主题中的任何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

© www.soinside.com 2019 - 2024. All rights reserved.