使用菜单将静态网站转换为 wordpress 问题

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/ 上正确显示

现在我的问题是

第一季度。如何在我的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

对于菜单，您应该使用标准的wp_nav_menu 函数。它自己生成菜单。所以你应该使用这样的东西：

<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 选项应该出现在 WP 管理员的Appeareance 部分，您可以在其中创建新菜单并将其分配给主题中的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>