既存のHTMLテンプレートコードからWordpressメニューを作成するには？

Question

私はウェブサイトにHTMLテンプレートを使用し、Wordpress機能を追加しました。しかし、Header.php内のナビゲーションでは、ページリンクにget_permalinkが使用されます。私はすべての機能を備えた同じナビゲーションメニューを保持したいが、ダッシュボード内にページを追加できるようにする。

現在のコードは次のとおりです。

<!-- Overlay Navigation Menu --> 
<div class="overlay-navigation-wrapper enter-bottom" data-no-scrollbar data-animation="slide-in"> 
    <div class="overlay-navigation-scroll-pane"> 
     <div class="overlay-navigation-inner"> 
      <div class="v-align-middle"> 
       <div class="overlay-navigation-header row collapse full-width"> 
        <div class="column width-12"> 
         <div class="navigation-hide overlay-nav-hide"> 
          <a href="#"> <span class="icon-cancel"></span> </a> 
         </div> 
        </div> 
       </div> 
       <div class="row collapse full-width"> 
        <div class="column width-12"> 
         <nav class="overlay-navigation nav-block"> 
          <h4 class="menu-title">Website Title</h4> 
          <ul> 
           <li> <a href="<?php echo get_permalink(get_page_by_path('Home')) ?>">Home</a> </li> 
           <li> <a href="<?php echo get_permalink(get_page_by_path('About')) ?>">About</a> </li> 
           <li> <a href="<?php echo get_permalink(get_page_by_path('Services')) ?>">Treatments &amp; Offers</a> </li> 
           <li> <a href="<?php echo get_permalink(get_page_by_path('Shop')) ?>">Store</a> </li> 
           <li> <a href="<?php echo get_permalink(get_page_by_path('Contact')) ?>">Contact</a> </li> 
          </ul> 
         </nav> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- Overlay Navigation Menu End --> 
<div class="wrapper reveal-side-navigation"> 
    <div class="wrapper-inner"> 
     <!-- Header --> 
     <header class="header header-bottom header-fixed-on-mobile header-transparent" data-sticky-threshold="window-height" data-bkg-threshold="100"> 
      <div class="header-inner"> 
       <div class="row nav-bar"> 
        <div class="column width-12 nav-bar-inner"> 
         <div class="logo"> 
          <div class="logo-inner"> <a href="<?php echo get_permalink(get_page_by_path('Home')) ?>"><img src="" alt="Sartre Logo" /></a> <a href="<?php echo get_permalink(get_page_by_path('Home')) ?>"><img src="" alt="Sartre Logo" /></a> </div> 
         </div> 
         <nav class="navigation nav-block secondary-navigation nav-right"> 
          <ul> 
           <li> 
            <!-- Button --> 
            <div class="v-align-middle"> <a href="<?php echo get_permalink(get_page_by_path('Contact')) ?>" class="button small text-uppercase pull-right no-margin-bottom">Book Now </span></a> </div> 
           </li> 
           <li class="aux-navigation hide"> 
            <!-- Aux Navigation --> 
            <a href="#" class="navigation-show overlay-nav-show nav-icon"> <span class="icon-menu"></span> </a> 
           </li> 
          </ul> 
         </nav> 
         <nav class="navigation nav-block primary-navigation nav-center"> 
          <ul> 
           <li> <a href="<?php echo get_permalink(get_page_by_path('Home')) ?>">Home</a> </li> 
           <li> <a href="<?php echo get_permalink(get_page_by_path('About')) ?>">About</a> </li> 
           <li> <a href="<?php echo get_permalink(get_page_by_path('Services')) ?>">Treatments &amp; Offers</a> </li> 
           <li> <a href="<?php echo get_permalink(get_page_by_path('Shop')) ?>">Store</a> </li> 
           <li> <a href="<?php echo get_permalink(get_page_by_path('Contact')) ?>">Contact</a> </li> 
          </ul> 
         </nav> 
        </div> 
       </div> 
      </div> 
     </header> 
     <!-- Header End --> 
     <!-- MAIN CONTENT GOES HERE--> 
    </div> 
</div> 

コードはかなり肥大化しているが、テーマが付属し、携帯応答性や他のJavaScript効果が可能になります。

このアプローチにはどのような方法が最適ですか？おかげ

Answer 1

ステップ1：あなたのfunctions.phpにナビゲーションメニューを登録

<?php 
function my_wp_nav_menu(){ 
    register_nav_menus(array(
     'primary' => 'Main Navigation' 
    )); 
} 
add_action('after_setup_theme', 'my_wp_nav_menu'); 

ステップ2：あなたのダッシュボードにAppearance->メニューに行くあなたのナビゲーション項目を追加し、メイン・ナビゲーションを選択しメニューとして。

ステップ3：これは、あなたがワードプレスで制御することができますWordPressのメニューであなたのリストを置き換えます

<?php 
wp_nav_menu(array(
    'container' => '', 
    'theme_location' => 'primary' 
)); 

：とあなたのHTMLにナビゲーションのul Sを交換してください。デフォルトでは、wp_nav_menuはdivというメニューリストをラップします。そのため、'container' => ''を設定するのはメニューリストのマークアップだけです。