静的なウェブサイトをメニューでワードプレスに変換する

Question

こんにちは私は、ブートストラップ、html、cssで作られた会社の静的なウェブサイトを持っています。私はワードプレスで同じウェブサイトを作りたい。私は今日、ワードプレスを学び始めました。

私はwordpressのためのテンプレートを作るために別のチュートリアルに従ってきました。私は最初のindex.phpを作成することができ、うまくいきました。私はページについても作成しており、それはまたうまくいっています。しかし、私は今、私は私のヘッダーPHPのメニューを持っている、私はどのように私のWordPressのページにリンクを追加するには？

これはheader.phpの中でこれを呼び出して、私のヘッダ-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/

私の質問は

012です

。私のheader-topメニューページにこのページのリンクを追加するにはどうすればいいですか？それをやってかないの正しい方法は、私が行っているものは何でも私はよく分からないので、wpでする

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

イム全く新しいのですか？また、自分のウェブサイトを簡単に作成できる適切なチュートリアルを私に提案することができます。

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がなくなっています。私のWPの私の静的なウェブサイト

で

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

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

    </div> 

更新2の要素を検査した後、それはこの

のように表示されます

しかし、私はあなたのスタンダールwp_nav_menu機能を使用する必要があり、メニューの場合、この

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は、新しいを作成することができWP管理、上のAppeareanceセクションに表示されますテーマ

UPDATE

で primary-menuの位置にメニューを割り当て

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

$menu = wp_nav_menu($options); 
echo preg_replace(array('#^<ul [^>]*>#', '#</ul>$#'), '', $menu); 

ですから、このような何か試すことができます：あなたは、この方法を使用することによってのみliアイテムを生成することができます0

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

+0

'にクラスを追加する必要がありますcontainer_class' => '崩壊ナビゲーションバー-崩壊' は、 'theme_location '=> ' ''' => 'BS-例えば、ナビゲーションバー-崩壊-2'、 'menu_class' =>' NAVナビゲーションバー-NAVナビゲーションバー右TopNavをcontainer_idヘッダートップ '））; ？> ' –