我正在学习构建wordpress主题。我创建了一个静态html网站。现在我正在尝试将其转换为wordpress主题。首先,我需要将静态导航栏转换为动态导航栏。以下是我的header.php代码:
<!-- NAVIGATION -->
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'collapse navbar-collapse navigation',
'menu_class' => 'nav navbar-nav'
)
);
?>
</div>
<!-- .col-sm-8 -->
<div class="col-sm-4 navigation" id="social-icons">
<ul>
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href=""><i class="fa fa-instagram"></i></a>
<a href=""><i class="fa fa-pinterest"></i></a>
<a href=""><i class="fa fa-heart"></i></a>
<a href=""><i class="fa fa-google-plus"></i></a>
<a href=""><i class="fa fa-tumblr"></i></a>
</ul>
</div>
<!-- social-icons -->
</div>
<!-- row -->
</div>
<!-- .container -->
</nav>
<!-- .navbar -->
但是输出结果是:
而静态的看起来像:
静态网站的JS小提琴:https://jsfiddle.net/9yyrnmuy/7/
编辑1:
我检查了这些类是否被过度使用并找到了以下语法:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<nav class="nav navbar-nav">
<ul>
<li class="page_item page-item-7 current_page_item">
<a>Home</a></li>
</ul>
</nav>
</div>
<!-- .col-sm-8 -->
而我希望它是:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="category.html">Category 1</a></li>
<li><a href="category.html">Category 2</a></li>
<li><a href="category.html">Category 3</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
<!-- .navbar-nav -->
</nav>
<!-- #navbar-collapse -->
</div>
<!-- .col-sm-8 -->
有人可以帮忙解决这个问题吗?任何帮助将不胜感激。