如何在WordPress主題中添加自定義導航菜單


您是否要在WordPress主題中添加自定義導航菜單? 導航菜單是顯示在大多數網站頂部的水平鏈接列表。

默認情況下,WordPress主題帶有預定義的菜單位置和佈局,但是如果您想添加自己的自定義導航菜單怎麼辦?

在本文中,我們將向您展示如何輕鬆地在WordPress中創建和添加自定義導航菜單,以便您可以在主題的任何位置顯示它們。

在WordPress主題中添加自定義導航菜單

您何時需要此WordPress導航菜單教程?

大多數WordPress主題至少帶有一個位置,您可以在菜單中顯示站點的導航鏈接。

您可以從WordPress管理區域內易於使用的界面管理菜單項。

如果您只是想在網站上添加導航菜單,則只需按照我們的初學者指南了解如何在WordPress中添加導航菜單。

本教程的目的是幫助DIY /中級用戶在其WordPress主題中添加自定義導航菜單。

我們將在本文中介紹以下主題:

話雖如此,讓我們看一下如何在主題中添加自定義WordPress導航菜單。

在WordPress主題中創建自定義導航菜單

導航菜單是WordPress主題的功能。 每個主題可以定義自己的菜單位置和菜單支持。

要添加自定義導航菜單,您需要做的第一件事是通過將該代碼添加到主題的functions.php文件中來註冊新的導航菜單。

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

你現在可以去 外觀»菜單 WordPress管理員中的頁面,並嘗試創建或編輯新菜單。 您將看到“我的自定義菜單”作為主題位置選項。

自定義導航菜單添加到主題

如果要添加多個新的導航菜單位置,則需要使用如下代碼:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

添加菜單位置後,請按照我們有關如何為初學者添加導航菜單的教程,繼續並在WordPress管理員中添加一些菜單項。

這將使我們繼續進行下一步,即在您的主題中顯示菜單。

在WordPress主題中顯示自定義導航菜單

接下來,我們需要在WordPress主題中顯示新的導航菜單。 通常放置導航菜單的最常見位置是網站標題或徽標之後的網站標題部分。

但是,您可以在所需的任何位置添加導航菜單。

您需要將此代碼添加到您想要顯示菜單的主題的模板文件中。

 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

主題位置是我們在上一步中選擇的名稱。

容器類是CSS類,它將添加到導航菜單中。 您的菜單將在網站上顯示為純項目符號列表。

自定義顯示為普通列表

您可以使用CSS類 .custom_menu_class 設置菜單樣式。 這是一個示例CSS,可以幫助您入門:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline;
} 
div.custom-menu-class a { 
    color:#FFFFFF;
}

自定義菜單樣式

要了解有關設置導航菜單樣式的更多信息,請參閱有關如何設置WordPress導航菜單樣式的詳細教程

使用Page Builder在WordPress中添加自定義導航菜單

如果要創建自定義登錄頁面或主頁佈局,則使用WordPress頁面構建器插件會使整個過程變得容易得多。

我們建議使用Beaver Builder,這是市場上最好的WordPress頁面構建器。 它允許您使用簡單的拖放工具(無需編碼)來創建任何類型的頁面佈局。

這還包括向頁面佈局添加自定義導航菜單。

首先,您需要安裝並激活Beaver Builder插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要創建一個新頁面或編輯一個要在其中添加導航菜單的現有頁面。 在帖子編輯器屏幕上,單擊“啟動Beaver Builder”按鈕。

啟動Beaver Builder

如果是新頁面,則可以使用Beaver Builder隨附的現成模板之一。 您也可以立即編輯退出頁面。

選擇一個模板

接下來,您需要添加菜單模塊並將其拖放到頁面上要顯示菜單的位置。

將菜單模塊添加到頁面

這將在彈出菜單中顯示“菜單”模塊設置。 首先,您需要選擇要使用的導航菜單。 您隨時可以通過以下方式創建新菜單或編輯現有菜單 外觀»菜單 WordPress管理區域中的頁面。

菜單模塊設置

您也可以查看其他設置。 使用Beaver Builder,您可以為菜單選擇自定義顏色,背景和其他樣式屬性。

完成後,您可以單擊“保存”按鈕並預覽菜單。

Beaver Builder添加的自定義導航菜單的預覽

在WordPress中創建適合移動設備的響應菜單

隨著移動設備使用量的增加,您可能想通過添加許多流行效果之一使菜單移動友好。

響應菜單示例

您可以為移動菜單添加滑出效果(上方),下拉效果,甚至切換效果。

我們有詳細的分步指南,介紹如何製作可用於移動設備的自適應WordPress菜單。

使用WordPress導航菜單做更多事情

導航菜單是功能強大的網頁設計工具。 它們使您可以將用戶指向網站的最重要部分。

WordPress不僅可以在菜單中顯示鏈接,還可以做很多事情。 嘗試這些有用的教程,以擴展WordPress網站上的導航菜單的功能。

僅此而已,我們希望該最終指南可以幫助您學習如何在WordPress中添加導航菜單。 您可能還想查看我們的25個最有用的WordPress小部件列表,以及我們必須具有WordPress插件的列表。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。