html - 为什么我的 html 到 WordPress 转换主题的菜单不显示?
问题描述
我一直在尝试将 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 中创建菜单时,我还尝试通过从左上角的屏幕选项启用类选项来向菜单添加类。
预期结果是这样的
和我得到的最终结果(菜单已成功创建,但在尝试添加下拉菜单时会发生这种情况)
解决方案
添加或更新主题中的任何 wp_nav_menu() 函数(通常在 header.php 中找到)以通过将“walker”项目添加到 wp_nav_menu args 数组来使用新的 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>
推荐阅读
- google-maps - Flutter Firebase clustering_google_maps
- python-3.x - 使用 python-docx 阅读具有精确格式(项目符号、下划线、粗体)的文档
- java - 如何在将在 RecyclerView 中添加卡片的片段中设置 OnclickListener FAB
- lisp - 如何在lisp中递归检查列表是否为空?
- docker - 打开我的 Cloud Run 服务的 URL 时出现 403“错误:禁止”
- java - JavaFX 如何部署应用程序并使我的资源在代码中可用?
- c++ - 带有抽象类的列表与向量
- haskell - 构建树中所有分支的列表
- amazon-web-services - 如何在 AWS 上自动扩展 Cassandra 集群或如何根据负载动态连接到集群
- reactjs - 在 history.push 之后中继 fetchQuery 不起作用,但在手动刷新时可以正常工作