首页 文章

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

提问于
浏览 次
0

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

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

这是我在header.php中调用的 header-top.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完全是新手，所以我不确定我做了什么是正确的做法与否？你能不能给我一些适当的教程，我可以很容易地理解这些教程来创建我的网站 .

UPDATED MENU

我已经取代了这个

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

在我的静态网站上

enter image description here

在我的WP中

enter image description here

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

enter image description here

但我想要这样

enter image description here

php wordpress wordpress-theming custom-wordpress-pages

1 回答

  • 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 位置

    UPDATE

    您只能使用此方法生成 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>
    回复于

相关问题