想把 WordPress 網站變得漂亮又吸引人，那大概只能推薦 Blocksy 這款佈景主題了！輕量化不嚴重拖慢速度、免費版就有強大功能、一鍵套版快速上線。
現在就跟著這 Blocksy 教學，輕鬆快速地改變自己網站的樣貌吧~
YouTube 影音教學
什麼是佈景主題？
佈景主題 (Theme) 將決定整個網站的主要視覺，像是背景色、字型、最上面的頁首、選單、最下面頁尾的配置；而從 WordPress.org 的佈景主題目錄中，就有超過萬種佈景主題可以挑選，本教學要介紹的 Blocksy 主題也涵蓋在其中。
別人那些很漂亮的首頁又怎麼做？
有些佈景主題會提供預設範本，你只要簡單套版，然後把自己的圖片和文字換上去就好；但目前的潮流比較是額外再安裝個頁面編輯器，自己設計個漂亮的頁面出來，像是一小時架站首頁和一小時學盲解首頁都是我再額外特別做的。
套版有什麼優缺點？
最大的好處會是省時間，你不用再花很多時間思考整個頁面開如何規劃；另一個優點則是樣式不差，對於沒有設計基礎的人來說，我建議可以套版，起碼他們的設計師也是有領錢認真做事的，那些版面配置都有設計過。
但這同時也是缺點，我個人認為最優秀或最適合的佈景主題一定不會是套版，所以強烈建議各位站長跟著下方教學操作並學習看看，未來也可以抽空學習點設計技巧，等有充足靈感與能量的時候就能自行設計囉！
Blocksy
這是一個備受推薦的輕量化 WordPress 佈景主題，所以不用擔心用了它會害網站變很慢，同時免費版給的功能是我目前用過數一數二全面的！
要到這麼多的功能通常都要付費，比方說像帶路姬推的 Soledad 主題確實還算不錯用，但就是無免費版、一定要付錢。
Blocksy Pro
對的，Blocksy 也是有提供付費版的，而且一個整限制器解放，我有買並且也有做個範例網站給大家參考，可以看看上方首頁，那麼棒的進階選單就是鎖在付費版裡面的！而且自從推出 Blocksy 2.0 以後，多了非常多的新功能，付費版也有提供現在很流行的黑暗模式。
如何安裝 Blocksy
- 在 WordPress 後台的外觀分頁找到佈景主題，點選安裝佈景主題。
- 右上角輸入 Blocksy 搜尋。
- 找到它後直接點安裝，之後點選啟用。
安裝子佈景主題 (Child-Theme)
子佈景主題是要有極高度客製化時會用到的東西，多數人用不到，像我自己是絕對不使用。但如果你需要的話就是先把這檔案載下來，之後到 WordPress 後台的安裝佈景主題區域，點選上傳佈景主題，把檔案放上去安裝就可以了。
Blocksy Companion
剛安裝好佈景主題並啟用後馬上就會跳出這提示，強烈建議安裝，這時免費版才有全面性的功能！
Blocksy 一鍵套版
安裝好 Blocksy Companion 之後，後台會多出一個 Blocksy 區域，裡面可以找到 Blocksy 入門網站，這裡就是官方準備的範本，找到喜歡的按下 [匯入]，之後全部點下一步就好了 (安裝過程所建議的外掛就先全安裝，未來再思考要不要刪除)。
然後再到首頁下方的自訂器捷徑，把需要的部分調整一下，網站就完成囉！
從零開始全面設計
這個是我強項，同時我也整理了一套流程，讓各位即使沒有基礎，也能按照接下來的步驟操作，把網站變成自己想要的樣子！
一開始會建議先設計好一份選單，並指定為主要選單，到時候可以即時預覽效果。現在我們在 WordPress 後台的外觀區域，點下[自訂]，準備開始囉~
核心區域
一開始請先把這裡完成，而做的項目只有兩個：
- 網站識別：牽涉到網站的標題，一定要修正，如果你之前已經有跟這教學把基本設定做好，這裡大概早就完成了。
- 頁首設定：先改成最新文章，這樣才能預覽 Blocksy 的效果。
一般選項
排版樣式和色彩這兩個優先處理，把主要基底確定，之後就很好做了。
排版樣式
排版樣式處理字型部分，如果想使用中文字的話可以選擇下面兩個：
- Noto Sans TC
- Noso Serif TC
但要記得中文字型很佔容量，所以會拖慢一點網站性能，好處是設定好後不管用什麼裝置看都會是這個字體，很一致；但如果不希望犧牲效能的話，其實可以不要設定，到時候訪客的瀏覽器也會自己選擇要用什麼自己顯示。如果你是使用 Cloudways 主機的話我覺得儘管用沒差，負荷上沒問題，但如果是其他家的主機，就自己考慮一下囉~
中文字的基本字型大小可以設定 17px~19px，也可以自訂 Rem 或者其他很好用的單位，在這邊只說目前環境比較少使用 px，不過這話題就這個比較進階了，之後有機會再分享，先繼續使用 px 倒還是沒差。下面的部分基本上不用去動。
色彩
整體色彩調色盤的右邊有個小三角，裡面有 Blocksy 提供的範本調色盤，沒特別想法的話從這裡選就好，效果很不錯，那我圖中是示範配個奶茶色色調出來。整體顏色調色盤好了之後，再去動下方的全域色彩部分。
一般
這裡我講比較需要改的部分，其他的各位也可以點進去看看，但通常比較進階所以維持預設就好。
- 版面配置：決定版型的尺寸，我除了把內容區域間距拉大一點之外，其他不怎麼動。
- 按鈕：可以點一篇文章進去，最下方留言區域有按鈕可以即時預覽調整狀態。這裡開始有時會有個設計分頁可以點進去做更細節的設定。
- 導覽標記 (麵包屑)：不用特別設定，之後會講解哪裡打開。
- 表單元件 / 條目內容：也是文章裡面都會有個目標可以即時預覽。
- 社交網路服務帳號：有在使用的就全部填上去，之後會講解哪裡打開。
- 訪客互動：是比較進階的設定，基礎情況可以略過。
- 返回頂端：我會開啟，打開後右邊有個小三角，點進去可以做更細節的設定。
內容類型
我通常就主要設計網誌文章和單篇文章兩個，下面幾項風格基本上完全照抄，這樣會是比較有效率的方式，整體也有一致性。
網誌文章
這裡影響目前的首頁，其實全預設就很好看了，有需要的話可以額外加開個資訊欄，在側邊顯示你想強調的資訊，當然各位也可以每個選項都點點看，反正按錯的時候也就重新整理瀏覽器就好。
倒是卡片選項應該要點進去看一下，這代表首頁這些文章要顯示的資訊，可以拖拉去改變位置，也可以把不必要的關閉。
單篇文章
比較重要的一點是文章標題右邊有個小三角，裡面有導覽標記 (麵包屑)，多數情況會建議打開的，起碼訪客不會迷路。如果對於導覽標記的樣式不滿意的話，可以回到一般選項那裡去做調整。
資訊欄哪裡調整？
在一般選項那裡有個資訊欄區域可以調整版面配置，而如果想要調整內容則是要回到 WordPress 後台 > 外觀 > 小工具區域，主要資訊欄的部分就是囉！
頁首
頁首這區域剛看到肯定會覺得很複雜，那我覺得分成三個區域，並按照下方解釋會最好理解：
- 有提供給你的功能，同時也是調整細項的位置。
- 頁首的控制台，可以把「1」提供的功能拿到這裡放。放上去後點擊就可以做詳細調整。
- 即時顯示調整效果。
特別要說明的有兩點：第一個是社群連結的帳號跟一般選項那裡是連動的，想改的話需要回去那裡改；第二個是「2」的控制台上，橫線的列也是可以點齒輪進去做設定，可以整列調整高度或者顏色之類，這點大家滿容易忽略的。
把頁首吸附在頂端
在「1」的地方點選頁首 > 整體頁首，有個吸附功能性，打開後就可以選擇哪列要吸在頂端囉！
頁尾
有了頁首的經驗後，頁尾這裡應該就很好處理了，差別主要在於頁尾提供的功能是小工具區域，要調整的話也是建議回到 WordPress 後台 > 外觀 > 小工具 做調整，比較好操作。舉例像台積電官網下方那些頁尾，如果要做的話，就是新增個小工具區域，然後每一行都用個文字並插入連結而已，很簡單的！
回應式網頁設計
回應式網頁設計 (Responsive Web Design)，可以簡稱為 RWD，國外也有人稱為響應式網頁設計，是因應現在多數訪客會使用平板或手機瀏覽的潮流而產生的技術，能讓網站在用行動裝置瀏覽的時候呈現不同的版面配置，提升使用者體驗。是 Google 建議採用的設計。
在畫面左側功能區的最下方可以找到 電腦/平板/手機 三個圖示，可以點中間的平板圖示，這時就會顯示平板瀏覽時候的畫面，這時候就可以對這裡的元素做一些修改，像是要不要置中或者要不要顯示之類的。
但基本上頁尾完成後，網站就完成了，這個回應式網頁設計是畫龍點睛的地方而已，沒有做也沒關係的！
Blocksy Pro 頂級付費版
無情推坑斂財時間
現在可以再看看我設計的這個網站，Blocksy Pro 主要厲害的地方就是頁首選單的那個 Mega Menu，並且電腦版多了左上角那個選單，而且也可以自由設定條件，像你隨便點幾篇文章或分類，會發現頁首呈現不同顏色或者整組直接不同。如果看一看覺得你需要這些功能的話，可以點此直連官網價目表購買。年付方案的話就是全年度可使用，到期後付費版功能會被鎖回去，再續約解鎖。而如果希望長期使用，則是可以直接買終身版喔！
如何啟用
在購買後，Blocksy 會把付費版的外掛與啟用序號寄到信箱，這時只要做以下步驟：
- 把外掛下載。
- 到 WordPress 後台 > 外掛 > 安裝外掛，點選上傳外掛，把它安裝上去並啟用。
- 把信箱內的序號複製進去完成驗證。
之後你的網站就可以用到這些酷東西囉！
