指南/編輯網站/選單/自訂選單設計

自訂選單設計

建立選單新增連結後,你可能會想自訂選單的外觀。本指南將介紹常見的選單設計變更方式。

變更選單設計

使用網站編輯器的佈景主題,讓你可以在儀表板的「外觀」「編輯器」中完整自訂網站選單的外觀。傳統佈景主題則在儀表板的「外觀」「自訂工具」中提供有限的選單設計選項。

若要判斷應參考本指南的哪個章節,請前往你的 WordPress.com 儀表板,查看左側的「外觀」。如果看到「編輯器」,請使用本指南的「網站編輯器」章節;否則請使用「自訂工具」的說明。

若佈景主題使用網站編輯器(也就是儀表板中有「外觀」→「編輯器」),你就能按照以下步驟,透過「導覽」區塊的設定來調整選單設計:

  1. 從網站的儀表板前往「外觀」→「編輯器」
  2. 選取「範本」,然後選擇包含選單的範本,例如「首頁」或「首頁」範本。
  3. 開啟畫面左上角的「清單檢視」(圖示看起來像三條疊在一起的水平線)。
  4. 從「清單檢視」中選取「導覽」區塊
    • 如果沒有看到「導覽」區塊,你可以新增一個
  5. 檢視畫面右側的「導覽」區塊設定
  6. 在「設定」圖示或「樣式」圖示中,自訂「導覽」區塊的樣式。
導覽區塊側邊欄設定中的設定圖示(齒輪和樣式)。
設定與樣式
  1. 按一下「儲存」按鈕,儲存變更。
列表檢視,其中導覽區塊已反白顯示。
在「清單檢視」中選取「導覽」區塊

請參閱我們的「導覽」區塊使用指南,瞭解各項設定的使用方式,包括:

教學課程影片

這部影片示範如何找到並使用「導覽」區塊,以及變更設定和樣式。此功能適用於我們可完全自訂的網站編輯器佈景主題。按一下播放按鈕後,你可以使用右下角的控制項來放慢或加快播放速度。

使用 WordPress 代理程式自訂選單設計

The WordPress Agent four-pointed star icon.

本節適用於透過 AI 網站建置器建立的網站(所有付費方案)或已啟用 WordPress 代理程式的網站(所有付費方案)。按一下畫面底部的 AI 圖示(四角星形)即可開啟 WordPress 代理程式。

你可以請 WordPress 代理程式直接調整選單的外觀和運作方式。以下是一些你可以請它執行的操作:

  • 「將我的導覽選單顏色改成符合我的品牌風格。」
  • 「將下拉式選單設定為按一下時開啟,而不是滑鼠懸停時開啟。」
  • 「讓我的選單在所有螢幕尺寸上都顯示為漢堡選單。」
  • 「在『聯絡』選單項目上新增名為 ‘featured-link’ 的 CSS 類別。」

移動選單

你可以在所有網站編輯器佈景主題中移動選單位置。網站編輯器佈景主題使用「外觀」中的「編輯器」,讓你完全控制版面配置,包括網站的選單位置。

雖然網站編輯器佈景主題的選單位置可完全自訂,但你可能會想先尋找一個選單位置符合你喜好的佈景主題。深入瞭解如何切換佈景主題。

如果你已選取想使用的網站編輯器佈景主題,並想變更選單的顯示位置,可以參考以下幾個選項:

如果你使用的佈景主題在儀表板的「外觀」底下沒有「編輯器」,請參考我們可完全自訂的網站編輯器佈景主題

桌面版畫面顯示的選單,通常會以單行顯示文字連結清單。較小的螢幕(如平板電腦和行動裝置)空間可能不足,無法完整顯示所有文字連結,也不方便訪客點選。

通常會把選單項目收合到稱為「覆疊」或「漢堡」選單的按鈕後方(因為三條水平線看起來像漢堡,所以才這樣命名)。

行動裝置上選單按鈕的範例。
覆疊選單(常稱為漢堡選單)可簡化手機等小型裝置上的導覽體驗。

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

  1. 從網站的儀表板前往「外觀」→「編輯器」
  2. 選取「範本」,選擇包含選單的範本,例如「首頁」或「首頁」範本。
  3. 開啟畫面左上角的「清單檢視」(圖示看起來像三條疊在一起的水平線)。
  4. 「清單檢視」中選取「導覽」區塊
  5. 檢視畫面右側的「導覽」區塊設定
  6. 按一下「設定」圖示(齒輪圖示)。
  7. 「顯示」下方,選擇覆疊選單設定:
    • 行動裝置:預設設定。覆疊選單僅會在行動裝置大小的螢幕上顯示。
    • 關閉:完全不顯示覆疊選單。
    • 一律顯示:無論螢幕大小,一律顯示覆疊選單。
  8. 你可以使用覆疊範本,自訂行動裝置上全螢幕覆疊的設計。請參閱我們的自訂導覽覆疊指南。
  9. 按一下「儲存」按鈕,儲存變更。
導覽區塊的覆疊選單設定。

網站訪客已習慣在行動裝置上看到圖示或漢堡選單。如果顯示桌面版選單(也就是關閉覆疊選單),可能會讓訪客在行動裝置上難以瀏覽你的網站。

請參閱「導覽」區塊使用指南,瞭解此區塊的所有功能。

傳統佈景主題第三方佈景主題可能會自行設定選單在行動裝置上的預設顯示方式。請查閱你所選佈景主題的說明文件以瞭解更多資訊。

選擇下拉式選單的開啟方式

你可以控制下拉式選單是在訪客將滑鼠游標移到選單項目上方時開啟、按一下時開啟,還是始終保持顯示。

若要設定子選單的顯示方式,請按照以下步驟操作:

  1. 從網站的儀表板前往「外觀」→「編輯器」
  2. 選取「範本」,選擇包含選單的範本,例如「首頁」或「首頁」範本。
  3. 開啟畫面左上角的「清單檢視」
  4. 選取「導覽」區塊
  5. 在區塊設定側邊欄中,按一下「設定」圖示(齒輪圖示)。
  6. 「顯示」下方,找到「子選單顯示方式」設定,然後選擇以下其中一個選項:
    • 游標移入:訪客將滑鼠游標移到父選單項目上方時,下拉式選單即會開啟。你也可以關閉顯示選單旁箭頭的設定。
    • 按一下:訪客按一下父選單項目時,下拉式選單才會開啟。
  7. 按一下「儲存」按鈕,儲存變更。
子選單可見度設定。

選單項目的 CSS 類別

本指南的這個章節適用於使用 WordPress.com 個人版、進階版、商用版和電子商務版方案的網站。免費網站請先升級方案,才能使用此功能。

CSS 類別是進階選單屬性,可用於將 CSS 類別套用至個別選單項目。

若要確認應參考本指南的哪個章節,請前往 WordPress.com 儀表板,查看左側的「外觀」選項。如果你看到「編輯器」,請參考「網站編輯器」章節;否則請參考「傳統佈景主題」的操作說明。

若要在網站編輯器中新增 CSS 類別,請按照以下步驟操作:

  1. 從網站的儀表板前往「外觀」→「編輯器」
  2. 選取「範本」,選擇包含選單的範本,例如「首頁」或「首頁」範本。
  3. 開啟畫面左上角的「清單檢視」(圖示看起來像三條疊在一起的水平線)。
  4. 「清單檢視」中選取「導覽」區塊
    • 如果你沒有看到「導覽」區塊,可以新增一個
  5. 檢視畫面右側的「導覽」區塊設定
  6. 按一下「設定」齒輪圖示 ⚙️,然後展開「進階」區段。
  7. 輸入 CSS 類別名稱。
區塊設定側邊欄的進階區段,包含新增額外 CSS 類別的選項。

你也可以為「導覽」區塊中的個別連結設定 CSS 類別。只要先選取該連結,再前往「進階」即可。

請參閱我們的「導覽」區塊指南,瞭解此區塊的所有功能。

進一步瞭解如何新增自訂 CSS

Copied to clipboard!