如果您已經(jīng)學(xué)習(xí)了本系列，那么您現(xiàn)在已經(jīng)有了一個工作主題，其中包含已上傳到 WordPress 的模板文件。在本教程中，您將繼續(xù)處理在第 2 部分中創(chuàng)建的 header.php 文件。您將學(xué)習(xí)如何添加可通過 wordpress 菜單管理屏幕進行編輯的導(dǎo)航菜單。為此，您還需要為您的主題創(chuàng)建一個新文件：函數(shù)文件。
您需要什么
要完成本教程，您將需要以下內(nèi)容：
- 您選擇的代碼編輯器
- 用于測試您的工作的瀏覽器
- 本地或遠程 WordPress 安裝
- 如果您在本地工作，則需要 MAMP、WAMP 或 LAMP 才能運行 WordPress。
- 如果您遠程工作，則需要通過 FTP 訪問您的網(wǎng)站，并在 WordPress 安裝中擁有管理員帳戶。
1.注冊導(dǎo)航菜單
要注冊導(dǎo)航菜單，請使用 register_nav_menu() 函數(shù)，您需要將其添加到主題的 functions.php 文件中。
由于您的主題還沒有此文件，因此您首先要創(chuàng)建一個。
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
在主題文件夾中，創(chuàng)建一個名為 functions.php 的新空白文件。
打開新文件并向其中添加以下內(nèi)容：
<?php function wptutsplus_register_theme_menu() { register_nav_menu( 'primary', 'Main Navigation Menu' ); } add_action( 'init', 'wptutsplus_register_theme_menu' ); ?>
您剛剛創(chuàng)建了主題的第一個功能，拍拍自己的背吧！
您創(chuàng)建的函數(shù)名為 wptutsplus_register_theme_menu()，我在其名稱開頭添加了 wptutsplus 前綴，以確保該名稱是唯一的，并且不會與注冊的任何其他函數(shù)沖突通過您可能在網(wǎng)站上運行的插件。
該函數(shù)包括 register_nav_menu()?WordPress 函數(shù)，用于創(chuàng)建菜單。然后，您的函數(shù)將通過 init 操作掛鉤激活，這意味著 WordPress 將在初始化時運行您的函數(shù)。
注意：您必須通過正確的掛鉤激活此類函數(shù)，否則它們將無法工作。
register_nav_menu()函數(shù)有兩個參數(shù)：
- 這些參數(shù)之一包括菜單的位置。在本例中，我們將該位置稱為 ‘primary’。稍后您會將其添加到您的 header.php 文件中，以便 WordPress 顯示正確的菜單。
- 第二個參數(shù)是菜單的描述。在本例中，’主導(dǎo)航菜單’。這將在“菜單”管理屏幕中可見。
2. 設(shè)置導(dǎo)航菜單
您現(xiàn)在可以訪問“菜單”儀表板屏幕，該屏幕以前不可用，因為您的主題沒有注冊菜單。目前，其內(nèi)容并不完美，但我們很快就會更改：
當(dāng)您創(chuàng)建頁面、帖子和其他內(nèi)容時，您可以通過此屏幕將它們添加到導(dǎo)航菜單中。我將添加兩個新頁面，名為“博客”和“關(guān)于”。我將通過“設(shè)置”屏幕將“博客”頁面指定為顯示我的帖子的頁面。您可以創(chuàng)建任何您喜歡的頁面。
完成此操作后，返回“菜單”屏幕編輯菜單，添加新頁面。將新頁面拖動到菜單后，單擊“創(chuàng)建菜單”以創(chuàng)建新菜單。
最后，選中“主題位置”下的“主導(dǎo)航菜單”，以確保該菜單將顯示為您剛剛注冊的主菜單并保存該菜單。
注意：在對菜單進行任何更改后，請務(wù)必記住保存菜單 – 與小部件不同，WordPress 不會自動保存菜單。
3. 將菜單添加到您的主題
目前，此菜單在您的網(wǎng)站上仍然不可見；您需要將菜單添加到頭文件中才能實現(xiàn)此目的。
打開主題的 header.php 文件并找到以下代碼：
<nav class="menu main"><?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?><div class="skip-link screen-reader-text"> <a title="Skip to content" href="#content">Skip to content</a> </div> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Latest news</a> </li> <li> <a href="#">Featured articles</a> </li> </ul></nav><!-- .main -->
并將其替換為：
<nav class="menu main"><?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?><div class="skip-link screen-reader-text"> <a title="Skip to content" href="#content">Skip to content</a> </div> <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> </nav><!-- .main -->
這將添加您在主題中的此位置注冊的導(dǎo)航菜單，使用 wp_nav_menu() 函數(shù)并指定 ‘primary’ （您在注冊時為菜單指定的位置）為’主題位置’。
這現(xiàn)在反映在我網(wǎng)站的導(dǎo)航菜單中：
摘要：菜單不僅僅用于網(wǎng)站標題！
在本教程中，您學(xué)習(xí)了如何注冊導(dǎo)航菜單、向其中添加項目以及將其添加到網(wǎng)站標題。
需要注意的是，菜單不僅僅必須位于網(wǎng)站標題中。您可以在多個位置添加菜單，包括：
- 側(cè)邊欄 – 可能是網(wǎng)站某個部分的部分菜單或當(dāng)前頁面的子頁面列表
- 頁腳 – “小字體”頁面或最常訪問的頁面的菜單。
- 在主導(dǎo)航下方 – 也許是主導(dǎo)航下方的部分菜單。
您可以通過三種方式之一在主題中的更多位置添加菜單。
我按照難度升序列出了它們：
- 通過“菜單”管理屏幕創(chuàng)建額外的菜單，然后使用“自定義菜單”小部件將它們顯示在主題中具有小部件區(qū)域的任何位置
- 通過“菜單”管理屏幕創(chuàng)建額外的菜單，然后將它們添加到主題的代碼中，如上面所做的那樣。在本例中，您向 wp_nav_menu() 函數(shù)調(diào)用的數(shù)組添加一個附加參數(shù)，指定 ‘menu’ 參數(shù)作為您為創(chuàng)建的每個菜單指定的名稱。
- 使用 register_nav_menus() 函數(shù)注冊多個菜單，并將它們添加到主題中的相關(guān)位置，如上所述
為什么不嘗試一下呢？
資源
- 導(dǎo)航菜單指南
- register_nav_menu() 函數(shù)
- wp_nav_menu() 函數(shù)
