代码之家 › 专栏 › 技术社区 › Asfandyar Khan

通过菜单将静态网站转换为wordpress问题

custom-wordpress-pages wordpress-theming wordpress php

Asfandyar Khan · 技术社区 · 8 年前

你好,我有一个静态网站为一个公司与引导,html和css。我想在wordpress中创建相同的网站。我今天开始学习wordpress。

我按照不同的教程制作了我的wordpress模板,我成功地创建了第一个索引。php,并且运行良好。我也创建了关于页面的内容,它也运行良好。但我现在想要的是,我在标题php中有一个菜单,如何将链接添加到我的wordpress页面?

这是我的 收割台顶部.php 我在标题中称之为。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/

现在我的问题是

问题1 。如何在我的 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检查元件后,显示如下

但我想这样

1 回复 | 直到 8 年前

Gvidas 8 年前

对于菜单,应使用标准 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 应出现在 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>