使用菜单

Question

您好我有一个使用bootstrap，html和css制作的公司的静态网站。我想在wordpress中创建相同的网站。我今天开始学习wordpress。

我已经按照不同的教程制作了我的wordpress模板，我已经设法创建了第一个index.php并且它运行良好。我也创建了关于页面，它也工作得很好。但我现在想要的是，我的标题php中有菜单，如何添加链接到我的wordpress页面？

这是我的 header-top.php 我在header.php中调用它，菜单显示正确

<!-- HEADER TOP MENU-->navbar navbar-inverse navbar-fixed-top navbar-expanded">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand page-scroll"  href="index.html">
            <img src="<?php bloginfo('template_directory')?>/images/jms_logo.png" class="img-responsive" alt="">
        </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
        <ul class="nav navbar-nav navbar-right TopNav">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="license.html">License</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="trainings.html">Trainings</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </div>
</div>

然后我转到wp-admin并创建了一个about页面并向其添加了文字内容，并在此链接上正确显示http://localhost/wordpress/about/

现在我的问题是

Q1 即可。如何在我的header-top菜单页面中添加关于该页面的链接。

<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="license.html">License</a></li>

我对wp是全新的，所以我不确定我做了什么是正确的做法与否？你能不能给我一些适当的教程，我可以很容易地理解这些教程来创建我的网站。

更新菜单

我已经取代了这个

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
    <ul class="nav navbar-nav navbar-right TopNav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="license.html">License</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="trainings.html">Trainings</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

有了这个，但现在我的菜单的CSS消失了。

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">

            <?php wp_nav_menu( array( 'theme_location' => 'header-top' ) ); ?>

    </div>

在我的静态网站

在我的WP中

更新2检查元素后，显示如下

但我想这样

Answer 1

对于菜单，您应该使用标准<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <?php if ( has_nav_menu( 'primary-menu' ) ) { wp_nav_menu( array( 'menu_class' => 'nav navbar-nav navbar-right TopNav', 'theme_location' => 'primary-menu' ) );} ?> </div> 功能。它自己生成菜单。所以你应该使用这样的东西：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
        <ul class="nav navbar-nav navbar-right TopNav">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="license.html">License</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="trainings.html">Trainings</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </div>

而不是：

wp_nav_menu

当您向主题添加MENU时，选项Appeareance应显示在WP管理员的primary-menu部分，您可以在其中创建新菜单并将其分配给li主题中的位置

<强>更新

您只能使用此方法生成$options = array( 'echo' => false ,'container' => false ); $menu = wp_nav_menu($options); echo preg_replace( array( '#^<ul [^>]*>#', '#</ul>$#' ), '', $menu ); 个项目：

$options = array(
      'echo' => false
      ,'container' => false
    );

    $menu = wp_nav_menu($options);
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
     <ul class="nav navbar-nav navbar-right TopNav">
          echo preg_replace( array( '#^<ul [^>]*>#', '#</ul>$#' ), '', $menu );
     </ul>
</div>

所以你可以尝试这样的事情：

var tr = document.querySelector('table tr');
var children = tr.childNodes;
[].slice.call(children).forEach(function(child) {
  if (child.nodeType === 8) {
    var elem = document.createElement('div');
    elem.innerHTML = child.textContent;
    tr.replaceChild( elem.childNodes[0], child );
  }
});