Blocksy 主題設定：從網站識別到手機導覽

個人生活網站改用 Blocksy 時，最有感的工作往往是把文章、分類和聯絡入口整理好。主題可以控制整體外觀，但讀者能不能找到內容，仍取決於選單、文章結構與手機操作。先確立基本導航，再增加視覺效果，較容易維持一致的網站。

以下依 2026 年 9 月 14 日查閱的官方文件，以區塊編輯器搭配 Blocksy 為主要情境。範例是分享居家與閱讀筆記的網站，未沿用官方展示站文字、圖片或成效數字，也沒有替讀者匯入或購買主題。

主題、Companion 和 Starter Site 各有用途

在 WordPress 外觀、佈景主題、新增中搜尋 Blocksy，安裝後啟用。Blocksy Companion 是另一個外掛，提供 Starter Sites、擴充與相關 Theme Blocks。官方說明基本主題不強制依賴 Companion；是否安裝應看你需要哪些功能。

要使用起始網站，可在啟用 Companion 後進入 Blocksy、Starter Sites，選擇版型並啟動匯入精靈。先確認版型使用 Gutenberg 或 Elementor 等哪個編輯器，不要把不同編輯器的內容當成可以完全互換。也要核對會安裝哪些必要外掛。

匯入精靈可選擇部分內容及是否建立子主題，但既有網站仍應先完整備份並在測試環境試做。模板是內容起點，匯入後要核對首頁、選單、媒體及設定。若失敗，先看錯誤原因，不要反覆重按讓網站留下多份示範資料。

先建立網站識別與共用色彩

先準備網站名稱、標誌與簡短介紹，並確認標誌回到正確首頁。圖像式標誌不宜包含太多細小文字，否則手機縮小後無法辨識。若網站沒有獨立品牌圖案，也可以先以清楚的文字識別完成基本布局。

在 Customiser、General Options、Colors 設定 Global Color Palette，再將共用顏色指派給正文、連結、標題與背景。使用描述用途的名稱，例如主要文字、輔助背景，比只寫色碼容易維護。連結的正常與移入狀態都要看得出來。

調色盤可以供支援的區塊與編輯器引用，但個別元素設定仍可能覆寫全域值。如果某張文章卡片沒有跟著改色，先找它是否使用獨立顏色。不要每遇到一處差異就新增調色盤項目，否則共用規則會逐漸失去意義。

中文字型與區塊內容保持一致

在 Customiser、Typography 設定 Base Font、各層標題及按鈕文字，並保留合適的備援字型。先以真正的繁體中文長段落檢查字級、行高和標點，避免只看展示站英文就決定全站文字配置。文章內文與選單需要分別測試。

官方目前以字母標示字型來源，例如 S 是系統字型、G 是遠端 Google Fonts，L 是透過本機 Google Fonts 擴充處理的字型。額外字型功能會有方案差異。只選到字型名稱不代表沒有外部請求，也不保證每個中文字元都包含。

頁面正文可以使用 WordPress 原生區塊；需要 Blocksy Theme Blocks 時，再確認 Companion 與相應功能依賴。主題提供區塊功能，不表示每個區塊在所有方案都可用。先完成標題、段落、圖片與連結，再加入真正有助於閱讀的文章列表或導覽。

桌面與手機頁首要分別配置

在自訂器的 Header 區域，使用拖放方式安排 Logo、Menu、Search 或 Button 等可用元素。先建立 WordPress 選單，再讓頁首元件使用正確選單。內容網站可以先保留主要分類、關於及搜尋，避免一開始就塞滿所有標籤和社群圖示。

手機頁首需要 Trigger 開啟 Off Canvas 區域，而區域內要放 Mobile Menu 等實際內容。只有漢堡圖示卻沒配置選單，訪客可能打開空白抽屜。切換手機預覽後，分別確認開啟按鈕、抽屜中的選單及關閉按鈕。

Mobile Menu 的 Select Menu 可指定顯示哪份選單；Interactive Collapse 決定子選單是否可展開收合。先測父項目連結與子選單切換是否容易分辨，再調整項目間距。桌面 Off Canvas 屬於 Pro 功能，不能把手機抽屜的可用性當成桌面也免費具備。

1. 在外觀選單建立並命名主要導航，確認每個網址與分類入口。
2. 在桌面 Header 放入識別與導覽元件，指定選單。
3. 切到手機配置 Trigger，再在 Off Canvas 加入 Mobile Menu 並選擇選單。
4. 用前台測試開啟、子選單、關閉及回到頁面，最後檢查搜尋與聯絡入口。

頁尾提供收尾資訊，不複製整個首頁

Footer Builder 同樣以拖放方式配置可用元素，並可在每一列調整欄位、間距及裝置配置。生活網站頁尾可放簡短介紹、聯絡方式、必要頁面連結和版權資訊。不要為了填滿三欄加入過期公告或沒有維護的分類清單。

Widget Area 可放入區塊式小工具，適合呈現簡單文字或連結；專用 Button、Contacts、Logo 等元素則可能受方案限制。看不到教學中的元素時，先核對功能標示和目前版本，不必立刻安裝另一套頁尾編輯器。

在手機把頁尾欄位改成合適的堆疊方式，檢查長信箱、網址及社群名稱是否溢出。必要的聯絡和政策連結應仍可取得，不要為了縮短頁面全部隱藏。若同時使用頁面編輯器的頁尾範本，先決定由哪一套工具負責，避免重複呈現。

發布前從訪客角度驗收

完整走過首頁、分類列表、文章內頁與搜尋結果，確認標題與圖片沒有示範資料。點開最長的分類名稱，檢查沒有特色圖片的文章，以及含表格和長連結的內文。這些邊界情境比只看首頁更容易發現容器或字型問題。

再用未登入瀏覽器與手機檢查選單、抽屜和頁尾，並以鍵盤操作主要入口。自訂器的預覽可能反映尚未發布的設定，完成後仍要確認已發布狀態與實際網址。遇到舊樣式先核對儲存和快取，再改動更多設定。

保存主題與 Companion 版本、啟用擴充及必要外掛清單，更新前做好備份。需要額外功能時，先描述訪客要完成的操作，再比較 Pro 或其他工具。沒有實測就不以官方速度形容詞作為網站成果，應以自己的頁面載入及操作結果評估。

WordPress 分類、標籤與選單規劃

WordPress 字型來源與自行託管

選擇 WordPress 主題前的檢查

• 教學
• 軟體與 App
• 架站與電商
• WordPress