【2024年度】 Blocksy教學：想讓網站變漂亮就靠這個！ | WordPress佈景主題推薦

想把 WordPress 網站變得漂亮又吸引人，那大概只能推薦 Blocksy 這款佈景主題了！輕量化不嚴重拖慢速度、免費版就有強大功能、一鍵套版快速上線。

現在就跟著這Blocksy教學，輕鬆快速地改變自己網站的樣貌吧~

YouTube影音教學

什麼是佈景主題？

佈景主題 (Theme) 將決定整個網站的主要視覺，像是背景色、字型、最上面的頁首、選單、最下面頁尾的配置；而從 WordPress.org 的佈景主題目錄中，就有超過萬種佈景主題可以挑選，本教學要介紹的Blocksy主題也涵蓋在其中。

別人那些很漂亮的首頁又怎麼做？

有些佈景主題會提供預設範本，你只要簡單套版，然後把自己的圖片和文字換上去就好；但目前的潮流比較是額外再安裝個頁面編輯器外掛，自己設計個漂亮的頁面出來，像是一小時架站首頁和一小時學盲解首頁都是我再獨立做的。

套版有什麼優缺點？

最大的好處會是省時間，你不用再花很多時間思考整個頁面開如何規劃；另一個優點則是樣式不差，對於沒有設計基礎的人來說，我建議可以套版，起碼他們的設計師也是有領錢認真做事的，那些版面配置都有設計過。

但這同時也是缺點，我個人認為最優秀或最適合的佈景主題一定不會是套版，所以強烈建議各位站長跟著下方教學操作並學習看看，未來也可以抽空學習點設計技巧，等有充足靈感與能量的時候就能自行設計囉！

Blocksy

這是一個備受推薦推薦的輕量化 WordPress 佈景主題，所以不用擔心用了它會害網站變很慢，同時免費版給的功能是我目前用過數一數二全面的！

要到這麼多的功能通常都要付費，比方說像帶路姬推的Soledad主題確實好用，就是無免費版一定要付錢。

Blocksy Pro

• Blocksy付費版價目表

對的，Blocksy 也是有提供付費版的，而且一個整限制器解放，我有買並且也有做個範例網站給大家參考，可以看看上方首頁，那麼棒的進階選單就是鎖在付費版裡面的！而且自從推出 Blocksy 2.0 以後，多了非常多的新功能，付費版也有提供現在很流行的黑暗模式。

如何安裝 Blocksy

1. 在 WordPress 後台的外觀分頁找到佈景主題，點選安裝佈景主題。
2. 右上角輸入 Blocksy 做搜尋。
3. 找到它後直接點安裝，之後點選啟用。

安裝子佈景主題 (Child-Theme)

• Blocksy Child Theme 下載連結

子佈景主題是要有極高度客製化時會用到的東西，多數人用不到，像我自己是絕對不使用。但如果你需要的話就是先把這檔案載下來，之後到 WordPress 後台的安裝佈景主題區域，點選上傳佈景主題，把檔案放上去安裝就可以了。

Blocksy Companion

剛安裝好佈景主題並啟用後馬上就會跳出這提示，我強烈建議安裝，這時免費版才有全面性的功能！

Blocksy 一鍵套版

安裝好 Blocksy Companion 之後，後台會多出一個 Blocksy 區域，裡面可以找到 Blocksy Starter Sites，這裡就是官方準備的範本，找到喜歡的按下 Import，之後全部點下一步就好了（它們推薦的外掛建議先全安裝，未來再思考要不要刪除）。

然後再到首頁下方的自訂器捷徑，把需要的部分調整一下，網站就完成囉！

從零開始全面設計

這個是我強項，同時我也整理了一套流程，讓各位即使沒有基礎，也能按照接下來的步驟點選項操作，把網站變成自己想要的樣子！

一開始會建議先設計好一份選單，並指定為主要選單，到時候可以即時預覽效果。現在我們在 WordPress 後台的外觀區域，點下自訂，準備開始囉~

核心區域

一開始請先把這裡完成，而做的項目只有兩個：

• 網站識別：牽涉到網站的標題，一定要改，如果你之前已經有跟這教學把基本設定做好，大概就只剩下網站圖示的部分。
• 頁首設定：先改成最新文章，這樣才能預覽 Blocksy 的效果。

一般選項

排版樣式和顏色這兩個優先處理，把主要基底確定，之後就很好做了。

排版樣式

排版樣式決定字體，如果想使用中文字的話可以選擇下面兩個：

• Noto Sans TC
• Noso Serif TC

但要記得中文字型很佔容量，所以會拖慢一點網站性能，好處是設定好後不管用什麼裝置看都會是這個字體，很一致；但如果不希望犧牲效能的話，其實可以不要設定，到時候訪客的瀏覽器也會自己選擇要用什麼自己顯示。如果你是使用 Cloudways 主機的話我覺得儘管用沒差，負荷上沒問題，但如果是其他家的主機，就自己考慮一下囉~

中文字的基本字型大小可以設定 17px~19px，也可以自訂 Rem 或者其他很好用的單位，在這邊只說目前環境比較少使用 px，不過這個比較進階了，之後有機會再分享，先繼續使用 px 倒還是沒差。下面的部分基本上不用去動。

顏色

整體顏色調色盤的右邊有個小三角，裡面有 Blocksy 提供的範本調色盤，沒特別想法的話從這裡選就好，效果很不錯，那我圖中是示範配個奶茶色色調出來。整體顏色調色盤好了之後，再去動下方的整體顏色部分。

一般

這裡我講比較需要改的部分，其他的各位也可以點進去看看，但通常比較進階所以維持預設就好。

• 版面配置：決定版型的尺寸，我除了把內容區域間距拉大一點之外，其他不怎麼動。
• 按鈕：可以點一篇文章進去，最下方留言區域有按鈕可以即時預覽調整狀態。這裡開始有時會有個設計分頁可以點進去做更細節的設定。
• 導覽標記（麵包屑）：不用特別設定，之後會講解哪裡打開。順便說一下導覽標記是 Google 官方指定使用詞彙，這個翻譯有點小狀況，總之各位要記得正確名詞，不然未來學報表可能會看不懂。
• 表單元件 / 條目內容：也是文章裡面都會有個目標可以即時預覽。
• 社群媒體帳號：有在使用的就全部填上去，之後會講解哪裡打開。
• 訪客互動：是比較進階的設定，基礎情況可以略過。
• 返回頂端：我會開啟，打開後右邊有個小三角，點進去可以做更細節的設定。

內容類型

我通常就主要設計網誌文章和單篇文章兩個，下面幾項風格基本上完全照抄，這樣會是比較有效率的方式，整體也有一致性。

網誌文章

這裡影響目前的首頁，其實全預設就很好看了，有需要的話可以額外加開個資訊欄，在側邊顯示你想強調的資訊，當然各位也可以每個選項都點點看，反正玩到卡的時候也就發佈一下再重新整理瀏覽器就好。

倒是卡片選項應該要點進去看一下，這代表首頁這些文章要顯示的資訊，可以拖拉去改變位置，也可以把不必要的關閉。

單篇文章

比較重要的一點是文章標題右邊有個小三角，裡面有導覽標記 (麵包屑) 可以打開，多數情況會建議打開的，起碼訪客不會迷路。如果對於導覽標記的樣式不滿意的話，可以回到一般選項那裡去做調整。

資訊欄哪裡調整？

在一般選項那裡有個資訊欄區域可以調整版面配置，而如果想要調整內容則是要回到 WordPress 後台 > 外觀 > 小工具區域，主要資訊欄的部分就是囉！

頁首

頁首這區域剛看到肯定會覺得很複雜，那我覺得分成三個區域，並按照下方解釋會最好理解：

1. 你可以的功能，同時也是調整細項的位置。
2. 頁首的控制台，可以把「1」的功能拿到這裡放。放上去後點擊就可以到「1」做詳細調整。
3. 即時顯示調整效果。

特別要說明的有兩點：第一個是社群連結的帳號跟一般選項那裡是連動的，想改的話需要回去那裡改；第二個是「2」的控制台上，橫線的列也是可以點齒輪進去做設定，可以整列調整高度或者顏色之類，這點大家滿容易忽略的。

把頁首吸附在頂端

在「1」的地方點選頁首 > 整體頁首，有個吸附功能性，打開後就可以選擇哪列要吸在頂端囉！

頁尾

有了頁首的經驗後，頁尾這裡應該就很好處理了，差別主要在於頁尾提供的功能是小工具區域，要調整的話也是建議回到 WordPress 後台 > 外觀 > 小工具 做調整，比較好操作。舉例像台積電官網下方那些頁尾，如果要做的話，就是新增個小工具區域，然後每一行都用個文字並插入連結而已，很簡單的！

回應式網頁設計

回應式網頁設計 (Responsive Web Design)，可以簡稱為 RWD，國外也有人稱為響應式網頁設計，是因應現在多數訪客會使用平板或手機瀏覽的潮流而產生的技術，能讓網站在用行動裝置瀏覽的時候呈現不同的版面配置，提升使用者體驗。是 Google 建議採用的設計。

在畫面左側功能區的最下方可以找到 電腦/平板/手機 三個圖示，可以點中間的平板圖示，這時就會顯示平板瀏覽時候的畫面，這時候就可以對這裡的元素做一些修改，像是要不要置中或者要不要顯示之類的。

但基本上頁尾完成後，網站就完成了，這個回應式網頁設計是畫龍點睛的地方而已，沒有做也沒關係的！

Blocksy Pro 頂級付費版

無情推坑斂財時間

現在可以再看看我設計的這個網站，Blocksy Pro 主要厲害的地方就是頁首選單的那個 Mega Menu，並且電腦版多了左上角那個選單，而且也可以自由設定條件，像你隨便點幾篇文章或分類，會發現頁首呈現不同顏色或者整組直接不同。如果看一看覺得你需要這些功能的話，可以點此直連官網價目表購買。年付方案的話就是全年度可使用，到期後付費版功能會被鎖回去，再續約解鎖。而如果希望長期使用，則是可以直接買終身版喔！

如何啟用

在購買後，Blocksy 會把付費版的外掛與啟用序號寄到信箱，這時只要做以下步驟：

1. 把外掛下載。
2. 到 WordPress 後台 > 外掛 > 安裝外掛，點選上傳外掛，把它安裝上去並啟用。
3. 把信箱內的序號複製進去完成驗證。

之後你的網站就可以用到這些酷東西囉！

常見問題