如何在 WordPress 中建立垂直導航功能表
您是否想在 WordPress 中建立垂直導航功能表?導航功能表可以水平或垂直顯示。然而,使用垂直功能表在 WordPress 中有許多優點,它們更適合網站的側欄且在移動設備上更容易導航。
本篇文章將教您如何輕鬆建立垂直導航功能表。
什麼是導航功能表?
導航功能表是一組鏈接,指向 WordPress 網站的重要區域。這個功能表通常作為每個頁面頂部的水平鏈接條呈現。
導航功能表給您的網站結構,並幫助訪客找到他們想要的內容。您可以添加鏈接到您最重要的頁面、分類或主題、WordPress 部落格文章,甚至添加像是社交媒體檔案等自定鏈接。
盡管您經常看到它們水平放置在網站頂部,但垂直導航功能表有許多用途和優點。垂直導航功能表佔用的頁面空間較少,更容易掃描和導航,並且可以放置在側欄、頁腳或作為彈出窗口,使其更具靈活性。
例如,如果您有一個在線商店,使用垂直導航功能表將讓您顯示更多產品分類和產品,而不佔用太多空間。
話不多說,讓我們看看在 WordPress 中創建垂直導航功能表的多種方式。以下是本文將涵蓋的主題:
- 嘗試不同的功能表顯示位置
- 將垂直導航功能表添加到側欄
- 在文章或頁面中創建垂直導航功能表
- 使用完整網站編輯器添加垂直導航功能表
- 使用主題構建插件創建垂直導航功能表
- 創建響應式移動設備垂直導航功能表
- 在 WordPress 中創建下拉功能表
- 在 WordPress 中創建巨型功能表
- 額外:在 WordPress 中創建粘性浮動導航功能表
嘗試不同的功能表顯示位置
當您將導航功能表添加到您的網站時,它將以垂直或水平方式顯示。這取決於您的主題以及您選擇的功能表位置。可用的功能表位置數量取決於您使用的主題。您可能會發現其中一些位置以垂直方式顯示功能表。
要用您的主題進行測試,請從 WordPress 後台側邊欄導航至外觀 » 功能表頁面。在這裡,您可以嘗試看看網站上的可用位置以及它們的顯示方式。
注意:如果您看到的是外觀 » 編輯器,而不是外觀 » 功能表,則表示您的主題啟用了完整網站編輯 (FSE)。您需要參考下面的使用完整網站編輯器創建垂直導航功能表章節。
例如,Twenty Twenty-One 主題不提供任何垂直位置,而 Twenty Twenty 主題提供了一個名為「桌面擴展功能表」的位置。
您只需選擇您希望垂直顯示的功能表,然後選中畫面底部的「桌面擴展功能表」框。之後,您必須確保點擊「保存功能表」按鈕以儲存設置。在我們的演示網站上,這就是它的外觀。
欲了解更多有關編輯功能表和功能表位置的信息,您可以參閱我們的初學者指南,瞭解如何在 WordPress 中添加導航功能表。
將垂直導航功能表添加到側欄
無論您使用的是什麼樣的主題,使用小工具將垂直導航功能表添加到側欄都很容易。
首先,您需要創建一個您希望顯示的導航功能表(如果尚未創建)。然後,從 WordPress 主控制台導航至外觀 » 小工具頁面。
在這裡,只需點擊頁面左上角的「+」按鈕,並將導航功能表區塊拖到側欄。
之後,您可以為小工具命名,並從下拉功能表中選擇您希望顯示的功能表。最後,點擊頁面頂部的「更新」按鈕以保存您的設置。
這是我們的 WordPress 部落格演示中的垂直側欄功能表的外觀。
在文章或頁面中創建垂直導航功能表
您可以以類似方式將垂直導航功能表添加到文章和頁面。
首先,您需要創建一個新文章或編輯現有的文章。
之後,點擊頁面頂部的「+」按鈕,然後將導航區塊拖到頁面上。
接下來,選擇要顯示的功能表。簡單點擊工具欄上的「選擇功能表」按鈕,然後選擇所需的功能表。
最後,您需要查看右側面板中的區塊設置。
在那裡,您會找到功能表方向的兩個按鈕。您需要點擊箭頭向下的按鈕來將功能表垂直排列。
完成後,點擊「發布」或「更新」按鈕保存您的設置。
使用完整網站編輯器添加垂直導航功能表
如果您使用的是基於區塊的主題,則可以使用完整網站編輯器輕鬆地將垂直導航功能表添加到您的網站。
要做到這一點,從您的 WordPress 主控制台導航至外觀 » 編輯器頁面。一旦您進入編輯器,繼續點擊網站頭部顯示的導航功能表。
接下來,點擊工具欄上的「選擇導航」按鈕。
現在,您會在右側面板中看到不同的選項來自定義導航功能表。
其中一個選項是是否以水平或垂直方向顯示功能表。只需點擊向下的箭頭以垂直方向顯示即可創建垂直功能表。
要了解更多信息,請參閱我們的指導,了解如何在 WordPress 中添加導航功能表。
最後,點擊「保存」按鈕以儲存您的設置。您現在已經將垂直導航功能表添加到您的網站。
使用主題構建插件創建垂直導航功能表
SeedProd 是市場上最好的 WordPress 頁面構建器和自定主題構建插件。它允許您輕鬆在 WordPress 網站上的任何位置創建垂直功能表。
首先,您需要安裝並啟用 SeedProd 插件。更多詳細信息,請參閱我們的初學者指南,了解如何安裝 WordPress 插件。
注意:SeedProd 有免費版,允許您在單個頁面上添加垂直導航功能表,但您需要 Pro 版才能訪問主題構建器並將功能表添加到您的主題模板。
啟用後,您需要輸入您的許可證密鑰。您可以在 SeedProd 網站上的賬戶中找到此信息。
之後,您可以使用 SeedProd 創建自定的 WordPress 主題。
創建自定 WordPress 主題
您可以通過導航到 SeedProd » 主題構建器頁面來找到 SeedProd 的主題構建器。在這裡,您可以使用 SeedProd 的現成主題作為起點。這將用一個新的、自定義設計替換您現有的 WordPress 主題。
您只需點擊「主題」按鈕即可做到這一點。
之後,您將看到一列表專業設計的主題,適用於不同類型的網站。例如,有些模板名為「現代商業」、「營銷機構」和「房貸經紀人主題」。
瀏覽選項並選擇最符合您需求的一個,點擊打勾圖標即可。
一旦您選擇了一個主題,SeedProd 將生成您所需的所有主題模板。您可以通過我們的教程學習如何輕鬆自定義這些模板,了解如何輕鬆創建自定的 WordPress 主題。
將垂直導航功能表添加到您的網站模板
現在,您可以使用 SeedProd 將垂直導航功能表添加到任何主題模板中。在本教程中,我們將把功能表添加到部落格索引模板中。
您需要將鼠標移到該模板上,然後點擊「編輯設計」鏈接。
這將打開 SeedProd 的拖放頁面構建器,您將在右側看到網站的預覽,左側是區塊面板。
在這裡,向下滾動區塊直到您來到進階部分。
一旦找到導航功能表區塊,應將其拖到您的側欄或您希望顯示導航功能表的任何位置。默認情況下,功能表中只有一個項目,「關於」。
現在,您需要更改功能表的設置。要做到這一點,點擊功能表,然後可用的選項將顯示在左側欄中。
目前選擇的是「簡單」功能表類型。這允許您在 SeedProd 中構建您自己的導航功能表。
但是,對於本教程,我們將點擊「WordPress 功能表」類型,以使用 WordPress 導航功能表。
最後,您需要點擊「進階」選項卡。在這裡,您會找到一個將列表佈局垂直或水平顯示的選項。
點擊「垂直」按鈕,您將立即看到預覽變成垂直導航功能表。
別忘了點擊頂部的「保存」按鈕以儲存您的垂直功能表。
創建響應式移動設備垂直導航功能表
在使用智能手機的小屏幕時,點擊標準功能表可能很困難。這就是為什麼我們建議您預覽 WordPress 網站的移動版本,以查看在移動設備上的外觀。
垂直功能表更容易導航,尤其是當您使用會自動調整到不同屏幕尺寸的全屏響應式功能表時。
要了解如何讓您的導航功能表在移動設備上更易於使用,請參閱我們的指南,了解如何在 WordPress 中添加全屏響應式功能表。
在 WordPress 中創建下拉功能表
下拉功能表在螢幕頂部看起來像一個正常的水平導航功能表。但當您將鼠標懸停在某個項目上時,將顯示垂直子功能表。
如果您有一個包含大量內容的網站,那麼下拉功能表可以通過主題或層次結構組織功能表結構。這將在有限的空間中顯示更多內容。
要在您的網站上顯示下拉導航功能表,您需要選擇一個具有下拉功能表支持的主題。之後,您需要創建導航功能表,然後將子項添加到一些功能表項目中。
您可以通過我們的初學者指南瞭解如何逐步創建 WordPress 下拉功能表。
在 WordPress 中創建巨型功能表
巨型功能表將多個功能表豎向列出。它們類似於下拉功能表,除了會一次顯示所有子功能表,讓用戶快速輕鬆地找到您最好的內容。
巨型功能表高度引人入勝且互動性強,因為它們結合了水平和垂直功能表的優點,在單個屏幕上顯示您的網站內容的有益概覽。
我們最近在 WPressize Me 添加了一個巨型功能表,以提升內容的發現度。我們在新網站設計的幕後探討中解釋了這一點。
您可以在我們的指南中了解更多,了解如何將巨型功能表添加到您的 WordPress 網站。
額外:在 WordPress 中創建粘性浮動導航功能表
您還可以為您的網站創建一個粘性浮動導航功能表,以提升用戶參與度。粘性功能表即使在用戶向下滾動頁面時也會保持可見,使其易於訪問。
要將導航功能表設置為粘性,您需要安裝並啟用 Sticky Menu & Sticky Header 插件。詳細信息,請參閱我們的分步指南,了解如何安裝 WordPress 插件。
啟用後,導航至設置 » 粘性功能表頁面,並在 「粘性元素(必填)」選項旁邊輸入 #main-navigation。這樣,您甚至可以使垂直導航功能表保持粘性。
完成後,點擊「保存更改」以保存您的設置。欲了解更多指導,請參閱我們的教程,了解如何在 WordPress 中創建粘性浮動導航功能表。
我們希望本教程幫助您了解如何在 WordPress 中創建垂直導航功能表。您還可能想學習如何開始自己的播客或查看我們最佳域名註冊商的專家比較。
如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道,獲得 WordPress 視頻教程。您還可以在 Twitter 和 Facebook 上找到我們。