【Blocksy】推薦給你一個 WordPress 最好的佈景主題

Blocksy 是一款專為速度和靈活性設計的 WordPress 佈景主題,以其現代化設計和用戶友好性聞名,適合搭配 Gutenberg 編輯器使用。高登第一次接觸到 Blocksy 的時間簡直驚為天人!因為這就我一直在找的 WordPress 佈景主題。

在瞭解作者們的開發動機其實就是高登很久以來一直想做的一件事:開發出一個自己想要的功能而且速度極快的免費佈景主題!而作者也說他們本來是幫很多公司架設網站的網頁設計師,但是發現市面上現在的佈景主題功能總是少了某個他們想要的,所以就自己刻出這一個 Blocksy 佈景主題,所以裡面的許多功能可能就是你找了好久的。

Blocksy 的開發動機

以下是開發者在 Blocksy 官網說明的內容

我們為什麼要建構 Blocksy?

當我們為客戶建立自訂 WordPress 網站時,我們嘗試使用不同的主題作為基礎。其中一些很好,但太慢,一些很快,但沒有正確的選擇。不幸的是,功能的缺乏迫使我們每次都修改主題程式碼或使用複雜的解決方案。最終的結果就是變成了一台難以維護的大機器。

隨著時間的推移,我們開始了解主題應該是什麼樣子以及它應該包含哪些開箱即用的內容。因此,從我們已有的數千個想法中,一個新的想法誕生了- 創建一個主題來滿足我們所有的需求,這將幫助我們加快創建過程,輕量級,沒有依賴性,並且將具有大量的自訂功能。我們也希望這個主題即使在功能較弱的伺服器上也能保持快速且效能良好。

由於我們有很多不同規模的項目,我們希望這個主題是模組化的——在我們的願景中,這意味著只載入和執行必要的程式碼和功能。因為我們處理了廣泛的需求,所以我們知道我們必須使這個主題與 WordPress 生態系統中的其他工具集成,以便我們能夠有效率地完成工作。

Blocksy 主要功能與特點

  1. 速度極快
    • 輕量化設計,代碼經過高度優化,符合 Core Web Vitals 的性能需求。
    • 預設支援 Lazy Loading 圖片延遲載入及 CSS 合併最小化功能。
    • 不需依靠速度優化外掛即可得到高分的 PageSpeed Insights 分數。
  2. 強大的客製化能力
    • 透過自訂功能,在調整文章/頁面排版、顏色、字型、頁首與頁尾結構時可以即時預覽。
    • 單一文章/頁面可以單獨設定不同的版面配置。
    • 針對桌機、平板及手機的頁面可單獨調整達到最佳效果。
  3. 與第三方工具無縫整合
    • 完美支援 WooCommerce,適合建立網路商店。
    • 與主流的編輯器 Elementor, Brizy, Oxygen, Divi 等無縫接軌。
    • 與各家網站優化外掛、 SEO 外掛、線上課程外掛等都完全相容
  4. 支援多語言與翻譯
    • 內建支援 WPML 和 Polylang,並相容於 Right-to-Left (RTL) 文字的設計。
    • 繁體中文翻譯完整(由本工作室負責官方的翻譯專案)
  5. Gutenberg 完美搭配
    • 針對 WordPress 原生區塊編輯器進行優化,提供自訂區塊和功能。
    • 可以在安裝最少的外掛之下,完成一個美觀且快速的網站。

Blcoksy 優點

  1. 直覺式設計:適合新手和專業設計師,易於上手。
  2. 速度極快:在 PageSpeed Insights 和 GTmetrix 的得分優異。
  3. 免費版就有夠用的功能:與競爭對手 Astra、GeneratePress 等相比,Blocksy 提供最多免費版的功能。
  4. 高相容性:與大多數流行外掛(如 WooCommerce、Elementor、Brizy)相容。
  5. 靈活性強:可用於各種用途,如部落格、企業形象網站、電子購物網站、線上學習網站等。
  6. 社群與支援活躍:有完整的文件與技術支援,在 Facebook 的社團掀出問題都可以得到完整的解答。

Blocksy 缺點

  1. 進階功能需要付費:某些高級功能(如高級內容區堍自訂顯示條件、更多 WooCommerce 整合、自訂文章類型 CPT 支援)僅在付費版提供。
  2. 需要學習曲線:對於新手來說,整體可以設定的參數很多,熟悉所有功能可能需要一些時間。
  3. 更新太頻繁:沒錯!這是一個缺點,幾乎每個禮拜都會有更新,好處是開發者一直推出新功能,但是你就要多點花時間注意它的更新。

網路上推崇 Blocksy 的知名人士

  1. Adam Preiser
    • 知名 WordPress 教育頻道 WPCrafter 的創辦人。
    • 他強調 Blocksy 的速度與設計彈性,是中小型網站的理想選擇。
  2. Darrel Wilson
    • 提供 WordPress 教學影片的知名 YouTuber。
    • 他稱 Blocksy 是「最被低估的 WordPress 主題之一」。
  3. Tom Dupuis
    • 網站優化專家,經營 Online Media Masters
    • 推薦 Blocksy 作為高效能主題選項,特別是在速度和 SEO 方面表現優秀。

再加一個雖然不是知名人士:本站創辦人高登也是力推 Blocksy!這些推崇聲音反映了 Blocksy 在設計與性能上的綜合優勢。另外要請大家注意的一點是,本站推薦 Blocksy 不帶任何利益連結,不像許多推薦者透過你的購買而從中獲利,這種聯盟行銷可能會針對他自己的利益來推薦,像是市面上很多國外主機評鑑的網站力推 Bluehost 就是最好的例子.。

高登工作室網站改版了

以下是 3 年前改版的說明,然後有興趣的朋友可以測一下經過了三年多,沒有特別的維護網站 PageSpeed Insights 分數的情況下,本站目前還是保有很高的分數,這就是 Blocksy 的魅力所在。

最近高登工作室的網站做了大幅度的變動,這應該是高登工作室網站成立10幾年來最大的改版,同時這也反映了這10幾年來,網站的樣子已經有了很大的不同。

究竟有什麼不同呢?我們就用下面的兩張幻燈片(輪播)對照圖來看看:

【Blocksy】推薦給你一個 WordPress 最好的佈景主題

這是部落格樣式的高登工作室

【Blocksy】推薦給你一個 WordPress 最好的佈景主題

這是內容管理網站的高登工作室

如果你是高登工作室的老友,應該很熟悉第一張圖片的樣子,而高登工作室從一開始就差不多就是這個樣子,雖然這期間高登工作室已經換過至少5個版型(佈景主題),但是高登盡量讓原來部落格的樣子維持一致,尤其是最上方的一張歐洲建築的圖,這張圖是一個知名的國外景點,但是你在網路上應該找不到類似拍攝角度,這也就是高登一直堅持最上面要留這張圖的用意:讓到訪過高登工作室的朋友在下次再次造訪時會有曾經來過的記憶。

而第二張則是我們最近改被之後的新首頁樣子,你已經看不到原來似曾相識的樣子,但是請你點一下上面選單最右邊的[工作筆記]還是可以看到原來部落格的樣子,那是你原先熟悉的部落格文章那一部分,現在已經變成整個網站當中的一個子頁面而已,不再是整個網站的主軸。

下圖這一張則是利用圖片比較的模組來同時呈現兩張圖,你可以自己拉動中間的分隔線來看兩者的差異:

高登工作室部落格高登工作室新網站

從部落格到內容管理網站

因為高登工作室的網站是用 WordPress 這個開放原始碼架站程式所架設的,而當初 WordPress 剛出來的時候正是部落格風起雲湧百家爭鳴的年代,所以 WordPress 一開始就是定位在自架的部落格系統,而且高登跟許多部落格主當初也幫它推廣出了兩本書。

隨著時間流逝,部落格已經漸漸式微,新型態的社群媒體像是 Facebook, LINE, Instagram 等豐富圖片內容為主的服務,讓部落格的聲量一年比一年低,現在還有在更新的部落格基本上都是許多專職部落客而已。

而且 WordPress 的系統在這幾年也慢慢地朝內容管理系統 (CMS Content Management System) 進化,而且這進化已經是相當明顯,只不過我身邊還是有一堆依然用著 WordPress 舊系統的好友,而高登工作室的改版也有想要喚醒這一群尚未進化的巨人,讓他們也要跟著 WordPress 一起進步一起成長茁壯。

WordPress 部落格架設與經營
站長親授!WordPress 3.0部落格架站十堂課

從 Blocksy Theme 重新開始

WordPress Blocksy Theme

事實高登工作室改版這件事已經被唸了好幾年了,因為高登並沒有淡出 WordPress 界,只是默默地幫一些信賴的朋友管網站、架網站,但是家人一直說你幫人家架網站,但是自己的網站看起來就是上個世紀的樣子,這樣子如何說服人家給你架設美麗的網站呢?

這就好像一個知名的建築師或是室內設計師,自己卻住在破破爛爛的老房子一樣,所以要剃別人的鬍子之前要把自己的剃乾淨(好久沒聽到的廣告台詞),於是有了高登工作室網站改版這件事。

而根據高登這十幾年來幫人架設及維護 WordPress 網站 的經驗深深覺得:選擇一個合用而且可以用很久的網站版型(佈景主題)真的不容易,最常見的是為了某些外觀或是客製的需求,我們去動到了版型的程式部分,造成日後升級的困擾。

或者是用了某個當初覺得不錯的版型,但是後來要換成別的版型可能要整個架構砍掉重練,沒錯!很多舊的資料都轉不過去!

而在尋尋覓覓好久,試過市面上幾十個銷售量可觀或是大家風評不錯的付費及免費版型之後,在一個偶然的機會用到了 Blocksy 這個免費版型,結果一試成主顧就不想要再用其他的版型了。

不是很容易達成的任務

現在有了一個基本的架構呈現給大家,而且用 Google 的 Lighthouse 這個最新用來評估網站速度指標的服務,好不容易有了滿分的成績,高登特地把這個動畫錄起來紀念一下。

如果你也是一個網站主,自己也可以下載安裝這個 Chrome 擴充程式測一下自己的網站,不過說明一下它的測試數據及方法是一直在變動的,高登工作室的首頁昨天測還是滿分,今天就不知道為什麼 SEO 又出現讀不到 robots.txt 的錯誤,要看到放煙火真的不容易!

Lighthouse 網站測試成績滿分動畫

事實上這個測試分數是跟你的網頁內容有很大的關係的,一個簡單沒什麼圖片內容的網頁當然會有高分,但是如果你知道高登工作室現在基本運作的有用或是沒有用哪些模組(服務)的話,你就知道這滿分有多麼不容易了:

有在用的模組及服務

  • Google Adsense (沒錯,你可以看看工作筆記那邊還是有放 Google 廣告,然後這篇或是首頁跟其他重要的頁面沒有)
  • Google Analytics (這個用心的網站主必放的網站追蹤代碼)
  • Google Tag Manager (這是新版的追蹤代碼)
  • Facebook API (串接用的)
  • Jetpack (許多人視為萬惡的 Jetpack 外掛高登一直都有在用,主要是它的網站統計圖表很簡單易讀,其他的像是本篇文章的圖片比較區塊就是用 Jetpack 附加的模組)
  • Post Views Counter (這是用自己的主機記錄文章瀏覽數的外掛,很吃資料庫資源)
  • Contack Form 7 (留言表單外掛,很多人都說也是吃資源,不過已經用了十幾年目前還沒換,再過不久應該會換掉,因為有找到更好的)
  • Broken Link Checker (也是用了十幾年很多人都說吃資源的外掛)
  • WP Cerber (這是一個比較新的安全外掛,再找時間跟大家介紹)
  • WP-Optomize (網站優化外掛,現在也兼做快取外掛)
  • Getwid (區塊編輯器的擴充模組,之前的頁面都沒用,這篇文章最上面的幻燈片輪播模組就是用 Getwid 的)
  • WP FAQ (一個開合清單外掛,本來是很久以前用來做一個問答集頁面的,現在 Getwid 裡面就有了所以會轉成用 Getwid 的)
  • 一個可以讓每一個區塊動起來的 CSS 外掛
  • 一個可以在文章中加入任意 Font Awesone 圖示字元的外掛,像這樣
  • 自己加可以像這個清單用不同圖示顯示符號的一段 CSS
  • 一個物件快取外掛
  • Featured Image from URL (FIFU) (使用外部網址圖片當作精選圖片的外掛,因為早期高登工作室的圖片都是放另一個子網域不能直接拿來當特色圖片)
  • 主機用標準自己架的的 cPanel / Apache 規格,沒有用 Nginx 或是 Litespeed 比較進階的網頁主機程式
  • 首頁及服務項目那些頁面只是用 Gutenburg 區塊編輯器加 CSS 做出來的,沒有用 Getwid 及其他的擴充模組

沒有使用的模組及功能

  • 沒有掛任何 CDN ,甚至連 Jetpack 的 Photon 都沒有
  • 沒有加強或付費版的快取外掛,像是有人說很快 WP Rocket(我是覺得一般而已不值得花那個錢)
  • 沒有任何的 SEO 外掛,從一開始開站就沒有,不過以後會加
  • 網頁沒有加 Keywords Tag ,將近10年前就沒加了,為了驗證加那個沒有比較好
  • 沒有用 Nginx 網頁主機
  • 也沒有用 Litespeed 網頁主機
  • 還沒有用 WebP 新的圖片格式 (Google 一直在推廣)
  • Blocksy Theme 有PRO付費版但是還沒用,可能以後會用
  • 除了 Getwid 之外目前還不打算用其他的區塊編輯器擴充模組
  • 只是單純的用一個 Blocksy 佈景主題就可以製作出本篇文章或是本站首頁跟工作筆記部落格型態的網站,不用另外加什麼外掛

看完以上的清單大家可以體會 Lighthouse 還可以得 100 分的辛苦嗎?不過要讚美的是 Blocksy 這個體質很好的版型(佈景主題),高登曾經在跟國外網友聊天中雙方一致認同 Blocksy 是近年來最佳的免費或付費 WordPress 版型,沒有之一。

關於 Blocksy 這個版型高登會另外撰文介紹,同時讓大家先知道一下 Blocksy 的繁體中文語系也是高登負責的(還有 Getwid 也是),好的東西要分享給大家是高登工作室一貫的原則。

如果大家對高登列出的網站架構還有疑問的也歡迎留言提問。

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料