如何在帖子/頁面中添加 WordPress 導航菜單

已發表: 2023-06-17


您想向您的帖子或頁面添加 WordPress 導航菜單嗎?

默認情況下,您只能在 WordPress 主題設置的位置顯示菜單。 但是,有時您可能需要將菜單添加到特定的帖子或頁面,甚至在頁面內容中顯示菜單。

在本文中,我們將向您展示如何在帖子和頁面中添加 WordPress 導航菜單。

How to add WordPress navigation menu in posts / pages

為什麼要在帖子/頁面中添加 WordPress 導航菜單?

導航菜單是指向網站重要區域的鏈接列表。 這些鏈接可以幫助訪問者找到他們想要的內容,改善客戶體驗,並使人們在您的 WordPress 網站上停留更長時間。

An example of a WordPress navigation menu

菜單的確切位置取決於您的 WordPress 主題。 大多數主題允許您在多個區域顯示菜單,但有時您可能需要向帖子或頁面添加導航菜單。

例如,您可能想要添加一個獨特的菜單,鏈接到特定銷售頁面上提到的所有產品。

您還可以使用菜單在 WordPress 博客上顯示相關帖子。 通過將此導航菜單放置在博客文章的末尾,您可以鼓勵讀者查看您的更多內容。

話雖如此,讓我們看看如何將 WordPress 導航菜單添加到任何帖子或頁面。 只需使用下面的快速鏈接即可直接跳至您要使用的方法:

方法 1:使用 WordPress 導航塊(最適合單個頁面和帖子)

將 WordPress 導航菜單添加到帖子和頁面的最簡單方法是使用內置導航塊。 這允許您在頁面或帖子中的任何位置顯示導航菜單,但您必須手動添加每個菜單。

如果您需要精確控制菜單在每個頁面上的顯示位置,這是一個很好的方法。 但是,如果您想將相同的導航菜單添加到大量頁面和帖子中,這可能會非常耗時且令人沮喪。

要開始使用此方法,只需打開要添加 WordPress 導航菜單的頁面或帖子即可。 然後,單擊“+”按鈕將新塊添加到頁面。

Adding a navigation block to a WordPress page or post

在彈出窗口中,輸入“導航”。

當出現正確的塊時,單擊它以將其添加到頁面或帖子中。

Adding a new block to a WordPress page or post

默認情況下,導航塊將顯示您的菜單之一。

如果您想添加不同的菜單,請打開“阻止”選項卡。 然後,您需要選擇“列表視圖”選項卡。

The List View tab, in the WordPress block editor

在這裡,您可以單擊“菜單”旁邊的三個點。

然後,只需選擇您想要使用的菜單即可。

Choosing a different WordPress navigation menu

有時,您可能想通過添加更多鏈接來自定義菜單。 例如,如果您經營一家在線商店,那麼您可能會鏈接到該頁面上提到的所有產品。

要繼續添加鏈接到導航菜單,請單擊“列表視圖”選項卡中的“+”圖標。

Adding page links to a WordPress menu

這將打開一個包含不同選項的彈出窗口。

要添加指向您網站上任何頁面的鏈接,只需單擊“頁面鏈接”。

adding page links to a WordPress menu

您現在可以從下拉菜單中選擇頁面或開始輸入頁面標題。 當出現右側頁面時,單擊將其添加到菜單中。

要將更多頁面添加到導航菜單,只需重複上述相同過程即可。

Adding links to WordPress

您還可以將社交圖標添加到 WordPress 菜單中,這將鼓勵人們在 Twitter、Facebook、YouTube、LinkedIn 等上關注您。

首先,單擊“列表視圖”選項卡中的“+”圖標。 這次,選擇“社交圖標”。

Adding social sharing icons to WordPress

這會添加一個新區域,您可以在其中添加社交圖標。

首先,單擊新的“+ 單擊加號以添加”部分。

Adding social icons to WordPress

現在,選擇您想要鏈接到的社交媒體網絡。

例如,您可以選擇“Twitter”在 WordPress 中推廣您的 Twitter 頁面。

Adding a Twitter icon to WordPress

之後,您需要配置社交圖標。

確切的步驟將根據社交網絡而有所不同。 但是,您通常需要單擊以選擇該圖標,然後輸入您的社交媒體配置文件的 URL。

Adding a Twitter link in WordPress

只需重複這些步驟即可將更多社交圖標添加到導航菜單中。

最後,您可能希望在 WordPress 菜單中添加搜索欄,以幫助人們找到有趣的頁面、帖子、產品等。

WordPress 有內置的搜索功能,但它很基本,並不總是提供準確的結果。 這就是為什麼我們建議使用 WordPress 搜索插件來改進您的網站搜索。

更好的是,如果您選擇像 SearchWP 這樣的高級插件,那麼它將取代默認的 WordPress 搜索。 配置插件後,您網站上的所有搜索框都將自動使用 SearchWP,包括導航菜單中的任何搜索框。

無論您使用的是內置 WordPress 功能還是 SearchWP 等高級插件,只需選擇“搜索”即可將搜索欄添加到菜單中。

Adding a search bar to a WordPress navigation menu

當您對菜單的內容感到滿意時,您可能想要更改其外觀。

您可以通過選擇“設置”選項卡來更改菜單的佈局,包括其對齊方式和方向。

How to style a WordPress navigation block

之後,您可以通過選擇“樣式”選項卡來更改背景顏色、文本顏色、版式等。

當您進行更改時,實時預覽將自動更新。 這意味著您可以嘗試多種不同的設置,看看哪種設置最適合您的 WordPress 博客。

Customizing the WordPress menu in a page or post

您還可以配置更多設置,但這就是向帖子或頁面添加有用的 WordPress 導航菜單所需的全部內容。

專業提示:如果您計劃在多個頁面和帖子中使用相同的導航菜單,那麼明智的做法是將其轉換為 WordPress 塊編輯器中的可重用塊。 這可以節省您大量的時間和精力。

當您準備好啟用導航菜單時,只需單擊“更新”或“發布”按鈕即可。

How to add a WordPress menu to a page or post

現在,如果您訪問此頁面或帖子,您將看到正在運行的導航菜單。

方法 2:使用完整站點編輯器(僅限塊主題)

如果您只想為少數帖子和頁面添加導航菜單,那麼方法 1 是一個不錯的選擇。 但是,您需要手動添加每個菜單,因此如果您想在整個網站上顯示相同的菜單,這不是最佳選擇。

如果您使用基於塊的主題(例如 Hestia Pro),那麼您可以將 WordPress 導航菜單添加到頁面或帖子模板。 然後,此菜單將出現在您的所有頁面或帖子中,而無需您手動添加。 如果您總是想在完全相同的位置顯示相同的導航菜單,那麼這是完美的選擇。

首先,請轉到 WordPress 儀表板中的主題 » 編輯器

Opening the WordPress full site editor

默認情況下,編輯器將顯示主題的主頁模板。

要將導航菜單添加到您的 WordPress 頁面或帖子,請單擊左側菜單中的“模板”。

Choosing a block-based template in WordPress

編輯器現在將顯示構成 WordPress 主題的所有模板。

要將導航菜單添加到您的 WordPress 博客文章中,請選擇“單一”模板。 如果您想向頁面添加菜單,請選擇“頁面”模板。

Choosing a WordPress block-based template

WordPress 現在將顯示您選擇的模板的預覽。

要編輯此模板,請繼續並單擊小鉛筆圖標。

Editing a single WordPress template

完成後,單擊左上角的藍色“+”圖標。

在出現的搜索欄中,輸入“導航”。

Adding a Navigation block to a block-based template

當右側塊出現時,將其拖放到模板上。

默認情況下,該塊將顯示您的菜單之一。 如果您想添加不同的菜單,請單擊“阻止”選項卡。 之後,選擇“列表視圖”。

The List View tab in the WordPress full site editor

現在,您可以單擊“菜單”旁邊的三個點來查看您在 WordPress 網站上創建的所有菜單。

只需從列表中選擇任何菜單即可。

Adding a navigation menu to a page or post template in a block-enabled theme

完成後,您可以按照方法 1 中的步驟向菜單添加更多頁面、添加搜索欄等。

如果您對導航菜單的外觀感到滿意,請單擊“保存”按鈕使其生效。 現在,如果您訪問您的網站,您將在所有 WordPress 頁面或帖子中看到相同的導航菜單。

方法3:創建自定義WordPress主題(更可定制)

另一種選擇是創建自定義 WordPress 主題。 這是一種更高級的方法,但它使您可以完全控制菜單在帖子或頁面中的顯示位置。

在過去,您需要遵循複雜的教程並編寫代碼來構建自定義 WordPress 主題。 然而,現在可以使用 SeedProd 輕鬆創建您自己的主題。

SeedProd 是最好的拖放式 WordPress 頁面構建器,Pro 和 Elite 用戶還可以獲得高級主題構建器。 這允許您設計自己的 WordPress 主題,而無需編寫任何代碼。

The SeedProd theme customizer

有關分步說明,請參閱我們有關如何創建自定義 WordPress 主題(無需任何代碼)的指南。

創建主題後,您可以將導航菜單添加到 WordPress 網站的任何部分。

只需轉到SeedProd » 主題生成器並找到控制帖子或頁面佈局的模板。 這通常是“單篇文章”或“單頁”。

Creating a custom theme using SeedProd

這將在 SeedProd 的拖放頁面生成器中打開模板。

在左側菜單中,滾動到“小部件”部分。 在這裡,找到導航菜單塊並將其拖到您的佈局上。

Adding a navigation widget using the SeedProd page builder plugin

之後,單擊以選擇實時預覽中的導航菜單塊。

現在,打開“選擇菜單”下拉列表並選擇您要顯示的菜單。

Adding a navigation menu to a page or post template using SeedProd

您現在可以在“標題”字段中輸入可選標題。 這將出現在 WordPress 導航菜單上方。

要預覽菜單在您網站上的外觀,請單擊“應用”按鈕。

Previewing a navigation menu in a WordPress page or post

接下來,您可能想通過單擊“高級”選項卡來設置菜單樣式。

如果添加了標題,則可以更改文本顏色、調整版式以及在標題和菜單項之間添加更多空間。

Customizing a navigation menu using SeedProd

您還可以更改菜單項使用的顏色和字體。

只需使用“文本排版”和“文本顏色”設置即可進行這些更改。

Customizing a navigation menu using SeedProd

之後,您可以更改間距、添加自定義 CSS,甚至使用“高級”選項卡中的設置添加 CSS 動畫。

如果您對菜單的外觀感到滿意,請繼續單擊 SeedProd 工具欄中的“保存”按鈕。 然後,選擇“發布”。

Choosing a different WordPress navigation menu

現在,如果您訪問您的網站,您將看到正在運行的新頁面或帖子佈局。

我們希望本文能幫助您了解如何在帖子和頁面中添加 WordPress 導航菜單。 您可能還想查看我們關於如何使用 WordPress 創建登陸頁面的指南,或者查看我們專家精選的必備 WordPress 插件。

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