WordPress 快速入門

頁首選單 Menu 設定

選單是訪客在網站裡移動的主要方式。這一頁說明怎麼建選單、怎麼做下拉階層,以及手機版選單要注意什麼。

選單基本設定

  1. 到「外觀 → 選單」。
  2. 建立新選單。按建立新選單,取一個自己看得懂的名字(例如「主選單」「頁尾選單」),按建立選單。
  3. 加入項目。左側可以挑頁面、文章、分類,或用自訂連結貼任何網址(外部連結、LINE、#區塊錨點都走這裡)。勾選後按新增至選單。
  4. 排順序、做階層。直接拖曳調順序;把一個項目往右縮排,它就變成上一個項目的子選單,前台會變成下拉。
  5. 指定顯示位置。最下方的「選單設定 → 顯示位置」勾主選單(或頁尾選單)。沒有勾這一項,選單建好也不會出現在前台,這是最常見的卡點。
  6. 按「儲存選單」。

選單文字可以和頁面標題不一樣。展開每個項目會看到「導覽標籤」欄位,改它只影響選單上顯示的字。頁面標題寫「關於我們的品牌故事」、選單上只放「關於」,版面會乾淨很多。

幾個實務建議

  • 第一層控制在 5–7 項。超過就開始擠,手機上更明顯。
  • 最重要的動作放最右邊(預約、報名、購買),並做成按鈕樣式,見下面的佈景主題設定。
  • 下拉只做一層。子選單底下再開子選單,手機上幾乎點不到。
  • 要連到同一頁的某個區塊,用自訂連結填 /頁面網址#區塊ID,區塊 ID 在 Elementor 的「進階 → CSS ID」設定。

手機版選單設定

手機上選單會收合成右上角的漢堡圖示。相關設定在 外觀 → 自訂 → Header(Blocksy 佈景主題):

  • 切換斷點——幾寬以下才收合成漢堡。預設通常是 1000px 上下,選單項目多的話可以調大一點。
  • 漢堡展開後的樣式——從上方展開或從側邊滑出,兩種都可以。
  • 手機版要不要顯示 logo 與購物車圖示——Blocksy 的頁首設定裡,桌機與手機是分開排的,兩邊都要各自拖一次。

改完一定要在手機上實際看一次。桌機瀏覽器把視窗拉窄,和真的用手機看不完全一樣——字級、點擊範圍、網址列佔掉的高度都有差。