接下來我們開始製作選單，還記得之前花了大量時間去製作的bootstrap選單嗎？沒看就按這裡吧。這裡我們也可以引入進去，不過，因為bootstrap選單格式和一般選單的格式並不同，我們這裡需要利用到nav walker ， 讓bootstrap選單也能夠在wordpress內使用。

檔案準備

我們點擊下方連結：

打開class-wp-bootstrap-navwalker.php，

接著點選raw，然後把整個內容複製下來，這個檔案能夠幫助你修改wordpress選單的設定：

接著回到visual studio code ， 創建新文件，命名為class-wp-bootstrap-navwalker.php，然後把複製的內容貼上去，好那麼檔案就準備好了。

現在我們只需要把這bootstrap選單登記並啟用就可以了。

登記與啟用

方法和導入css和javscript的方法相近，我們都要先利用function，把這bootstrap選單加入到功能內，然後，再透過add_action來讓功能，能夠在主題內使用。

具體編碼（官方網站有提供）:

function register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

編碼解釋：

require_once

你會發現這次我們採用到require_once，而不再是，wp_register_style和wp_register_script這些，為什麼？因為之前使用的，是wordpress獨有的程式編碼，主要用來導入css和javascript用的，而這次我們需要導入的是php檔案，所以這裡我們會用到require_once。

小知識：
常見的除了有require_once外，亦有include_once，一般require_once會用於靜態內容上，例如版權資料，或者調色板等。至於include_once，則會較常用於會變化的內容上。另外亦可以選擇不加入_once，不過這會導致，已經曾經載入的檔案會再次載入，容易令網頁出現錯誤。

get_template_directory_uri()與 get_template_directory()

你應該注意到，我們之前在導入css檔案時是使用前者，但現在卻使用後者。兩者分別在於前者，會看到程式碼的連結，一般會在導入圖片，css和javascript檔案時使用，而後者則只會看到檔案路徑，一般會在導入php檔案時使用。

after_setup_theme : 讓主體安裝後，就會自動生成

我們雖然把這登記了，不過假若大家有使用wordpress的經驗，也知道用家是可以自由選擇選單出現的位置，自由設定一個選單只出現在頁首位置、側欄位置、頁尾位置等，並且wordpress亦會提供一個板面，方便玩家編輯wordpress選單，用家只需要在外觀，裡，點擊選單，就能夠進入，不過現在沒有

編碼例子:

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
    'footer'  => __( 'Footer Menu', 'THEMENAME' ),
) );

編碼解釋：

register_nav_menus: 就是註冊選單用

array：若選擇不加入array，則只能設定一個位置，加入後則可以允許選單在多個一個地方出現

'primary': 為你希望出現的位置，只需要把檔案名稱加入，並減去.php就可以，例如sidebar.php 就會是sidebar

'Primary Menu': 用家會看到的名稱

關於add_theme_support('menus');

若你看其他網站的教學，會看到他們也會要求你，在function.php裏，需要加入編碼：

add_theme_support('menus');

讓wordpress系統能夠為你在外觀裏，加入選單的項目，方便用家進行編輯。

不過，其實這是沒必要的。主要原因是因為，加入register_nav_menus後，系統已經會幫你自動生成，所以並無必要再次加入，在wordpress官網在解釋register_nav_menus時內亦有提及。

接下來我們可以去查看一下，點擊外觀，假若正確的話，應該會有選單的選項

進去看，會看到這個版面，同時我們亦會看到，下方會有選項選擇位置，這就代表我們正確了。

選單基本設定

成功後，我們到header.php，裏開始設定選單，我們把下方的編碼先複製，然後放到header.php的body下，假若是要放去其他地方，那麼編碼就會需要放置到其他檔案內

編碼內容（編碼在官方網站亦有提供）

   <?php
    wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
    ) );
    ?>

編碼解釋：

** wp_nav_menu**：在wordpress主要透過 wp_nav_menu來編輯選單。

**'theme_location' **：根據之前設定的，例如primary，footer等，設定nav－menu該出現在什麼位置。

** 'depth' ** ：1為沒有dropdown，2為有dropdown

'fallback_cb'： 會產生一個連結，當用家還沒設定選單時，用家可透過點擊連結，連結到編輯選單的地方，若不希望這功能出現，則加入false。

'walker'：為一個wordpress的轉譯工具，透過它就能夠把上邊那些編碼，來生成選單，這裡我們改用為new WP_Bootstrap_Navwalker(),這樣就能夠用到bootstrap的選單了。

其他部分皆為改變class和id

加入bootstrap選單

完成後，我們可以把之前已經製作好的選單放進去，不過因為我們希望，用戶能夠透過wordpress的選單，來編輯選單，所以 由<ul class="navbar-nav mr-auto">開始的部分，並不需要加入。

另外，這裡亦要注意，因為上方把container的id更改為＃bs-example-navbar-collapse-1，所以我們需要把data－target="#navbarSupportedContent"更改為data－target= #bs-example-navbar-collapse-1。此外，我們亦需要把 aria-controls= navbarSupportedContent，更改為aria-controls= bs-example-navbar-collapse-1

最後，因為上方已經設定了container_class和container_id，我們無需要加入任何額外的class和div，並且由於已把container設定為div，這樣變相就已經開了一個div內包著下方的選單，我們並無需要再加入任何div。所以最後這句：
div class=" collapse navbar-collapse " id="navbarSupportedContent">也可以剷除。

小貼士：假若不想選單貼近螢幕邊框，可以加入div=container在navbar-brand的class上方。

最後，記得要把div和nav都關閉好呀^^

在這裡附上完整編碼:

<nav class="navbar navbar-expand-lg bg-info navbar-dark sticky-top" >
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <?php
    wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto ',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
    ) );
    ?>
</nav>

最後，我們可以像平常那樣創立數個頁面，然後創建一個選單，並訪問網頁去看看，你就會見到類似下方的模樣。

假若用google開發者工具調整一下螢幕大小，就會見到響應式選單亦都正常運作。

Navwalker的小問題

你會發現，這個選單是有些問題存在，dropmenu的顏色無論大家怎樣更改，也是改不了，我們不能夠再像之前那樣，直接加入bootstrap class來更改顏色。另外drop menu亦只顯示單層，無論你再怎樣嘗試增加，也是不會有再多一層的，關於這兩個問題，我們明天再說吧