最後更新時間：2026-01-01，由 Dean 更新 
WordPress 佈景主題有很多款值得推薦，而 Blocksy 是近幾年快速竄起的一款主題，由於輕量化、免費功能多且自訂度高，成為很多經營個人品牌、設計師和電商經營者的首選。
但在我過往的教學經驗中，許多剛開始學習 WordPress 的人，安裝 Blocksy 後，發現設定太多，反而不知道怎麼做。所以，在這篇文章，我會詳細解釋該如何設定 Blocksy，設計出你理想中的網頁。
Blocksy 是什麼？多功能 WP 佈景主題介紹
Blocksy 佈景主題是在 2019 年由設計師兼前端工程師 Sergiu Radu 和軟體開發工程師 Andrei Glingeanu 成立的 CreativeThemes 推出的，介面和性能都有不錯的表現。
Blocksy 優點
- 輕量化設計：Blocksy 採用模組化程式碼、延遲加載圖片等方式，優化不少網站速度。
- 免費功能多：免費版提供許多功能，有些甚至是付費主題才會有，如電商頁面設定、固定式頁首、匯入設定、表單樣式和擴充功能等。
- 高度自訂化：不管是頁首、頁尾、字體、顏色、頁面等都可做設定，專業版更支援自訂區塊，如果懂得程式設計，可做出更多變化。
- 頁首尾彈性：一般佈景主題頁首頁尾都只能全站使用同一個，要不同只能另外用頁面編輯器設定，但 Blocksy 可以針對不同頁面設定不同頁首頁尾。
- 有黑夜模式：網站可以一鍵設定黑白模式切換，讓讀者可以根據自己舒適度變換。
- 相容性較高：與多款頁面編輯器相容，像是 Elementor、Brizy 等。
Blocksy 缺點
- 預設模板少：Blocksy 官方提供的網站模板比較少，比起快速生成網站，它更適合拿來作客製化的設計。
- 區塊功能少：能在文章中插入的功能區塊較少，需要另外安裝區塊外掛或編輯器，就像是 Astra 需要安裝 Spectra 一樣。
- 學習曲線高：除了原先功能就很多外，Blocksy 許多設定要靠「邏輯條件」，對新手而言很容易在設定時混亂，導致花費更多時間。
- 繁中不完全：雖然編輯器的介面是繁體中文，但還是有一部分的項目沒有翻譯完全，有時候介面就會呈現中英混合的顯示。
- 電商不齊全：雖然有電商功能與模板，但在頁面佈局上不如 Astra，功能機制上也相對陽春，會有更好的電商佈景選擇。
如何安裝 Blocksy 佈景主題？
這段會帶你直接從 WordPress 後台安裝 Blocksy，當然你也可以到 Blocksy 官網下載主題檔案後安裝。
step 1
進入 WordPress 後台：
- 左選單點開「外觀」，選「佈景主題」。
- 跳轉頁面後，點上方的「安裝佈景主題」。
step 2
進入安裝佈景主題頁：
- 右上搜尋框輸入「Blocksy」，系統會自動搜尋。
- 找到後，在 Blocksy 佈景主題上點一下。
step 3
跳轉後，左上角點「安裝」，再點啟用。
step 4
等跳轉佈景主題頁，點上方按鈕，接著安裝「Blocksy Companion」官方擴充外掛。
step 5
等跳轉到 Blocksy 的首頁，就代表成功安裝了。
接下來，在左邊選單點「外觀 > 自訂」，按編輯器的順序一一設定。
Blocksy 免費版有哪些功能？
Blocksy 免費版從版面配置、文章版面、頁首、頁尾、色彩、資訊欄，到延遲載入圖片的優化功能都有提供。
下圖是編輯器介面，左邊是功能選項，右邊是即時顯示效果的畫面。
如果你習慣用暗黑模式編輯網頁，Blocksy 也有提供，點左下角的月亮小圖示就會切換。
要注意，不管使用哪種 WordPress 佈景主題，都「無法用滑鼠拖曳」，只有部分的佈景主題在「頁首 / 頁尾」提供元件拖曳的介面。所以，接下來都是在左邊設定，並在右邊查看效果。
Blocksy 將設定項目分為「一般選項」、「內容類型」和「核心」3 類：
1. 一般選項
設定整個網站的寬度、整體版面、選單、資訊欄、色彩 & 字體等。
| 設定項目 | 子項目 | 說明 |
|---|---|---|
| 一般 | ．版面配置 ．按鈕 ．導覽標記 (麵包屑) ．表單元素 ．條目內容 (項目清單) ．社交網路服務帳號 ．訪客互動 ．返回頂端 (僅開關) ．網站外框 (僅開關) ．管理選項 (匯入 / 匯出) | 全域設定，統一管理網站的寬度、排版、色彩、導覽標記、按鈕、清單 & 表單、社群帳號、SEO 設定、優化效果和匯入 (匯出) 設定等。 |
| 頁首 | ．頁首選單元件編輯 ．頁首外觀及樣式 ．開 / 關透明頁首 ．開 / 關固定頁首 | 設定上方網站選單的樣式、顯示元件、裝置與位置。 |
| 頁尾 | ．頁尾選單元件編輯 ．版權聲明 ．頁尾外觀及樣式 | 設定網站最下方區域的樣式、顯示元件和版權聲明。 |
| 資訊欄 | ．資訊欄排版 ．資訊欄樣式 | 調整網站側邊欄的版面配置、區塊間距、顯示位置、小工具字型與文字色彩。 |
| 色彩 | ．全域調色盤 ．全域色彩 (標題 / 文字 / 網站背景) | 管理整個網站要使用哪些顏色，直接在這邊填入色碼，之後可在 WordPress 編輯器上使用。 |
| 排版樣式 | ．基本字型字體設定 ．其他字體設定 | 管理整個網站的標題、文字 (包括引用、小工具標題、按鈕與圖片說明等) 要使用哪些字體與字體的粗細、行高、大小、間距。 |
| 性能 | 開 / 關延遲載入項目 | 自動開啟延遲載入會影響網站效能的項目，如 emoji 腳本、文章精選圖片。 |
*透明頁首 & 固定頁首控制項需安裝 Blocksy Companion 外掛才會出現。
2. 內容類型
文章 & 頁面的外觀設定。
| 設定項目 | 子項目 | 說明 |
|---|---|---|
| 網誌文章 | ．網誌文章 (部落格) ．單篇文章 ．分類彙整 | 文章列表 & 彙整頁面的版面配置、文章數量、標題區域設定、文章顯示元素；單篇文章版面與顯示元素。 |
| 頁面 | ．作者頁面 ．搜尋頁面 | 文章列表的版面配置、頁面顯示元素、背景色。 |
3. 核心
WordPress 網站的預設功能 (不管使用哪個佈景主題都需要做的設定)。
| 設定項目 | 子項目 | 說明 |
|---|---|---|
| 網站識別 | ．網站標題 ．網站說明 ．網站圖示 | 網站最上方會出現的網站標題和說明 (文字)，以及上傳瀏覽器使用的小 LOGO 圖示。 |
| 選單 | 網站導覽列選單 | 管理選單出現的項目、顯示裝置及顯示位置，或新增 / 刪除選單。 |
| 小工具 | 特定區塊編輯 | 沒開放設定，要到 WordPress 後台的「外觀 > 小工具」做設定。 |
| 首頁設定 | 選擇首頁類型 | 設定網站首頁顯示的內容是文章列表還是另設計的首頁。 |
| 附加的 CSS | 自訂 CSS 程式碼 | 用程式碼自訂網站的外觀、版面和其他項目，但建議安裝外掛來管理。 |
Blocksy 教學：13 個網站必備設定
接下來，我們按照編輯器順序一一修改。
開始之前，提醒你，改完設定後，記得要在左上方按「發佈」才會儲存。
一般
介紹「一般」的 10 種功能如何設定：
這頁的「版面配置」是設定網站內容的邊界，也就是 CSS 的 margin 設定，確保網站的內容不會太靠近螢幕邊緣而不好閱讀。
主要設定項目如下 (參考上圖)：
- 最大網站寬度：網站內容 + 網站背景的寬度。
- 內容區域間距：內容和頁首 / 頁尾的距離。
- 內容邊緣間隔：網站內容和螢幕邊緣的距離。
- 窄版容器最大寬度：在頁面 / 文章設為窄版才會開啟這裡的數據。
- 寬版對齊偏移：在頁面 / 文章設為寬版時，偏移的區塊和螢幕邊緣的最小距離。
Blocksy 免費版可設定「一種」按鈕樣式：
- 最小高度：配合字體大小做調整。
- 字型色彩：按鈕文字的顏色，左邊是一般顯示，右邊是滑鼠移到按鈕上的顏色。
- 背景色彩：按鈕底色或按鈕框線的顏色，樣式在後面「頁首」設定。
- 框線：有 1 種實線和 2 種虛線樣式，通常會設定實線。
- 邊框間距：按鈕和其他元件的距離。
- 框線圓角半徑：數值越大，按鈕圓角的部分越圓。
「導覽標記」就是麵包屑 (Breadcrumbs)，通常以「首頁 / 分類 / 文章標題」的形式出現，能讓網站結構清晰，有利於優化 SEO。
- 導覽標記來源：如果安裝了 SEO 外掛（如 Rank Math 或 Yoast），在這邊點開選擇，以避免重複設定導致衝突；若沒安裝，才使用「預設」選項 (有選「預設」才要設定下面的項目)。
- 分隔符號圖示：分隔麵包屑路徑的符號，選自己喜歡的即可。
- 首頁項目：選圖示或文字。
- 首頁文字：如果前一點選「文字」，可自行修改，通常是「首頁」或「HOME」。
- 以下 3 項都建議開啟：
- 單篇頁面 / 文章標題：在「頁面或文章」的麵包屑是否顯示標題。
- 單篇頁面 / 文章分類法標題：在「頁面或文章」的麵包屑是否顯示分類。
- 彙整分類法標題：在「分類彙整頁面」的麵包屑是否顯示分類。
導覽標記說明
- 如果想改導覽標記的文字字體和顏色，上方按「設計」修改。
- 要點進單篇頁面和分類頁面的文章標題區域，並開啟顯示導覽標記，這邊的設定才會出現 (參考「內容-單篇文章」&「內容-分類文章」的設定)。
「表單元素」就是表單的設定，如果網站上有要放表單，需要在這設定。
有分「一般」和「設計」：
- 一般：
- 兩種表單樣式可選擇。
- 表單欄位：可調整欄位高度、框線尺寸等。
- 設計：
- 字型：可更改表單文字的字體、粗細和大小。
- 顏色：可更改文字、框線和按鈕的顏色。
「條目內容」指的是文字段落，有 2 個項目可設定：
- 內容間距：參考下圖的箭頭處，有緊湊、舒適、寬敞等 3 個選項。
- 連結型式：設定連結文字的底線如何出現，有 5 個選項，選喜歡的即可。
這部分要填寫社群平台的帳號網址，當你在「頁首 / 頁尾編輯器」加入社交網路服務帳號的元件，就不需要再另外設定這些平台的連結，會直接帶入。
Blocksy 提供 50 多個社交平台設定，台灣用戶較常用的平台有：Discord、Facebook、GitHub、Instagram、Threads、Line、YouTube 等，還可設定電話號碼和電子郵件。
「訪客互動」指的是可整合 GA4 和 FB、推特等社群平台，以下簡單介紹：
「返回頂端」是一個網頁往下滑時會出現的按鈕，按一下，可以馬上回到網頁最上方。
在「一般」裡開啟「返回頂端」，就會在頁面上看到一個有箭頭的按鈕。
在「返回頂端」控制項上點一下，可以修改其他設定：
付費版的 Blocksy 可以自訂按鈕的樣式，是其他佈景主題較少見的功能。
「網站外框」是幫整個網站加上外框，有一點強調的效果，如下圖：
「管理選項」有「匯入 / 匯出網站自訂項的功能」，還可以重置所有設定：
頁首
「頁首」指的是網頁最上方的導覽列選單，通常會有「首頁、關於我、文章、產品」等連結。
「頁首編輯器」一般是由左邊的元件區、右上的即時顯示視窗和右下的編輯區組成。只要拖曳左邊的元件到右下的編輯區，右上的視窗就會即時顯示。
分別介紹各區：
- 元件區 (翻譯成元素)：有選單、標誌、搜尋、社交網路服務、按鈕、HTML 等元件。
- 編輯區：分成上中下 3 列，每列又分為左中右 3 區，這代表的是不同的頁首位置。可直接刪除原先的元件，或從左邊拖曳元件過來新增。
- 每一列點一下，就會出現一個藍色框，點擊小設定圖示，可修改列高和背景色。
- 可切換成桌面版頁首 / 平板或行動版頁首。
接下來一一介紹頁首常用元件。
「選單」是「頁首」最重要的元件，要盡量把重要的大分類和頁面連結放在這裡，讓讀者方便查找內容。
step 1
在「頁首」左邊元件區點進「選單 1」，最上面點「選單位置」。
step 2
會跳出新分頁，編輯選單內容：
- 新增選單項目：把需要的頁面、文章、連結或文章的分類加進選單。
- 選單結構：用滑鼠拖曳，調整上下層位置 (把項目拖曳進項目中，會變成子選單)。
- 選單設定：設定這份選單要出現的位置。
- 最後按「儲存選單」。
step 3
接下來切回 Blocksy 編輯器：
- 選擇停留頁面的樣式，讓讀者更清楚自己的所處頁面。
- 「項目間距」和「項目內間距」擇一調整，並調整項目高度。
- 切換「設計」介面，點開字型，修改字型的大小和粗細。
- 修改選單連結項目和所在頁面游標顯示的顏色。
「標誌」就是頁首左側的 LOGO 圖片或標題，而 LOGO 圖片或標題下面略小的字，就叫「網站說明」。
在 Blocksy 中，只能選擇放「標誌」或「網站標題 (文字)」，但兩者可同時和網站說明一起出現。看你覺得怎樣放最順眼，像我自己的網站就只有放「標誌」圖。
先示範只有放「標誌」的例子。
從「頁首元件區」點入「標誌」後：
- 標誌圖片：點擊框框，上傳 LOGO 圖片，長方形或圓形都可以。
- 標誌高度：指的是這裡可以拉下面的拉把調整大小，記得切換裝置看看效果。
- 網站標題：開啟網站標題後，標誌圖片就會消失，只會出現網站標題。
如果是想要「標誌 + 網站說明」的話，開啟「網站說明」後，填入網站說明，再調整裝置可見度，就完成了。
「社交網路服務」是讓你在頁首放社群連結的設定。
在「頁首元件區」點進「社交網路服務」，有 4 項設定必須修改：
- 新增與編輯元件：點開選單選擇要顯示的社群平台，再按 + 號。下面已在列表中的社群平台，可選擇隱藏或刪除 (連結已經在「一般」填寫過)。
- 在新分頁中開啟連結：點社群平台圖示後，會另開新分頁，建議開啟。
- 設定連結為 nofollow：nofollow 是一種 HTML 屬性，告訴搜尋引擎不要將該連結計入目標頁面的權重，避免把自己網站權重轉移到社群平台上，建議開啟。
- 標籤可見度：標籤是社群平台的名稱，比如 Facebook。
做好之後，別忘記把「社交網路服務」拖曳到右邊編輯區。
搜尋功能可幫助使用者更快速找到內容，建議新增到頁首。
在「頁首元件區」點進「搜尋」：
- 圖示尺寸：調整搜尋功能的圖示大小，旁邊有裝置可切換看效果。
- 圖示 & 標籤可見性：標籤就是會顯示「搜尋」兩個字，有點醜，建議使用圖示就好。
- 搜尋結果：這邊要設定搜尋時的效果。
- 預留文字：一開始出現在搜尋框裡的文字。
- 即時結果：輸入文字時，系統會自動搜尋，不需按鍵確認。
- 即時搜尋結果圖片：自動搜尋的結果會加上精選圖片 (但會吃效能，使用共享主機建議別開)。
- 用條件搜尋：如果文章或頁面不想被搜尋，這裡要取消勾選。
做好之後，一樣記得把「社交網路服務」拖曳到右邊編輯區。
如果你有個很重要的行動呼籲，比如「聯絡我、預約服務」等，會建議在頁首放按鈕。
在「頁首元件區」點「按鈕」：
- 標籤文字：按鈕上的文字。
- 連結 / 網址：按鈕點下去會進入的網址。
- 按鈕設定說明：
- 在新分頁中開啟：建議開啟，不干擾原本的頁面瀏覽。
- 把連結 rel 屬性設定成 nofollow：如果會連到相關性低的網站，建議開啟。
觸發器指的是平板和手機右上角會出現的選單圖示，Blocksy 可以稍微調整樣式：
- 右下編輯區切換到「平板/行動版頁首」。
- 左邊元件區點進「觸發器」。
按照喜好修改樣式、圖示尺寸和顏色。
「固定式頁首」在 Blocksy 裡叫做「吸附功能性」，可按以下流程開啟與設定：
- 進入「頁首編輯器」，左邊設定區上方切換成「頁首」。
- 點開「整體頁首」 。
- 開啟「吸附功能性」控制項。
- 點「吸附功能性」進入設定。
固定式頁首主要設定項目：
- 選擇吸附列：有單列、兩列或所有列。
- 效果：指的是動畫效果，有預設、下滑、淡出、自動隱藏/顯示。
- 偏移：是頁首和螢幕上方的邊距，一般為 0，建議按切換裝置調整。
- 啟用於：選擇在電腦或手機啟用。
頁尾
「頁尾」就是在網站頁面最底部的區域，通常會有選單、社群帳號、隱私權政策和著作權聲明。最需要放置的，是隱私權政策和著作權聲明。
在 Blocksy 的頁尾編輯器，會預設一個著作權聲明：
在左邊元件區點進「版權」做修改，免費版可把「使用 Blocksy 主題」的訊息刪除。
另外，如果想要改版權文字顏色，需要在頁籤點擊「設計」進入修改。
但如果想要改頁尾背景顏色，就會需要在頁尾的最上一層，上方頁籤點「頁尾 > 整體頁尾」做修改。
資訊欄
「資訊欄」就是頁面的側邊攔，Blocksy 能針對版型、寬度、外間距、內間距、裝置可見度和行動版位置等，依喜好調整。
修改之前，要注意選擇有側邊欄的版面，才會出現資訊欄。
要注意的是，以上調整僅限外觀，側邊欄要放什麼內容，則需要在 WordPress 後台的「外觀 > 小工具」編輯。
色彩
Blocksy 的「色彩」可統一管理網站使用的顏色：
- 整體色彩調色盤：在 WordPress 編輯器中點開色彩時，能直接選取這邊設好的顏色，不用每次都要再填色碼，非常方便。
- 全域色彩：指定特定項目的顏色，如文字、連結、框線和標題。
- H1~H6 標題：網站所有標題可統一指定一種顏色，或個別指定顏色。
- 網站背景：設定網站內容外的網站背景，範圍可參考「一般 > 版面配置」段落中的「最大網站寬度」。
排版樣式
「排版樣式」管理整個網站使用的字型，包括基本字型、標題 H1~H6、按鈕、引述和圖片說明等。
搜尋並安裝想要的字體：
- 選擇要修改的字型，點開欄位中的「…」。
- 再點一次「系統預設」的欄位。
- 選擇下方選單的字體，或在欄位輸入要找的字體名稱。
性能
「性能」是 Blocksy 的特色，會把所有可能延遲載入的圖片和 Emoji 腳本壓縮成一個檔案，讓瀏覽器下載，以便快取，加快瀏覽速度。
動態 CSS 輸出 (「檔案」或「內嵌」擇一)：
- 檔案 (預設)：壓縮成一個 CSS 檔案讓瀏覽器下載後快取。
- 內嵌：把這些 CSS 程式碼都嵌入頁面，每次頁面加載時都會重新生成和加載這些 CSS。
通常會選擇「檔案」，並且選擇：
- 停用 Emojis 腳本
- 延遲載入圖片 (精選圖片都勾選起來)
內容
接下來是文章與頁面的外觀設定：
「網誌」是在點選「所有文章」時會出現的文章列表，如果網站首頁設定成「最新文章」，也會出現在首頁。
設定文章列表外觀 (必設定的項目)：
- 版型：依喜好設定。
- 卡片選項：指定文章區塊顯示的項目與外觀，要點開做細部設定 (後面有寫)。
- 內容區域垂直間距：內容區域前後如果想要有間隔，在此設定。
- 分頁導覽：建議開啟，當文章數量多時，會自動分頁。可選擇「分頁形式」或「無限滾動」效果 (無限滾動指的是一開始隱藏分頁內容，但往下滑動時會自動出現)。
「卡片選項」有幾個建議的設定：
- 文章中繼資料：開啟更新日期、分類法、作者。
- 標題：點開可選擇其他標題格式、間距等。
- 精選圖片：點開可設定更細的外觀項目。
- 內容摘要：點開可修改長度和間距。
- [閱讀全文]按鈕：點開可修改按鈕文字、樣式等。
每一篇文章要顯示的內容，在「單篇文章」設定：
- 文章結構：選擇合適的版型、樣式和間距樣式。
- 文章元素：常開啟的功能有「作者框」與「分享框」。
- 頁面元素：常會開啟的功能有「相關文章」與「留言」。
其中，「相關文章」有幾個必設定項目：
- 分欄 & 文章：設定欄位數量和文章數量。
- 關聯條件：設定系統從哪邊選取文章。如果有設定標籤，會建議使用標籤。
- 排序依：有預設、最近的、隨機和最多留言可選，我習慣設定隨機。
- 模組標題：相關文章的標題，預設標題是「相關文章」。
- 模組標題標籤：模組標題的格式可設為 H1~H6、p 或 span，我習慣設定 H2。
- 資訊卡元素：3 項都開啟，並點進文章中繼資料修改日期格式。
- 模組位置：
- 分開的：跟單篇文章的內容分開，使用最大網站寬度。
- 內含：包在單篇文章內容裡，使用文章內容寬度。
「分類文章」設定的是分類彙整頁面的外觀 。
大多設定與前面的「網誌」統一，其他部分：
- 點開「卡片選項」。
- 資訊卡元素：開啟文章中繼資料、標題、精選圖片、按鈕等。
- 點進文章中繼資料：開啟作者、更新日期。
單篇頁面
「頁面」是指「關於我、聯絡我們、品牌故事」這類較少變動的頁面。
- 頁面標題：如果有另外做設計，可不開啟；若開啟，要點進去做版面設定。
- 頁面元素：會建議先不開啟，除非有確定會用到。
作者頁面
是單一作者的彙整頁面，如果網站中只有一名作者，這裡不用設定。
以下是建議要設定的項目：
- 頁面標題；設定標題樣式，建議的顯示「名稱及頭像、作者中繼資料 (勾選文章)」。
- 版面配置：如無特定的設計，選擇與網誌、分類相同的版面即可。
- 卡片選項：設定文章欄位的樣式，建議開啟「文章中繼資料、標題、精選圖片、內容摘要、[閱讀全文]按鈕」。
搜尋頁面
「搜尋頁面」設定在網站上用「關鍵字」搜尋後，出現的彙整頁面外觀。
建議設定下列 3 項：
- 頁面標題：設定標題樣式，僅選擇顯示「標題」即可。
- 版面配置：和網誌、分類相同的版面，統一網站的視覺設計。
- 卡片選項：設定文章欄位的樣式，參考「作者頁面」做設定即可。
網站識別
「網站識別」是設定出現在瀏覽器左上角的網站小圖示，建議上傳的圖片至少要有 512*512 像素。
進入「網站識別」，點開「選取網站圖示」上傳圖片，可以即時看到效果。
首頁設定
「首頁設定」是設定網站首頁，可選一個單獨的頁面或抓取最新的文章。
- 若想用一個單獨的頁面，而不是只有文章的話，就選「靜態頁面」。
- 如果想像部落格那樣有文章列表，就選「最新文章」。
3 種 Blocksy Companion 免費擴充功能介紹
Blocksy 官方有推薦一個外掛，叫做「Blocksy Companion」，只要到安裝外掛頁搜尋 Blocksy Companion，安裝並啟用就可以了。
如果沒有安裝這個外掛，無法啟用「固定式頁首」、引用動態數據、啟用麵包屑 (導覽標記) 及多種動畫效果等等，等於 Blocksy 佈景主題有不少重要功能靠這個外掛擴充。
除此之外，這個外掛還附贈 3 個免費功能，分別是 Cookies 同意視窗、單一產品評論和熱門文章：
| 功能 | 作用 | 適合情境或對象 |
|---|---|---|
| Cookies 同意視窗 | 設定後，每當有人進站，就會在網站下方彈出一個通知視窗，說明這個網站使用了 Cookies，瀏覽者可以選擇「接受」或「拒絕」。 | 如果你的網站有歐盟使用者 (GDPR)，會建議使用這個功能。 |
| 單一產品評論 | 搭配 Blocksy 佈景主題，為單一商品頁設定評論區的版面和設計，統一整體佈局，提升對品牌的信任感。 | 有安裝 Woocommerce 的電商網站。 |
| 熱門文章 (譯成趨勢文章) | 設定後，可在編輯頁面或側邊欄時插入一個小工具區塊，自動顯示熱門文章，還可設定時間範圍。 | 個人網站或內容型網站，以增加網站的留存率。 |
要先到 WordPress 後台的 Blocksy 首頁開啟這些功能，才能在編輯器設定：
- 左側點開「Blocksy」。
- 在 Blocksy 設定首頁，點「擴充功能」頁籤。
- 點選要開啟的項目。
- 開啟該項目。
單一產品評論
在設定這項功能之前，WordPress 網站要先啟用 Woocommerce 商店功能。
step 1
先確認 Woocommerce 有開啟商品評論設定：
- 進入「Woocommerce > 設定」。
- 勾選「啟用商品評論」。
- 儲存設定。
step 2
在 Blocksy 編輯器，調整「商品評論頁」和「單一商品評論頁」的排版與相關設定。
1. 商品評論頁：
2. 單一商品評論頁：
套用的效果：
Cookies 同意視窗
在 Blocksy 編輯器的「擴充功能」下點「Cookies 同意書」，有 4 項必改：
- 選一種形式：左邊是跳出左下小視窗，右邊則是從頁尾跳出橫幅視窗。
- Cookie 期間：同意後可維持多久，一般選「永久」。
- 視窗內容：照著你的品牌口吻，修改一下文字。
表單 Cookies 同意書：修改一下文字，並另外編輯一份隱私權政策放入連結。
最後成果如下圖：
熱門文章 (趨勢文章)
在 Blocksy 編輯器的「擴充功能」下點「趨勢文章」。
更改「標題」和「時間範圍 (趨勢來自)」，其他則依偏好設定。
具體效果如下圖，會在頁尾的上方。
Blocksy VS. Blocksy Pro
Blocksy 免費版適用於個人部落格、形象網站和小型電商網站等多數網站；如果需要架設會員網站、中大型電商，因架構較複雜，又需要行銷功能，專業版有更多相關設定，更容易做出你要的效果。
| 比較項目 | Blocksy | Blocksy Pro |
|---|---|---|
| 文章列表版面 | 可選 3 種版面。 | ．可多選 2 種瀑布流版面。 ．有無限滾動效果。 ．可加入自訂內容區塊。 ．可加文章篩選器、閱讀進度條、動態數據、分類標籤等。 |
| 頁首 / 頁尾 | ．可加選單、按鈕、社交圖示、小工具等 5 種元件。 | ．可加入自訂內容區塊、進階選單、登入功能、搜尋框等功能。 ．有明亮 / 暗黑切換模式。 |
| 電商功能 | ．單一商品頁。 ．彙整商品頁。 | ．快速檢視商品、願望清單、側邊購物車、進階評論區、等候名單等。 ．自訂結帳頁、自訂分頁。 ．商品篩選器。 |
| 動畫效果 | 無 | 有無限滾動、淡入淡出等。 |
| 跳出視窗 | 無 | 可設條件觸發、限定時間或日期的跳出視窗。 |
| 字體 | 可串 Google 字型。 | ．可串 Adobe、Google 字型。 ．本機預載 Google 字型。 |
| 側邊欄 | 顯示 / 關閉側邊欄。 | ．依特定條件顯示的側邊欄組合。 |
| 捷徑列 | 無 | 固定在頁尾的捷徑列。 |
| 適用網站 | ．個人部落格 ．形象網站 ．部落格 ．小型電商網站 (需搭配相關外掛) | ．作品集 ．預約服務網站 (需搭配相關外掛) ．電商網站 (需搭配相關外掛) ．會員網站 (需搭配相關外掛) ．課程網站 (需搭配相關外掛) |
| 年訂閱 (USD) | 免費 | 69 元 (一個網站) |
5 種 Blocksy Pro 常用的進階設定
以下介紹 Blocksy Pro 較常用到的設定：
- 文章篩選條件
- 本機 Google 字型
- 進階選單
- 內容區塊 (跳出視窗)
- 切換暗黑模式
當你購買並啟動 Pro 後，要在 Blocksy 控制台的擴充功能開啟等等要設定的功能。以「文章篩選功能」為例，先進入「內容類型額外功能」頁面開啟主功能，並開啟「文章篩選條件」。其他相關功能，也都是在這個頁面開啟。
文章篩選條件
「文章篩選條件」可在文章頁面上加分類或標籤供讀者篩選，在查找文章時較方便。
設定方式也很簡單，先進入「網誌文章」設定介面，拉到最下方的「功能性選項」，開啟「文章篩選條件」控制項後，點進設定。
「文章篩選條件」的設定有 3 項特別說明：
- Filter Behavior：選 Instant Reload，讓使用者點了篩選器後，會馬上重新加載。
- Filter Source：標籤的來源，比較常會設定成「分類」。
- Items Counter：開啟的話，會在標籤旁邊加註文章數目，看起來比較清楚。
本機 Google 字型
如果透過外部連結的方式載入 Google 字型，每次請求都需要進行 DNS 查詢、建立通訊連線，以及進行 TLS 加密協商，這可能會影響網頁載入速度。
因此，若主機空間允許，建議直接將 Google 字型下載並安裝在本機，以提升載入效能。
不過，手動安裝較不易，這時就可利用 Blocksy Pro 本機 Google 字型的功能。
step 1
從 WordPress 後台進入 Blocksy 控制台：
- 到「專業版擴充功能」點「本機 Google 字型」。
- 確認開啟控制項。
- 下方選單點開，搜尋自己要的字體。
- 選取字體後，右邊按「Download Font」。
step 2
- 成功下載後，在字體旁按下設定圖示。
- 等跳出視窗，選擇「預載」，點選常用的「字重」並選「繁體中文」
- 最後按「儲存設定」，就完成了。
*建議預載 1~2 種字體，每種字體預載 3~5 種字重，避免佔用太多主機資源。
進階選單
「進階選單」指的是可自訂多欄位的下拉選單，還能在選單項目上加 Icon，讓選單看起來更專業。
step 1
先確認有開啟這項功能後：
- 點開「外觀 > 選單」。
- 打開要設定的主選單項目，點「Mega Item Settings」設定進階選單。
step 2
在跳出的視窗上，設定子選單的欄位及主選單的文字標籤：
- 開啟進階選單，才會有相關設定。
- 設定欄位數與樣式。
- 開啟徽章設定，並設定徽章上的文字。
- 儲存設定。
step 3
接著，設定子項目的圖示：
- 點開要設定的子項目，點「Mega Item Settings」。
- 在跳出的視窗上設定 icon (可搜尋或上傳)。
- 儲存設定。
其他子項目也按這個步驟設定，就完成了。
如果需要更改字型大小、顏色等，回 Blocksy 編輯器的「頁首」點開「選單」，在「下拉選項」中調整。
內容區塊
內容區塊是指包含文字與圖片的自訂區塊，可在指定的時間範圍，於指定的頁面出現，形式上可設為促銷橫幅或彈出視窗，增加與讀者的互動。
step 1
到 WordPress 後台：
- Blocksy 下點選「Content Blocks」。
- 點「Add New Content Blocks」。
step 2
跳出視窗後：
- 選擇要哪一種內容視窗，我選「Poppup」。
- 填入視窗的名稱。
- 按「Create Content Block」儲存。
step 3
等跳轉到內容編輯頁：
- 在左邊編輯區編輯需要的內容。
- 右上角點開 Blocksy 小圖示。
- 出現設定視窗：設定顯示條件 (如顯示頁面、日期、時間等)、Trigger Condition (觸發條件，如滾動網頁、點擊元件、離開頁面等)、尺寸、動畫效果、頁面位置等。
- 最後右上角按儲存。
到網站測試，確認跳出的視窗都正確就完成了。
切換暗黑模式
「暗黑模式」是指整個網站都變成黑色背景，文字也會配合使用者選擇的模式變換，可以讓瀏覽網站的體驗更好，尤其如果你網站文字通常很多，黑背景能讓視覺比較舒服。
在專業模式中，頁首提供可切換至暗黑模式的功能元件，只要把元件拖曳到想顯示的位置，並到「色彩」調整一下顏色就完成了。
step 1
在 Blocksy 控制台開啟功能後：
在編輯器的「頁首」，左側元件找到「Color Switch」，並拖曳到右側編輯區上。
step 2
左側元件區點進「Color Switch」做設定。
step 3
回上層，到「色彩」，針對「暗黑模式調色盤」和「標題」調整顏色，因為常常顏色切換後，標題就會被背景色吃掉，因此建議標題要調整為在明亮和暗黑模式下都清楚的顏色。
其他 Blocksy 相關問題
Blocksy 有 SEO 優化的功能嗎？
有相關功能，主要是以下幾項：
．快速載入：輕量化設計和優化的程式碼結構，有助於提升網站性能和搜尋引擎排名。
．響應式設計：適配各種設備，滿足 Google 的行動優先索引要求。
．HTML 結構優化：如標題標籤、中繼資料等，讓搜尋引擎更容易理解內容。
．直接串接 GA，開啟知識圖譜和設定 Schema 頁面標籤。
．可整合 SEO 外掛：支援 Yoast SEO 和 Rank Math 等 SEO 外掛。
Blocksy 適合哪種類型的網站？
Blocksy 會影響網站速度嗎？
不會，因為 Blocksy 的檔案很小 (48KB)，並且有延遲載入圖片的設定。
但網站若用過多的外掛或尺寸太大的圖片，還是可能會拖慢速度。
另外，如果透過外部連結的方式載入 Google 字型，也可能會導致載入速度變慢。
如何聯絡 Blocksy 客服？
Blocksy 團隊提供下列 3 種支援管道：
．填寫工單 (建議)：你可以到 Blocksy 官方網站填寫工單，技術人員通常會在 24 小時內回覆。
．電子郵件：在郵件中描述你的問題，直接寄到 [email protected]。
．電話 (美國和加拿大)：1-877-693-4822。
