一個WordPress網站如果沒有選單和子選單，就不算什麼了。在WordPress內根據你的喜好定製這些選單也是很簡單的。因此，你的WordPress選單是一個 “front line”工具，以獲得一個高的搜尋排名，並保持訪問者在網站上。
WordPress內部的專用螢幕掩蓋了你的選單可以有多複雜。你也能夠在你的網站上的幾個位置顯示選單。如果你有編碼技能，你可以定製你的WordPress選單，幾乎有無限的可能性。
在這篇文章中，我們將給你一個建立WordPress選單的深入指南。我們還將向你展示如何利用該功能並以幾種不同的方式增強它。
剖析WordPress的選單
對於不熟悉的人來說，WordPress選單通常是一個連結（包括下拉）的集合。它是一個直接的功能，只是你的網站骨架中的一個 “椎體”。
WordPress網站選單示例
我們將在下一節中更詳細地討論在網站上看到的選單。現在，你要知道，它們可以放在你想顯示的任何地方。你可能只有幾個預選的選項（基於小部件的區域）。不過，從技術上講，選單可以放在任何地方。
當然，WordPress的選單對於導航網站是最重要的。如果你有一個清晰明確的導航選單，這將有助於使用者在你的網站上瀏覽，它將使你的跳出率下降。
它們也有另一個目的：你的選單有助於你的搜尋引擎優化（SEO）。優化WordPress選單以利於SEO，更多的是關於捨棄什麼，而不是放進什麼。對於初學者來說，你可以取消一些元素–如標籤雲–並保持你所包含的連結的數量較少。
雖然谷歌允許你在一個頁面上最多新增250個連結，但保持你的 “連結價值“是至關重要的。因此，減少外部連結的數量從長遠來看對你有好處。
WordPress選單結構的不同型別
你可能已經明白，根據你的應用程式的需要，你可以選擇不同的WordPress選單結構。
例如，標題選單是最常見的，因為它們處理的是主要的網站導航。你也會經常看到主導航上方的小選單，因為這是社交媒體圖示、搜尋欄等的絕佳位置。
SAU/CAL的網站有一個 “飛入 “選單，包括導航和社交連結：
SAU/CAL網站飛入式選單
這個選單表明，WordPress的選單有比導航網站更多的使用情況。使用WordPress的內建功能（後面會詳細介紹），你可以為你需要的幾乎任何東西建立一個選單。
與頁首導航一樣流行的是頁尾。你經常會用這個區域為向下滾動的使用者重複你的主要導航。此外，它也是為你的產品和服務提供更多基於上下文的連結的絕佳場所：
閃電博底部選單
如果網站使用側邊欄，你還會看到側邊欄內的選單：
一個側邊欄導航的例子
雖然在很多情況下你不會在這裡看到主要導航，但它是一個傳統的社交連結、部落格文章檔案和更多內容的地方。
如何建立一個自定義的WordPress選單（3種方法）
建立一個WordPress選單是一個簡單的過程，不管你的專業水平如何。有三種主要的方法來完成這項工作：使用WordPress的內建功能；安裝一個合適的外掛或用程式碼來弄髒你的手。
接下來，我們將向你展示如何使用這三種方法建立一個WordPress選單。
1. 使用WordPress的內建功能來建立你的選單
WordPress有內建的工具來幫助你建立一個選單。除了最新的使用者之外，WordPress管理中的一個專門螢幕對所有的使用者來說都是熟悉的。
WordPress的選單介面
當然，使用本地功能來建立你的WordPress選單有許多好處。首先，你與你的網站有完全的相容性。而且，你可以使用一個熟悉的介面和本地工具來建立你的選單。
要達到這個目的，請前往WordPress內的外觀>選單頁面：
WordPress的選單連結
這個螢幕分為幾個不同的部分。在頂部，你會發現選擇當前選單或建立一個新選單的選項：
選單選擇下拉
如果你決定建立一個新的選單，給它起個名字，並檢視選單設定部分。
選單設定選項
這裡有很多覈取方塊，但你有兩個主要決定要做：
- 自動新增頂級頁面到選單中。 這裡的 “頂級 “是指你在WordPress中建立的不是其他頁面的子頁面的頁面。例如，一篇部落格文章不是一個頂級頁面，因為在許多情況下它會有一個父級檔案頁（例如/blog）。另一方面，一個聯絡頁面通常是頂級的，因為它通常不會有一個父頁面。
- 選單位置。 每個主題都會有它的選單位置。除非你改變了主題的核心檔案，否則主題開發者已經硬編碼了這些選單位置。有些主題可能允許你通過其設定來定製它們。
一旦你準備好了，點選建立選單按鈕。螢幕將重新整理，並將顯示你在你的新選單中。接下來，看一下螢幕的左側：
選單項的手風琴式選單
這個螢幕列出了你網站上所有的帖子、頁面、分類法和其他可連結的資產。你通過勾選左邊的方框來建立你的選單，然後點選新增到選單按鈕。
這將把它們移到選單螢幕的中央部分：
在選單結構部分拖放專案
在這裡，你可以把選單專案拖到合適的位置。如果你點選每個專案旁邊的擴充套件箭頭，你還可以為你的選單專案設定一個標籤，或者刪除它。
展開一個選單項
一旦你點選了儲存選單，你就可以開始了。不過，如果你展開螢幕頂部的螢幕選項選單，你可以對你的WordPress選單做更多事情：
顯示選項面板
顯示元素組可以讓你在左邊的側邊欄顯示選單元框。相比之下，顯示高階選單屬性組可以顯示列表項的連結目標、描述和CSS類。
選單螢幕還有一個值得注意的方面。自定義連結框讓你設定一個你選擇的連結，而不是你網站上預定義的頁面：
自定義連結框
這個選項是你如何將社交媒體連結新增到你的WordPress選單中。該平臺將根據你選擇的網站為你拉出正確的圖示，讓你有機會為你選擇的網站提供顯示良好的標識。
2. 使用一個外掛來建立你的自定義WordPress選單
為WordPress新增功能的直接解決方案是通過外掛。上一節已經介紹了為什麼WordPress的原生選項幾乎是你所需要的全部，但是外掛可以擴充套件這個功能。
有一個問題是，你是否需要一個專門的（和額外的）外掛來建立一個WordPress選單，儘管這樣做有很多好的理由。對於初學者來說，你經常會根據你在預設設定下無法訪問的風格來製作一個選單。特定的響應式設計、”巨型選單 “等等，都可以通過外掛來實現。
更重要的是，你可以使用一個專門的編輯器建立選單，並在很多情況下從預設模板中選擇。再加上廣泛的定製選項，你有一個 “無程式碼 “解決方案，將提供一個適合你的網站的WordPress選單。
例如，Max Mega Menu外掛在你能實現的方面沒有任何意外：
Max Mega Menu外掛
一旦它被安裝和啟用，你會在WordPress內發現一個新的Mega Menu面板：
WordPress內的Menu Locations連結
如果你看一下Menu Locations螢幕，你會發現有更多的自定義功能供你使用：
Max Mega Menu的選單位置螢幕
你還可以應用選單主題，並以類似於市場上一些最好的頁面生成器的範圍來編輯它們：
Max Mega Menu中的 “選單主題 “螢幕
我們可以在這裡挖掘更多的東西，儘管我們會重複自己。我們鼓勵你檢視我們以前關於WordPress選單外掛的文章。我們詳細介紹瞭如何選擇適合你的外掛以及如何使用它。
3. 編寫程式碼來建立你的自定義WordPress選單
為你自己的WordPress選單編碼是一個可靠的方法，可以實現你的勇敢者的目標（或者如果你是一個建立新的WordPress主題的開發者）。當然，你不會每天都開啟一個程式碼編輯器來新增一個選單。為此，你會使用本地的WordPress工具（或者可能是一個外掛）。
也就是說，如果你想開發主題，學習如何為WordPress選單編碼是一個重要的要求。成功有四個部分：
- 註冊你的選單。
- 在前端顯示WordPress的選單。
- 在你的選單或其專案中顯示額外的內容。
- 定義一個回撥。
我們假設你對程式碼編輯器很順手，你有一個可以工作的開發環境，而且你的技能很敏銳。如果你還沒有一個主題可以使用，你可以使用WordPress的預設選項，或者從我們的最快WordPress主題列表中挑選一個。
當你準備好的時候，你要開啟主題的 functions.php 檔案。注意，這與一般WordPress的同名檔案不同。在這裡，你需要註冊你的選單。換句話說，你必須告訴WordPress在外觀>選單頁面上顯示什麼。要做到這一點，你需要使用register_nav_menus()函式。
function register_my_menus() {
register_nav_menus(
array(
'header' => __( 'Header Menu' ),
'other' => __( 'Other Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
這段程式碼告訴WordPress內的Manage Locations標籤顯示兩個選單：Header Menu和Other Menu：
在WordPress中註冊選單
接下來，你必須使用wp_nav_menu()函式來顯示你的選單。你要把它新增到與你想顯示選單的地方相對應的模板檔案中。在我們的例子中，我們要用頭，所以我們要在主題的header.php檔案中新增以下程式碼：
wp_nav_menu( array( 'theme_location' => 'header' ) );
可能是這段程式碼被包裹在 if 語句中，和你的其他一些選單一起，所以你要遵循你發現的慣例。
在這一點上，你可以像其他的選單一樣在WordPress中工作。雖然，你可能也想考慮為你的選單項新增額外的內容。例如，你可以擴大定義的陣列，以包括將在輸出時呈現的HTML標籤：
wp_nav_menu( array( 'menu' => 'primary', 'link_before' => '', 'link_after' => '', ) );
你在這裡的最後一項任務是定義一個回撥。預設情況下，當沒有找到指定的選單時，WordPress會顯示一個填充的選單。作為一種選擇，當沒有選擇自定義選單時，WordPress會顯示一個頁面的選單。如果這不是你想要的動作，你可以為 theme-location 引數設定一個不同的引數，也可以新增一個 fallback_cb 引數：
wp_nav_menu( array( 'menu' => 'primary', // do not fall back to first non-empty menu 'theme_location' => '__no_such_location', // do not fall back to wp_page_menu() 'fallback_cb' => false ) );
一旦你理解了如何建立一個WordPress選單，你就可以開始增強其功能。我們將在最後一節看一下這個問題，為WordPress建立一個自定義的選單元框。
如何增強你的WordPress選單
因為這一部分是高階的，我們在繼續之前會做一些假設：
- 你知道如何用PHP建立一個WordPress選單。
- 你的PHP技能足夠好，可以跟隨一些高階主題。
- 你知道如何註冊和初始化一個WordPress外掛。
這超出了本文的範圍，但你可以使用WordPress外掛模板生成器來建立一個新的、標準化的外掛模板。
WordPress外掛模板生成器
當你準備好了，建立並上傳你的外掛到WordPress：
在WordPress內安裝的一個新外掛
接下來，導航到該外掛的資料夾，開啟主檔案。在這裡，新增以下程式碼：
/**
* Add menu meta box
*
* @param object $object The meta box object
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*/
function custom_add_menu_meta_box( $object ) {
add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );
return $object;
}
add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);
WordPress的add_meta_box()函式將在WordPress管理中註冊一個後設資料框。在官方文件中，有幾個引數你要參考。我們也使用nav_menu_meta_box_object()過濾器，因為nav-menus.php檔案中沒有動作可以掛接。這個語句決定了該函式是否為一個物件型別新增選單項的元框。當過濾器執行時，add_meta_box 註冊了自定義元框。
定義一個回撥函式
接下來，我們可以定義一個回撥函式來產生元框的HTML內容：
/**
* Displays a metabox for an author menu item.
*
* @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu
*/
function custom_menu_meta_box(){
global $nav_menu_selected_id;
$walker = new Walker_Nav_Menu_Checklist();
...
}
全域性變數記住了當前的選單ID，而 $walker 儲存了 Walker_Nav_Menu_Checklist 物件的一個新例項。這將建立選單項的HTML列表。
從這裡，我們必須確定自定義元框中的活動標籤。要做到這一點，我們設定 $current_tab 的值，在前面程式碼塊中設定的省略號內工作。
我們在這裡使用兩個標籤，但你可以根據你的需要新增更多的標籤：
$current_tab = 'all';
if ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'admins';
} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'all';
}
The following line will get all users with write privileges and add many properties to the $authors object:
下面一行將獲得所有具有寫許可權的使用者，並向 $authors 物件新增許多屬性：
$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );
$admins = array();
/* set values to required item properties */
foreach ( $authors as &$author ) {
$author->classes = array();
$author->type = 'custom';
$author->object_id = $author->nickname;
$author->title = $author->nickname . ' - ' . implode(', ', $author->roles);
$author->object = 'custom';
$author->url = get_author_posts_url( $author->ID );
$author->attr_title = $author->displayname;
if( $author->has_cap( 'edit_users' ) ){
$admins[] = $author;
}
}
$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' );
?>
這裡，get_users 返回一個由指定引數選擇的 $user 物件的陣列。 who引數將強制WordPress查詢資料庫中具有寫作許可權的使用者。
另外， $admins 陣列將儲存一個作者陣列，而 $removed_args 將儲存一個要刪除的查詢變數的列表。
現在你可以列印元框的標記了。要做到這一點，讓我們建立標籤和連結。
<div id="authorarchive" class="categorydiv"> <ul id="authorarchive-tabs" class="authorarchive-tabs add-menu-item-tabs"> <li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>> <a class="nav-tab-link" data-type="tabs-panel-authorarchive-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'all', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-all"> <?php _e( 'View All' ); ?> </a> </li> <li <?php echo ( 'admins' == $current_tab ? ' class="tabs"' : '' ); ?>> <a class="nav-tab-link" data-type="tabs-panel-authorarchive-admins" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'admins', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-admins"> <?php _e( 'Admins' ); ?> </a> </li> </ul>
記住要給元框元素分配正確的類名、ID和資料屬性；否則，選單就不能按預期工作。
add_query_arg 和 remove_query_arg 函式都是為 authorarchive-tabs 變數設定特定的標籤值，並刪除不必要的變數。
在這一點上，我們有一個定義了標籤的元組框：
作者元框內未填入的標籤
我們的下一步是建立標籤的HTML內容。
為Meta Box標籤建立HTML內容
您需要在 custom_menu_meta_box() 函式中遵循上一節中的程式碼。要構建內容，請在上一節中編寫的 <div> 標記中使用以下內容：
<div id="tabs-panel-authorarchive-all" class="tabs-panel tabs-panel-view-all <?php echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-all" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>
<div id="tabs-panel-authorarchive-admins" class="tabs-panel tabs-panel-view-admins <?php echo ( 'admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-admins" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>
簡而言之，每個標籤都包含一個覈取方塊的列表。walk_nav_menu_tree()函式使用三個引數來列印這個列表。 $items, $depth, 和 $r – 都是必須的。
$items 陣列儲存了一個管理使用者的陣列。 array_map() 函式將wp_setup_nav_menu_item()函式應用於 $admins，併為陣列元素新增選單項屬性。
使用者列表新增至作者meta框
到這裡，我們可以完成最後的步驟。
新增一個提交按鈕
自定義元框的大部分內容已經完成，儘管我們仍然需要新增一個提交按鈕和一個處理 “旋轉 “圖示。
這裡有一段簡短的程式碼，你可以直接放在前面的區塊之後：
<p class="button-controls wp-clearfix">
<span class="list-controls">
<a href="<?php echo esc_url( add_query_arg( array( 'authorarchive-tab' => 'all', 'selectall' => 1, ), remove_query_arg( $removed_args ) )); ?>#authorarchive" class="select-all"><?php _e('Select All'); ?></a>
</span>
<span class="add-to-menu">
<input type="submit"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e('Add to Menu'); ?>" name="add-authorarchive-menu-item" id="submit-authorarchive" />
<span class="spinner"></span>
</span>
</p>
</div>
<?php
}
在WordPress內完成的作者元框
有了這些知識，你可以為你的選單新增幾乎所有的功能！請注意，GitHub上也有一個公開的外掛Gist，可以免費下載。
小結
WordPress選單是你網站的一個重要方面。正因為如此，該平臺提供了一個原生的、強大的面板，可以讓你定製你網站上的每個選單。然而，它不會預設提供你所需要的一切。
幾個螢幕選項可以幫助你新增CSS標籤和更多。此外，安裝一個外掛將讓你把你的本地選單變成巨型選單，並使用增強的功能，使你的選單更具響應性（以及其他方面）。編碼也是一種可能性，雖然這對一個編碼新手來說是一項具有挑戰性的任務，但你可以在一個下午的時間裡把它放在一起。
你想定製你的WordPress選單嗎，如果是的話，你打算用什麼方法？請在下面的評論區分享你的想法和意見。
評論留言