Blocksy 教學 – 3 個步驟做出超輕量 WordPress 超級選單 Mega Menu

WordPress 首頁的下拉選單預設功能只能放頁面、文章、分類以及自訂連結，而這樣的設計較為中規中矩不容易吸引隨機造訪的訪客注意，留下特別的印象。

大多數站長也會在網頁載入效能 vs. 功能兩相權衡之下，放棄製作吸睛、美觀、具備豐富功能的大型、超級選單，而國外一般把這樣的選單稱之為 Mega Menu。白話的說，就是能乘載巨量資訊的選單。

如果有四處「參訪」國外站長或廠商網站設計的習慣，應該不難發現這樣的超級選單一般會包含精美的圖示 Icon、圖片、地圖、聯絡表單或按鈕等功能。

這篇文章將與大家分享如何製作 WordPress 超級選單 (Mega Menu)，只需要使用 Blocksy 佈景主題編輯器就能製作出精美、超輕量，對頁面載入速度沒有負面影響的超級選單。

• 透過 Blocksy 佈景主題編輯器，利用 Blocksy Pro 的 Advanced Menu 擴充功能，可以自訂多欄位的下拉選單，在選單項目上加入圖示 Icon。
• 利用 Blocksy Pro 的 Content Blocks 功能，將行動呼籲 CTA 圖片、按鈕加入下拉選單的欄位中。

首先，我們來安裝 Blocksy 佈景主題。

Blocksy 佈景主題編輯器

在這篇文章中我們會使用 Blocksy Pro 付費版的 Content Blocks 與 Advanced Menu 功能，讓我們從安裝佈景主題與外掛開始！

安裝 Blocksy 佈景主題

首先，到 WordPress 後台的外觀 > 佈景主題，點選「安裝佈景主題」後搜尋 Blocksy。

並點擊「安裝」。

安裝 Blocksy Companion 外掛

因為接下來介紹的 Content Blocks 是需要購買 Blocksy Pro 才會有的 Pro Extensions 功能，所以直接登入 Blocksy 帳號下載最新版的 Blocksy Companion。

接著按照安裝外掛的方式在 WordPress 後台上傳、安裝即可。

如果想先使用免費版的人，可以到外掛 > 安裝外掛搜尋 Blocksy Companion。

並點擊「立即安裝」。

提醒：如果有購買付費版，只需要安裝 Blocksy Companion (Premium) 即可，不需安裝免費版的外掛。

安裝範本 (非必要)

Blocksy 安裝完成之後，從後台進入 Blocksy 的控制面板，點選 Starter Sites 後挑一個喜歡的範本。

這邊以 Modern Shop 為例。

點擊「Import」開始安裝步驟。

Step 1 – 安裝 Child Theme

透過安裝 Child Theme，未來可以直接新增自訂 CSS 代碼，不會因為 Blocksy 升級新版本而受到影響。

Step 2 – 選擇頁面編輯器

這個範本目前提供兩種頁面編輯器 Brizy、Elementor 可供選擇。(不同範本使用的頁面編輯器不盡相同)

Step 3 – 安裝必要的外掛

Modern Shop 範本中還有使用到 Contact Form 7 的功能。

Step 4 – 匯入範本內容

實際上後續編輯頁面時如果拿掉了頁面中使用的 Contact Form，是可以將 Contact Form 7 外掛移除的。

啟用 Advanced Menu 擴充功能

從 WordPress 的後台找到 Blocksy 的功能選單，點擊 Dashboard 進入 Blocksy 的管理頁面。

在管理頁面中可以看到「擴充功能」頁籤，從擴充功能頁面中找到「專業版擴充功能」下的 Advanced Menu。

啟用 Advanced Menu 功能。

設計超級選單 (Mega Menu)

大家可能會好奇，那我們需要去「外觀」>「自訂」中的佈景主題設計頁面，對使用中的選單進行設定嗎？

這點倒是不用擔心，在「自訂」的選單功能頁面中主要是讓站長可以調整第一層選單的呈現樣式、下拉選單的互動模式以及字體、色彩等設計。

我們只需要確認電腦、手機版本目前正在使用的選單名稱即可。

確認好之後，我們接著到「外觀」>「選單」頁面，找到這個選單名稱並且進入編輯選單頁面。

從編輯頁面中，我們可以檢視目前的選單結構，也可以將想要展示的商品、頁面、文章、分類、自訂連結加入結構中，使用 Blocksy 甚至可以將設計好的 Content Blocks 也加入，而這也是我們接下來會使用到的功能。

選單結構

首先，我們要先規劃好這個超級選單 (Mega Menu) 的結構樣式，下拉之後想要區分為幾個大欄位？

Blocksy 的 Advanced Menu 提供了 1 ~ 6 個欄位的選擇，選了欄位數量之後，還可以有大欄位的排版設計可供選擇。

按照你所規畫好的欄位數量，把選單結構的子項目們一一設定好。如果有規劃想放 CTA 圖片或按鈕，可以放置在大欄位中。

選單結構拉好、設定好之後，記得要按下「儲存選單」按鈕，將做過的更動、修改都儲存下來。後續在設定超級選單功能時才不會容易出錯。

我們以 Quants Note 網站中的選單項目「架站教學」的下拉選單作為範例。

這是一個有 3 個欄位的下拉選單，前兩個欄位分別是「Cloudways 教學」系列文章的文章連結，以及「WordPress 教學」系列按類別分類的頁面連結。

第三個 (大) 欄位則是呼籲訪客加入 Quants Note 社團的 CTA 圖片/按鈕連結，這部分會是由 Blocksy 的 Content Block 設計製作的。

超級選單欄位設定

要把下拉選單設定為超級選單我們要先找到這個下拉選單的母項目，以我們的例子來說就是「架站教學」。

將選單項目展開後，點擊「Menu Item Settings」就能進入超級選單的設定頁面。

其中包含了以下功能設定：

• Mega Menu Settings
  這個選單下的子項目是否要套用超級選單功能。
• Dropdown Width
  下拉的超級選單範圍寬度設定：1. 與網站預設內容寬度相同 2. 與瀏覽器寬度相同 3. 自訂寬度
• Columns
  提供了 1 ~ 6 個欄位的選擇，選了欄位數量之後，還可以有大欄位的排版設計可供選擇。
• AJAX Content Loading
  如果超級選單的內容設計相當複雜，啟用 AJAX 的方式載入可以改善網站載入時間。
• Item Label
  是否顯示這個選單項目的標籤名稱
• Label Link
  這個選單項目是否有連結
• 圖示
  這個選單項目前、後是否要顯示圖示
• Badge Settings
  當選單中的文章、頁面有更新內容時，是否顯示醒目「徽章」提醒訪客。例如，我們使用 NEW 讓大家知道這個類別下有新文章。

完成設定後三個欄位的排版就完成了。

如果選單項目需要顯示 Label 圖示，可以進入選單項目的「Menu Item Settings」設定頁面個別進行調整。

行動呼籲 CTA (大) 欄位

接下來就是要放在大欄位中的行動呼籲圖片、按鈕了，這個我們會利用到 Blocksy 的內容區塊 (Content Blocks) 功能進行製作。

使用 Blocksy 的內容區塊

從 WordPress 的管理後台找到 Blocksy 的功能選單。

點擊 Content Blocks 進入內容區塊管理頁面。

點擊 Add New 按鈕新增 Content Blocks。

選擇 Hook 類型的 Content Blocks。

在編輯頁面中任意地揮灑你的設計能力，使用編輯器 (我們是用 Kadence Blocks 區塊編輯器) 做出適合你推廣、行銷目的的內容區塊。

選單設定

接著來到要使用行動呼籲 CTA 的第三個選單子項目，新增選單項目時要從 Content Blocks 類別找到剛剛設計好的 Hook 類型的內容區塊，並新增至選單。

展開這個選單子項目。

點擊「Menu Item Settings」進入超級選單的設定頁面。

並完成以下設定：

• Content Type – 選擇 Content Block
• Select Content Block – 選擇剛剛設計的內容區塊名稱
• Content Visibility – 確認桌機、手機的內容可見度
• Item Label、Label Link、圖示、Badge Settings – 如果只是單純展示內容區塊，不需要這些標籤設定

接著按下「儲存設定」就完成了。

結語

這樣就完成了 WordPress 網站的超級選單 Mega Menu 了，當滑鼠移到「架站教學」選單項目時，就會下拉展開一個漂亮、具備三個欄位的選單，包含了兩個教學類別的欄位以及一個有行動呼籲 CTA 的大欄位。

綜合以上的說明，我們知道了：

• 如何透過 Blocksy 佈景主題編輯器，利用 Blocksy Pro 的 Advanced Menu 擴充功能，可以自訂多欄位的下拉選單，在選單項目上加入圖示 Icon。
• 如何使用 Blocksy Pro 的 Content Blocks 功能，將行動呼籲 CTA 圖片、按鈕加入下拉選單的欄位中。

而使用 Blocksy Pro 功能做出的超級選單對頁面載入效率的影響更是微乎其微。

希望這些對大家在建立 WordPress 的超級選單 (Mega Menu) 時能幫得上忙。

如果有什麼心得、想法或建議，也歡迎大家加入社團一起討論唷！