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

Question

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

我按照不同的教程制作了我的 wordpress 模板，我已经成功地创建了第一个 index.php 并且它运行良好。我也创建了关于页面，它也运行良好。但我现在想要的是，我的 header php 中有菜单，如何将 link 添加到我的 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 页面并向其中添加了文本内容并且它在 link http://localhost/wordpress/about/[=22= 上正确显示]

现在我的问题是

Q1。我如何在我的 header-top 菜单页面中添加关于页面的 link。

<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>

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

Converting static website to wordpress issues with menus

php

wordpress

wordpress-theming

custom-wordpress-pages