我一直在尝试将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中创建菜单时,向菜单中添加类。
预期结果are this
以及我得到的最终结果(成功创建了菜单,但是尝试添加下拉列表this happens时]
添加或更新主题中的任何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>