如果沒有菜單和子菜單，WordPress 網站就不會太多。在 WordPress 中根據自己的喜好自定義這些菜單也很簡單。因此，您的 WordPress 菜單是一個「前線」工具，可用於獲得較高的搜索排名並讓訪問者留在網站上。
嘗試免費演示
WordPress 中的專用屏幕掩蓋了您的菜單的複雜程度。您還可以在站點的多個位置顯示菜單。如果您具備編碼技能，則可以使用幾乎無限的可能性自定義您的 WordPress 菜單。
在這篇文章中，我們將為您提供創建 WordPress 菜單的深入指南。我們還將向您展示如何使用該功能並以幾種不同的方式增強它。
WordPress 菜單剖析
對於初學者來說，WordPress 菜單通常是一組鏈接（包括下拉菜單）。這是一個簡單的功能，只是您網站主幹中的一個「脊椎」。
WordPress 菜單的示例。
我們將在下一節中更詳細地介紹您將在網站上看到菜單的位置。現在，要知道它們可以放在您想要展示的任何地方。您可能只有幾個預先選擇的選項（基於小部件區域）。不過，從技術意義上講，菜單可以放在任何地方。
當然，WordPress 菜單對於瀏覽網站至關重要。如果您有一個清晰明確的導航菜單，這將有助於用戶瀏覽您的網站，並降低跳出率。
它們還有另一個目的：您的菜單有助於您的搜索引擎優化 (SEO)。為 SEO 優化 WordPress 菜單更多的是關於省略什麼而不是你放入什麼。首先，你可以去掉元素——比如標籤雲——並保持你包含的鏈接數量很少。
雖然 Google 允許您在一個頁面上添加多達 250 個鏈接，但保持較高的「鏈接價值」至關重要。因此，從長遠來看，減少外部鏈接的數量將對您有好處。
body a.novashare-ctt{display:block;background:#00abf0;margin:30px auto;padding:20px 20px 20px 15px;color:#fff;text-decoration:none!important;box-shadow:none!important;- webkit-box-shadow:none!important;-moz-box-shadow:none!important;border:none;border-left:5px solid #00abf0}body a.novashare-ctt:hover{color:#fff;border- left:5px solid #008cc4}body a.novashare-ctt:visited{color:#fff}body a.novashare-ctt *{pointer-events:none}body a.novashare-ctt .novashare-ctt-tweet{display: block;font-size:18px;line-height:27px;margin-bottom:10px}body a.novashare-ctt .novashare-ctt-cta-container{display:block;overflow:hidden}body a.novashare-ctt。 novashare-ctt-cta{float:right}body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta{float:left}body a.novashare-ctt .novashare-ctt-cta-text{ font-size:16px;line-height:16px;vertical-align:middle}body a.novashare-ctt 。novashare-ctt-cta-icon{margin-left:10px;display:inline-block;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon svg{vertical-align:middle;height: 18px}body a.novashare-ctt.novashare-ctt-simple{background:0 0;padding:10px 0 10px 20px;color:initial}body a.novashare-ctt.novashare-ctt-simple-alt{background:#f9f9f9 ;padding:20px;color:initial}body a.novashare-ctt.novashare-ctt-simple-alt:hover,body a.novashare-ctt.novashare-ctt-simple:hover{border-left:5px solid #008cc4} body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta{color:#00abf0}body a.novashare- ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta{color:#008cc4}如果沒有菜單和子菜單，WordPress 網站就不會太多✨ 在這裡了解如何創建自己的網站 👇點擊推文
不同類型的 WordPress 菜單結構
您可能已經了解，根據應用程序的需求，您可以選擇不同的 WordPress 菜單結構。
例如，標題菜單是最常見的，因為它們處理主站點導航。您也經常會在主導航上方看到較小的菜單，因為這是放置社交媒體圖標、搜索欄等的絕佳位置。
Kinsta 合作夥伴 SAU/CAL 的網站有一個「fly-in」菜單，其中包括導航和社交鏈接：
顯示兩個菜單的飛入式顯示器。
此菜單顯示 WordPress 菜單的用例比導航站點更多。使用 WordPress 的內置功能（稍後會詳細介紹），您幾乎可以為您需要的任何內容創建菜單。
與頁眉導航一樣流行的是頁腳。您將經常使用此區域為向下滾動的用戶重複您的主要導航。此外，它還是為您的產品和服務提供更多基於上下文的鏈接的絕佳場所：
Kinsta 頁腳菜單。
如果站點使用它，您還會在側邊欄中看到菜單：
側邊欄導航示例。
雖然在許多情況下您不會在這裡看到主要導航，但它是社交鏈接、博客文章檔案等的傳統位置。
如何創建自定義 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 菜單插件。
安裝並激活後，您將在 WordPress 中找到一個新的 Mega Menu 面板：
WordPress 中的菜單位置鏈接。
如果您查看「菜單位置」屏幕，您會注意到有更多自定義選項可供您使用：
Max Mega 菜單的菜單位置屏幕。
您還可以應用菜單主題並使用與市場上一些最好的頁面構建器類似的範圍來編輯它們：
Max Mega 菜單中的菜單主題屏幕。
我們可以在這裡挖掘更多內容，儘管我們會重複自己。我們鼓勵您查看我們之前關於 WordPress 菜單插件的帖子。我們詳細介紹了如何為您選擇合適的插件以及如何使用它。
訂閱時事通訊
想知道我們是如何將流量增加超過 1000% 的嗎？
加入 20,000 多名其他人，他們會收到我們的每周時事通訊，其中包含 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 中的「管理位置」選項卡顯示兩個菜單：標題菜單和其他菜單：
在 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’,
// 不回退到第一個非空菜單
‘theme_location’ => ‘__no_such_location’,
// 不回退到 wp_page_menu()
‘fallback_cb’ => false
)
);
一旦您了解了如何創建 WordPress 菜單，您就可以開始增強功能。我們將在最後一節中查看此內容，為 WordPress 創建自定義菜單元框。
您的 WordPress 菜單是一個「前線」工具，可用於獲得較高的搜索排名並讓訪問者留在網站上。👀通過本指南了解如何增強您的功能👇點擊推文
如何增強您的 WordPress 菜單
因為本節是高級的，我們在繼續之前先做一些假設：
需要為您的電子商務網站提供快速、可靠且完全安全的託管服務？Kinsta 提供所有這些以及來自 WooCommerce 專家的 24/7 世界級支持。查看我們的計劃
- 您知道如何使用 PHP 創建 WordPress 菜單。
- 您的 PHP 技能足以學習一些高級主題。
- 您知道如何註冊和初始化 WordPress 插件。
這超出了本文的範圍，但您可以使用 WordPress 插件樣板生成器來創建新的標準化插件模板。
WordPress 插件樣板生成器。
準備好後，創建插件並將其上傳到 WordPress：
安裝在 WordPress 中的新插件。
接下來，導航到插件的文件夾並打開主文件。在這裡，添加以下代碼：
/**
* 添加菜單元框
*
* @param object $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’ );
返回 $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 內容：
/**
* 顯示作者菜單項的元框。
*
* @global int|string $nav_menu_selected_id (id, name or slug) 當前選擇的菜單
*/
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 = ‘所有’;
if ( isset( $_REQUEST[‘authorarchive-tab’] ) && ‘admins’ == $_REQUEST[‘authorarchive-tab’] ) {
$current_tab = ‘admins’;
} elseif ( isset( $_REQUEST[‘authorarchive-tab’] ) && ‘all’ == $_REQUEST[‘authorarchive-tab’] ) {
$current_tab = ‘all’;
}
以下行將獲取所有具有寫入許可權的用戶並向 $authors 對象添加許多屬性：
$authors = get_users( array( ‘orderby’ => ‘nicename’, ‘order’ => ‘ASC’, ‘who’ => ‘authors’ ));
$admins = array();
/* 將值設置為所需的項目屬性 */
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=”https://kinsta.com/blog/wordpress-custom-menu/<?php%20if%20(%20$nav_menu_selected_id%20)%20echo%20esc_url(%20add_query_arg(“authorarchive-tab’, ‘all’, remove_query_arg( $removed_args ) ); ?>#tabs-panel-authorarchive-all”>
<?php _e( ‘查看全部’ ); ?>
</a>
</li>
<li <?php echo ( ‘admins’ == $current_tab ? ‘ class=”tabs”‘ : ” ); ?>>
<a class=”nav-tab-link” data-type=”tabs-panel-authorarchive-admins” href=”https://kinsta.com/blog/wordpress-custom-menu/<?php%20if%20(%20$nav_menu_selected_id%20)%20echo%20esc_url(%20add_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 內容。
為元框選項卡構建 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) 數組(‘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) 數組(‘walker’ => $walker));
?>
</ul>
</div>
簡而言之，每個選項卡都包含一個複選框列表。walk_nav_menu_tree() 函數使用三個參數列印列表：$items、$depth 和 $r – 都是必需的。
$items 數組存儲一組管理員用戶。array_map() 函數將 wp_setup_nav_menu_item() 函數應用於 $admins 並將菜單項屬性添加到數組元素。
作者的元框，填充了用戶。
從這裡，我們可以添加收尾工作。
添加提交按鈕
大多數自定義元框已經完成，儘管我們仍然需要添加一個提交按鈕和一個處理「微調器」圖標。
下面是一小段代碼，您可以將其直接放在上一個塊之後：
<p class=”button-controls wp-clearfix”>
<span class=”list-controls”>
<a href=”https://kinsta.com/blog/wordpress-custom-menu/<?php%20echo%20esc_url(%20add_query_arg(%20array(“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= 「提交」<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class=”button-secondary submit-add-to-menu right” value=”<?php esc_attr_e(‘添加到菜單’); ?>” name=”add-authorarchive-menu-item” id=”submit-authorarchive”
</div>
<?php
}
WordPress 中完成的 Authors 元框。
有了這些知識，您幾乎可以向菜單添加任何功能！請注意，GitHub 上還有該插件的公共 Gist 可供免費下載。
概括
WordPress 菜單是您網站的一個重要方面。因此，該平台提供了一個原生且功能強大的面板，可讓您自定義站點上的每個菜單。但是，默認情況下它不會提供您需要的一切。
多個屏幕選項可幫助您添加 CSS 標籤等。此外，安裝插件可以讓您將本機菜單變成大型菜單，並使用增強的功能使您的菜單更具響應性（以及其他方面）。編碼也是一種可能性，雖然這對新手編碼員來說是一項具有挑戰性的任務，但您可以在一個下午的時間裡把它放在一起。
您想自定義您的 WordPress 菜單嗎？如果是，您打算採用什麼方法？在下面的評論部分分享您的想法和意見！
通過以下方式節省時間、成本並最大限度地提高站點性能：
- 來自 WordPress 託管專家的即時幫助，24/7。
- Cloudflare 企業集成。
- 全球受眾覆蓋全球 28 個數據中心。
- 使用我們內置的應用程序性能監控進行優化。
所有這些以及更多，都在一個沒有長期合同、協助遷移和 30 天退款保證的計劃中。查看我們的計劃或與銷售人員交談以找到適合您的計劃。