Blocksy – 使用超輕量佈景主題編輯器快速建立網站 (2024 更新版)

Google 修改了演算法，將網頁索引、排序的重點放在訪客的體驗上，其中也包含網頁的載入速度，特別是行動版裝置的網站體驗與速度上。

也因此最近幾年 WordPress 佈景主題、外掛社群間逐漸將重點轉向了輕量、不帶冗餘 CSS、JS 代碼的風潮，網站的訪客也終於可以輕鬆的閱讀不需要等待數十秒才開啟的網頁了。(當然，人性的心理實際上也是耐不住等候十多秒才開的網頁的)

Cloudways 整理了「最佳 WordPress 佈景主題」中「最輕量」的清單中就有提到了 Blocksy。

Blocksy is a blazing fast theme that’s also lightweight thanks to its use of the latest web technologies.

The Best Lightweight Themes for WordPress

Blocksy 是這幾年快速崛起、頗受網頁設計社群青睞的超輕量佈景主題編輯器，除了彈性、美觀的 UI、UX 設計之外，Blocksy 還提供了 34 種不同主題的入門網站 (Starter Sites) 範本 (陸續增加中) 讓大家可以快速建立網站。

Blocksy 佈景主題編輯器

Blocksy 目前提供的網站主題範本有：

可以到官網看看這些 Starter Sites 範本的實際樣貌，做為網站設計的參考唷。

在這篇文章中我們將會跟大家介紹 Blocksy 免費版與 Pro 付費版的相關功能，讓我們從安裝佈景主題與外掛開始！

安裝 Blocksy 佈景主題

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

並點擊「安裝」。

安裝 Blocksy Companion 外掛

如果需要使用到要購買 Blocksy Pro 才會有的 Pro Extensions 功能 (例如購物車)，可以在 Blocksy 官網直接登入帳號下載最新版的 Blocksy Companion。

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

如果想先用免費版體驗看看，可以到外掛 > 安裝外掛搜尋 Blocksy Companion。

並點擊「立即安裝」。

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

從 WordPress 的後台找到 Blocksy 的功能選單，可以發現有 3 個選項：

• Dashboard
• Content Blocks
• Account

功能選單 – Dashboard

首頁

對佈景主題編輯器來說，一般都是透過 WordPress 後台 > 「外觀」>「自訂」進入編輯模式。

Blocksy 在功能選單中也提供了捷徑，方便使用者能夠直接前往編輯以下功能：

• 色彩選項 – 佈景主題預設色彩
• 頁首選項
• 網誌選項
• 頁面選項
• 資訊欄 (側邊欄) 選項
• 頁尾選項
• 文章頁面選項
• 字體排版選項

同時也提供了各種取得學習資源的連結，例如，臉書的官方社團、教學影片、功能說明文件等。

如果遇到問題，就點擊 Support 下方的 Submit a Ticket 按鈕，直接詢問官方客服，或前往 Blocksy 的官方臉書社團詢問問題。(需要使用英文)

當然，也歡迎加入我們的中文社團一起討論。

入門網站 Starter Sites

入門網站 (Starter Sites) 頁籤下就是前面提到的 33 種不同類型網站的範本了，方便使用者預覽網站的設計與編排，並且提供安裝精靈可以按照步驟快速安裝範本。

可以到官網看看這些 Starter Sites 範本的實際樣貌，做為網站設計的參考唷。

擴充功能 Extensions

免費版擴充功能

免費版的 Blocksy 就已經提供了相當實用的功能，從歐盟國家重視的隱私權政策、訂閱電子報、商品評價到熱門話題文章功能等。

• Cookies Consent (隱私權政策)
  如果網站的客層來自於歐盟國家，需要清楚告知隱私權政策並取得訪客關於 Cookies 存取的同意。

• Newsletter Subscribe (訂閱電子報)
  可在小工具區塊或文章中插入「訂閱電子報」的表單，方便網站累積訂閱戶。
• Product Reviews (商品評價)
  提供商品評價的文章類型，方便聯盟行銷經營者可以建立商品評價、加入推薦連結。

• Trending Posts (熱門話題文章)
  可以基於特定條件顯示熱門話題文章或商品，例如：指定時間內的留言或商品評價的次數。

專業版擴充功能

而專業付費版的功能則是更為豐富，讓使用者可以自訂字型、使用 Adobe 字型、自訂程式碼片段、本地託管 Google 字型、進階選單功能、自訂文章類型、懸浮捷徑選單、自訂側邊欄、White Label 以及 WooCommerce 的增強功能等。

• Shop Extra
  Blocksy 提供了與 WooCommerce 相當好的整合，在 Pro 版本中更有「快速檢視商品」、「願望清單」、「懸浮購物車 Floating Cart」、「側邊滑出商品篩選器」等實用功能。
• Post Type Extra
  可透過 ACF、MetaBox、Toolset 等外掛新增自訂欄位製作新的文章類型，以及顯示閱讀進度條等功能。
• Local Google Fonts / Custom Fonts
  Blocksy Pro 提供可以上傳使用自訂字型並且本地託管 Google 字型的功能。一般來說，如果想要本地託管字型是需要安裝額外外掛的，可以參考以下文章。

文章回顧 – 「無痛架站 – Self-Host Google Fonts 提升網頁速度，改善 Google Core Web Vitals 分數」。

• Adobe Fonts
  在網站與頁面編輯器中使用你最喜歡的 Adobe 字型。
• Advanced Menu
  想要建立強大的 Mega Menu 嗎？Pro 專業版可以讓使用者在選單選項中加入圖示，或是插入 Blocksy 的內容區塊 (Content Blocks)。可以參考我們網站的選單唷！

教學文章 – 「Blocksy 教學 – 3 個步驟做出超輕量 WordPress 超級選單 Mega Menu」。

• Color Mode Switch
  深色/夜間模式，讓訪客可以在低光源、光源不充足的地方時，也能舒適的瀏覽網站。Blocksy 將這個功能內建，從此之後不需要為此安裝第三方外掛了。
• Custom Code Snippets
  參考佈景主題編輯器提供的範本或其他人的網站是架設網站的第一步，為了讓網站上的功能更豐富、設計、樣式更靈活，我們就會需要額外加入 CSS、JS、PHP 等程式碼片段了。Blocksy 提供無需安裝額外外掛的選擇，方便使用者添加程式碼片段。
  當然，對於架設網站的老手們會推薦更為強大的 Code Snippet 外掛，例如：WPCodeBox，可以直接從雲端同步、下載需要的程式碼，並且自訂執行程式碼的條件。
• Multiple Sidebars
  可以自訂小工具並添加到側邊欄，並且提供條件編輯器決定顯示的條件。
• Shortcuts Bar
  透過 Shortcuts Bar 可以做出懸浮購物車的效果，方便顧客瀏覽、購買商品。

應用文章 – 「WooCommerce 小技巧 – 2 種方式做出懸浮購物車、迅速結帳」。

• White Label
  對於 Agency 來說這是相當吸引人的功能。可以改變 Blocksy 佈景主題編輯器、外掛的名稱，顯示 Agency 的品牌資訊。

並且按服務的條件與需求隱藏 Blocksy 功能選單中的選項。

可以到官網查看更多關於 Blocksy Pro 的功能說明！

實用外掛 Useful Plugins

在實用外掛頁籤下則是列出 Blocksy 推薦使用的相關外掛，大部分都是在範本網站中會使用到的功能。包含：

• Stackable – Gutenberg Blocks
• JetEngine
• Greenshift
• Modula – Customizable Gallery Plugin
• TranslatePress
• Brizy Page Builder
• Elementor Page Builder
• HubSpot
• WPForms – Contact Form

變更紀錄 Changelog

在 WordPress 外掛與 SaaS 工具的世界中，我最欣賞的就是能夠清楚記錄產品開發歷程與變更的公司。Blocksy 在這方面做得相當的完整且透明。

功能選單 – Content Blocks (內容區塊)

內容區塊是 Blocksy 另一個令人激賞的功能，它提供了許多可以按「條件」、「頁面位置」顯示的區塊功能。

• Custom Content/Hooks (自訂內容/勾點)
  設計完成的內容區塊可以使用短代碼嵌入頁面、文章的段落中，也可以使用條件管理器設定這個區塊要插入的勾點 (Hook) 位置。
• Popup (彈出視窗)
  可以設計以彈出視窗方式呈現的內容區塊，搭配條件管理器可以有相當廣大的應用可能性。

教學文章：
– 「Blocksy 教學 – 使用強大的內容區塊製作「彈出視窗 (Popup Window)」」
– 「Blocksy 教學 – 如何使用「自訂內容、勾點 (Custom Content/Hooks)」類型的內容區塊」

一般來說，這些通常都是需要透過其他電子行銷類的外掛才能做到類似功能，而 Blocksy 的使用者可以利用 Content Block 設定「內容區塊」在頁面的顯示位置、顯示條件、顯示裝置以及留存的時間等，足可為使用者省下一筆不小的成本。

相關應用包含行銷活動的 CTA、FOMO 限時活動、彈出視窗 CTA、彈出視窗註冊電子報等。

應用文章：
– 「Table of Contents – 使用 Blocksy 與 Kadence Blocks 輕鬆建立文章目錄、內容大綱」
– 「如何製作適合手機閱讀的文章目錄、內容大綱？」

此外，更提供了各種區塊、頁面的範本製作。

• Archive Template
  可以自行設計 Archive 頁面 (例如 Blog、類別頁面等) 的設計，使用你喜歡的區塊功能與效果來排版出不同目的、用途的 Archive 頁面。
• Single Template
  可以為「單一文章」頁面設計專屬風格的排版設計，例如，新聞類別或是產品介紹類別可以採用不同的排版方式。
• Header Template
• Footer Template
• 404 Page Template
  當訪客訪問了這個網域下的無效網址時，可以將訪客導引到 404 頁面；在這個頁面放上 CTA、建議商品、推薦文章，或許還能提升網站的轉換率。
• Nothing Found Template
  當訪客使用搜尋功能搜尋文章、商品卻找不到符合條件的結果時，可以將訪客導引到這個特別設計的頁面；在這個頁面放上 CTA、建議商品、推薦文章，或許還能提升網站的轉換率。
• Maintenance Template
  當網站需要改版、維護時，可以暫時放上這個公告頁面讓訪客知道目前的狀況，不管訪客訪問哪個頁面都會被轉址到這個公告頁面來。

功能選單 – Account

在 Account 頁面中清楚的顯示 Blocksy 帳號的相關資訊以及外掛版本。

結語

看完這篇文章之後，大家是不是對 Blocksy 有更多的了解了呢？

實際上，以超輕量佈景主題編輯器來說 Blocksy 提供了相當高的彈性與設計感可以讓使用者建立出高質感的網站，建議大家可以在測試網站中直接下載免費版的 Blocksy 玩一下，相信很快就能上手了。

以 Blocksy 佈景主題編輯器的 Modern Shop 網站範本為基礎，我們也陸續分享了不少應用技巧，可以參考以下文章。

延伸閱讀：
「WooCommerce 小技巧 – 2 種方式做出懸浮購物車、迅速結帳」。
「WooCommerce 小技巧 – 自訂「我的帳號」頁面、善用區塊編輯器」。
「WooCommerce 小技巧 – 2 個外掛自訂「結帳頁面」、最佳化多步驟結帳流程」。

對進階功能有興趣的朋友可以參考 Blocksy Pro 目前的定價 (以下價格為美金)：

並透過以下推薦連結直接到 Blocksy 官網購買，記得使用優惠碼取得額外折扣唷！