建立選單並新增連結後,你可能會想自訂選單的外觀。本指南將介紹常見的選單設計變更方式。
在此指南中
使用網站編輯器的佈景主題,讓你可以在儀表板的「外觀」→「編輯器」中完整自訂網站選單的外觀。傳統佈景主題則在儀表板的「外觀」→「自訂工具」中提供有限的選單設計選項。
若要判斷應參考本指南的哪個章節,請前往你的 WordPress.com 儀表板,查看左側的「外觀」。如果看到「編輯器」,請使用本指南的「網站編輯器」章節;否則請使用「自訂工具」的說明。
若佈景主題使用網站編輯器(也就是儀表板中有「外觀」→「編輯器」),你就能按照以下步驟,透過「導覽」區塊的設定來調整選單設計:
- 從網站的儀表板前往「外觀」→「編輯器」。
- 選取「範本」,然後選擇包含選單的範本,例如「首頁」或「首頁」範本。
- 開啟畫面左上角的「清單檢視」(圖示看起來像三條疊在一起的水平線)。
- 從「清單檢視」中選取「導覽」區塊。
- 如果沒有看到「導覽」區塊,你可以新增一個。
- 檢視畫面右側的「導覽」區塊設定。
- 在「設定」圖示或「樣式」圖示中,自訂「導覽」區塊的樣式。

- 按一下「儲存」按鈕,儲存變更。

請參閱我們的「導覽」區塊使用指南,瞭解各項設定的使用方式,包括:
- 「導覽」區塊樣式,例如顏色、字體排版和尺寸。
- 「導覽」區塊版面配置設定,例如對齊方式、方向和選單顯示方式。
這部影片示範如何找到並使用「導覽」區塊,以及變更設定和樣式。此功能適用於我們可完全自訂的網站編輯器佈景主題。按一下播放按鈕後,你可以使用右下角的控制項來放慢或加快播放速度。
![]()
本節適用於透過 AI 網站建置器建立的網站(所有付費方案)或已啟用 WordPress 代理程式的網站(所有付費方案)。按一下畫面底部的 AI 圖示(四角星形)即可開啟 WordPress 代理程式。
你可以請 WordPress 代理程式直接調整選單的外觀和運作方式。以下是一些你可以請它執行的操作:
- 「將我的導覽選單顏色改成符合我的品牌風格。」
- 「將下拉式選單設定為按一下時開啟,而不是滑鼠懸停時開啟。」
- 「讓我的選單在所有螢幕尺寸上都顯示為漢堡選單。」
- 「在『聯絡』選單項目上新增名為 ‘featured-link’ 的 CSS 類別。」
你可以在所有網站編輯器佈景主題中移動選單位置。網站編輯器佈景主題使用「外觀」中的「編輯器」,讓你完全控制版面配置,包括網站的選單位置。
雖然網站編輯器佈景主題的選單位置可完全自訂,但你可能會想先尋找一個選單位置符合你喜好的佈景主題。深入瞭解如何切換佈景主題。
如果你已選取想使用的網站編輯器佈景主題,並想變更選單的顯示位置,可以參考以下幾個選項:
- 瞭解如何選取和移動「導覽」區塊,或直接跳至教學課程影片。
- 在範本中新增新選單。
- 使用「頁面清單」區塊,將網站導覽新增至個別頁面或文章。
- 使用「目錄」區塊,在頁面或文章中新增導覽。
如果你使用的佈景主題在儀表板的「外觀」底下沒有「編輯器」,請參考我們可完全自訂的網站編輯器佈景主題。
桌面版畫面顯示的選單,通常會以單行顯示文字連結清單。較小的螢幕(如平板電腦和行動裝置)空間可能不足,無法完整顯示所有文字連結,也不方便訪客點選。
通常會把選單項目收合到稱為「覆疊」或「漢堡」選單的按鈕後方(因為三條水平線看起來像漢堡,所以才這樣命名)。

你可以在「網站編輯器」的「導覽」區塊設定中,調整覆疊選單的顯示方式。請按照以下步驟自訂覆疊選單的顯示方式:

網站訪客已習慣在行動裝置上看到圖示或漢堡選單。如果顯示桌面版選單(也就是關閉覆疊選單),可能會讓訪客在行動裝置上難以瀏覽你的網站。
請參閱「導覽」區塊使用指南,瞭解此區塊的所有功能。
傳統佈景主題和第三方佈景主題可能會自行設定選單在行動裝置上的預設顯示方式。請查閱你所選佈景主題的說明文件以瞭解更多資訊。
你可以控制下拉式選單是在訪客將滑鼠游標移到選單項目上方時開啟、按一下時開啟,還是始終保持顯示。
若要設定子選單的顯示方式,請按照以下步驟操作:

本指南的這個章節適用於使用 WordPress.com 個人版、進階版、商用版和電子商務版方案的網站。免費網站請先升級方案,才能使用此功能。
CSS 類別是進階選單屬性,可用於將 CSS 類別套用至個別選單項目。
若要確認應參考本指南的哪個章節,請前往 WordPress.com 儀表板,查看左側的「外觀」選項。如果你看到「編輯器」,請參考「網站編輯器」章節;否則請參考「傳統佈景主題」的操作說明。
進一步瞭解如何新增自訂 CSS。



