2025｜Blocksy 教學：如何客製化 WordPress 佈景主題
❬ 聲明 ❭ 本文內的連結有部分參與聯盟計畫，分潤將用於網站的維護，更多詳情點此說明。
本文是《 新手的網站經營四部曲 》的第二部，學會如何客製化 WordPress 佈景主題的視覺。
每當安裝完佈景主題時，網站通常不是完美的樣子，需要再客製化設定。而讓人最頭疼的是，每個佈景主題因開發者不同，為了要找到調整設定的地方就會花上不少時間。
因此，找到一款輕量、耐用，經的起時間考驗的佈景主題就相當重要。這也是為什麼我總是推薦 Blocksy 佈景主題給大家，直觀的介面設定，總能讓我快速完成一個全新網站的設計。
本篇文章，將會教你如何構思網站的品牌形象與視覺風格、WordPress 外觀設定的介面解說、客製化網站外觀的秘訣、Blocksy 佈景主題介面解說，並帶你實際操作，我們直接開始吧！
建議：請先完成 WordPress 網站的建置，再往下閱讀本文，對於學習會更有效率哦。
【 延伸閱讀 】
網站的品牌形象和視覺風格
在設計一個網站之前，首先要決定「品牌形象」，才能定調「視覺風格」。
想像你的網站是一個品牌，而構思品牌形象最簡易的方法，就是思考以下問題的答案，通常就會有初步的畫面了。你可以用「五步驟」來發想網站的形象和風格：
- 你的品牌想傳遞什麼訊息給目標受眾？核心的理念或價值？
- 你希望品牌能帶給別人什麼感受？
- 你的目標受眾是什麼樣的人？
- 綜合以上，想像你的品牌是一個人，它會有什麼樣的個性與外在形象？例如：顏色、精緻乾淨有條理 vs 野性奔放亂中有序、低調 vs 前衛、保守 vs 開放等。
- 打開 Coolors.co 和 Google Fonts 網站，找到最接近這個人的「色系和字體」。
我以《 atinyspace 曉房間 》作為範例的回答，參考如下：
- 想傳遞的訊息：聽從直覺的聲音，用行動踏實築夢。
- 希望品牌帶給別人放鬆、舒服、被擁抱鼓舞的感受。
- 目標受眾：渴望個人成長，注重身心靈照護，但又想務實生活的人。
- 個性：時而陽光活潑，時而真誠沈穩；喜歡舒服低調，樂於體驗。
根據答案，我最終決定用「橘紅色、綠灰色」作為我的網站主色；文字選擇乾淨利落的「無襯線、有襯線」字體；整體網站的排版和視覺，設計成讓人能夠在放鬆的環境裡吸收新知。
現在，換你做做看，跟著這五個步驟，設定好你的品牌形象和視覺風格吧！
發想時如需靈感，建議在網路上找幾個部落格網站作為模範，設計時可以參考。
認識 WordPress 的外觀設定
決定好網站的視覺風格之後，我們該去哪裡進行外觀的設定呢？
雖然每個佈景主題因開發商不同，調整設定的地方略有不同。但因系統都是使用 WordPress ，故設定的核心概念是一樣的，即是：只要跟「網站視覺」有關的設定，通通在 WordPress 後台左邊選單裡的「外觀」底下進行設定。
當安裝完佈景主題，要進行客製化的設計時，最常用的就是「自訂、小工具、選單」。
自訂（Customize）
若要修改佈景主題的任何設定，通常在「自訂」調整。如下圖，進入自訂頁面後，左邊是主要設定區，右邊則是即時畫面視窗。在左邊進行設定，你會立即在右邊看到結果。
調整的內容，包含：網站版面格式、排版、字型、顏色、距離、頁首設計、側邊欄設計、頁尾設計、選單設計、小工具設計、網站標誌、社群媒體連結、首頁設定、CSS 客製化程式碼等。
結論就是 —— 只要想「調整設計」，通通在自訂，到這裡找就對了。
小工具（Widget）
小工具，指的是網站上的一些小功能，可透過「滑鼠拖拉」來放進特定區域的簡易元件。
與外掛不同，外掛是用來「擴充整個網站功能」的程式套件。有些外掛在安裝後，也會有小工具能使用。例如：電子報外掛，安裝好外掛，可增加「電子報訂閱表單」的小工具在任何地方。
下圖即是 WordPress 小工具的編輯介面，你可以把小工具放入不同的區塊中。
例如：你在上圖的側邊欄（主要資訊欄）放入小工具，實際網站中呈現的範例就會如下圖。
你也可以把小工具放在頁首、頁尾或主要內容區，幾乎網站中每個位子都可以放。
選單（Menu）
網站中的選單，如頁首和頁尾選單裡的內容，也會影響到網站的視覺。通常會先在 WordPress 後台的「外觀」底下的「選單」裡設定好選單的項目，再進入「自訂」去修改選單的設計。
Blocksy 佈景主題介面導覽
從 WordPress 後台的「外觀」進入「自訂」頁面後，左邊是主要設定區，共分成「四個群組」，包含：一般選項、內容類型、擴充功能、核心。說明如下：
一般選項：統一調整「網站整體」的設定，會套用到網站裡的每個網頁，包含：網站版型尺寸、網站色盤、網站字型、社群媒體、性能和其他細部設定。
內容類型：調整跟「網頁內容」有關的設定與設計，包含：網誌文章、單篇文章、分類、頁面、作者頁面、搜尋頁面等。
擴充功能：Blocksy 有提供額外的附加功能，如：趨勢文章、進階選單、自訂字型、色彩模式切換、商品評論、捷徑列、多重資訊欄等。 —— 你需要到 WordPress 後台的「Blocksy」選單中，將功能打開，才會在「自訂」裡看到這個項目的設定。
核心：設定有關網站「核心資訊」的地方，包含：網站標誌、網站標題和說明、選單、小工具、首頁設定、CSS 程式語言客製化等。
客製化 WordPress 的七步驟
通常在設計網站視覺時，我會依據「網頁的結構」來安排設計的順序，參考如下：
- 網站整體的設計：網站版面、網站色盤、字體、按鈕和超連結的設計
- 設計頁首（Header）：網站標誌、頁首選單
- 設計頁尾（Footer）：網站標誌、頁尾選單、版權和法律聲明
- 設計資訊欄（Sidebar）：客製化小工具的內容
- 設計「與文章有關」的頁面（Article aka Post）：部落格、單篇文章、文章分類
- 設計「除文章以外」的頁面（Article aka Page）：首頁、關於、隱私權政策
- 網站的響應式設定：將網站調整成平板電腦和手機版本
接下來，我們就開始實戰操作，為你的網站進行設計吧！
響應式設計（Responsive Design, RWD），指的是你的網站在不同的螢幕介面裡有良好的呈現，並帶給讀者舒適的瀏覽體驗。
例如：在電腦螢幕中，網站是寬版面，內涵豐富的資訊；在手機的小螢幕中，縮窄網站寬度，改變內容的排版方式，將字級調成適合手機閱讀的大小。
良好的響應式設計，是影響 SEO 排名很重要的一項評分！
1. 網站整體的設計
首先，我們要針對網站整體的「共同元素」去進行設計，包含：版面配置、網站色盤、字體字型、超連結、按鈕、社群媒體等。
我會針對「常調整的設定」來示範如何操作，（沒示範的地方你也可以自己玩玩看）你可以發揮創意，設計出屬於自己的視覺喔！
1.1. 設定網站版面
從 WordPress 後台進入自訂頁面後，點擊左邊選單「一般」設定區裡的「版面配置」來調整最大網站寬度和內容區域的間距，說明如下：
- 最大網站寬度：指網站全部的總寬度，你可以設定自己喜歡的寬度，或參考此文章。
- 內容區域間距：指網頁裡的「主要內容區」距離網站最外圍邊界的距離。
1.2. 設定網站調色盤
完成版面配置的調整後，接著，我們要設定「網站調色盤」。
網站調色盤的概念，很像是在畫水彩之前，先選定好八種顏色，未來當網站裡有任何需要設定顏色的時候，就從色盤裡直接選擇，管理顏色非常方便。以下為操作示範：
在自訂區，點擊進入「色彩」。最上方是「整體色彩調色盤」，也就是你的色彩模板，共可選擇「八個顏色」。調整顏色時，我建議以目前系統預設的邏輯來調色：
- 黑色：預設用於文字、標題和選單的連結。
- 亮藍色：按鈕、文章分類的標籤和超連結，具 CTA 特性。
- 深藍色：游標滑到物件上的變換顏色，能創造動態的互動感，具 CTA 特性。
- 灰色：主要內容區和資訊欄的背景色。
- 白色：頁首和卡片的背景色。
CTA（Call-to-Action）：行銷專有名詞，中文為「行動呼籲」。主要用途是呼籲大家去關注或點擊它，會用不同的設計去強調或凸顯該元素。例如：訂閱電子報的按鈕。
在影片中，我示範了如何調整顏色。現在，你可以把調色盤改成你的品牌所代表的色系，並針對其他元素，如：一般文字、連結、框線、標題等進行顏色的設定。
1.3. 設定排版樣式、按鈕、社群媒體
在自訂的「一般」設定區裡，還可以設定「排版樣式」，即網站內文和標題的字體字型設計。
除此之外，你還能針對以下項目進行客製化的設計：
- 按鈕：網站中的按鈕設計。請注意：某些網站中的按鈕，調整的位置會不同。
- 社群媒體：你可以把自己的社群媒體連結放入設定區裡，再進一步設定款式和顏色。
- 返回置頂：此按鈕的功能，可以讓讀者快速從網頁的尾端回到置頂區。
- 網站外框：為你的網站增加框線，是特殊的小功能。
完成好網站中通用元素的基本設計後，下一步，就要來設計「網站的頁首」囉！
2. 設計頁首
頁首，就像是門口的招待。當讀者初來乍到時，可以讓他知道如何瀏覽網站是最好的方式。
無論是頁首或頁尾，設計概念是相同的，都被切分成「三個列」，包含：上面列、主要列（手機列）、下面列。在每一列中，你可以放入不同的元素。以頁首來說，建議可加入：
- 上面列：搜尋圖示、社群媒體圖示
- 主要列（手機列）：網站標誌、選單（此列也會作為手機版的主要選單）
- 下面列：空白（若此列沒有內容，系統將會自動隱藏）
參考以下教學影片，開始來為頁首進行設定吧！關於網站標誌的設計，參考此教學。
小技巧：在自訂區進行設計時，可以擅用「藍色框線」或「藍色水滴圖」的提示來快速開啟設定區。 —— 當你不知道從哪設定時，就把滑鼠游標移至即時顯示區（畫面右側），在想修改的區域裡找到「藍色框線或水滴圖」並點擊，左側或下方就會跳出設定介面。
2.1. 頁首（主要列）
在頁首的主要列中，有著網站中最重要的元素，包含：網站標誌、網站標題或網站說明，以及頁首選單。你也可以調整主要列的高度、背景色和框線，發揮實驗精神試著設計看看。
2.2. 頁首（上面列）
頁首的上面列，放的是主要列以外的次要資訊，包含：網站搜尋圖示、社群媒體圖示。網站搜尋的功能，是讓讀者可以快速查找站內的資訊，提升瀏覽體驗和效率。
設計完頁首，下一步，就可以來進行「網站頁尾」的設計啦！
3. 設計頁尾
頁尾的設計方式和頁首一樣，差別是裡面的「內容不同」。頁尾的目的，是當訪客要離開網站時，你希望能留住他、讓他再次導回網站中，或提供與網站相關的法律聲明。
因此，你可以在頁尾加入：網站標誌、頁尾選單、法律或版權聲明（免責聲明、隱私權政策）、電子報訂閱表單、社群圖示、廣告或贊助區等。
在以下示範操作影片中，我刪除了部分模板預設的內容，只保留頁尾選單裡需要的元素。你也可以加入其他想加入的東西，儘管自由發揮！
【 補充說明 】
- 版權聲明範本：Copyright © {current_year}. 你的網站名稱. All Rights Reserved.
- 安裝 Blocksy 模板時，系統就有自動建立好隱私權政策（Privacy Policy）頁面，你可以參考這個範本，將內容客製化放在自己的頁面中。
當頁首和頁尾都設計好了之後，接著，我們要設計「資訊欄」了。
4. 設計資訊欄
從自訂區進入「資訊欄」的設定。你可以選擇資訊欄的樣式，設定資訊欄的寬度、容器內的間距（指內容和最外圍框線之間的距離）、背景色和框線色。
完成資訊欄的設計後，回到自訂區，點擊底部選單的「小工具」來設定工具的內容。在影片中，我刪除了系統預設的內容，保留最常用的最新文章、文章分類，你也可以加入其他元素。
決定好要放入的小工具後，點擊你想要修改設定的小工具，會彈出工具列視窗，點擊最右邊的「⁝」會跑出「顯示更多設定」，再按一下，右邊的畫面就會出現設定介面囉！
例如：若想修改小工具的標題文字大小和設計，就可以在「顯示更多設定」那裡進行調整。
5. 設計文章格式
完成頁首、頁尾和資訊欄的設計後，下一步，要針對「網站的主要內容區」來進行設計，包含：文章和頁面。 —— 那我們就先從文章的格式開始吧！
在自訂區裡找到「單篇文章」後點擊進入。在設定之前，記得右邊的畫面要先開啟某一篇文章，這樣邊修改，你才能邊看到即時的畫面。
進入單篇文章的設定區後，我們會先設計文章標題，接著才是文章內文。你可以選擇想要的標題樣式，並決定想呈現什麼資訊在標題裡，包含：文章標題、作者、發佈日期、文章分類等。
設定完標題後，回上一頁，我們要接著設計文章的內文。你可以針對以下項目進行修改：
- 文章結構：調整文章寬度、是否要有資訊欄。
- 內容區樣式：是否「與頁面同寬」或是「固定寬」。
- 內容區域垂直間距：文字內容和最外圍邊線之間的距離。
- 文章元素：精選圖片、文章標籤、分享框、作者框、文章導覽、相關文章、留言區。
請注意，若你調整了某些設定，即時畫面卻沒有顯示的話，可能是因為你的網站中沒有這些內容可以顯示。你必須先新增文章，並在文章裡輸入這些資訊，它才會出現。
教學影片都只是作為示範用途，當知道如何調整之後，就可以客製化自己想要的設計囉！
6. 設計頁面
完成文章的格式設計後，接著進行「頁面」的設計。你會發現，其實設定「頁面和文章」的方式很相似，整個 Blocksy 的設定邏輯是通用的。
參考下方影片，我用「部落格頁面」來示範操作如何修改頁面標題的設計。
設計完頁面標題，回到上一頁，針對「頁面的內容」進行細部的設計。
當完成好一個頁面的設計了，你可以接著將此設計同步修改到這些頁面上，包含：頁面（全部頁面）、文章分類頁面、作者頁面、搜尋頁面，我將這些設定所「對應的頁面」放在影片中。
離完成 WordPress 佈景主題的客製化只剩最後一哩路囉，下個步驟非常重要！
7. 響應式設計
當網站設計都完成以後，最後一件重要的事，就是要讓網站具備「響應式設計」。
而這也是為什麼我們使用 Blocksy 佈景主題的原因之一，它可以幫助我們非常方便地調整響應式的設定。建議你，設計響應式的順序如下：電腦版介面 > 平板電腦介面 > 手機介面。
在調整完不同介面的設定時，試著用 iPad 或手機打開你的網站，實際查看網站在機器上呈現的樣子會更準確。 —— 是不是很簡單呢？現在就開始來完成響應式的設計吧！
結語：朝寫作之路邁進
Blocksy 是我第一次用就從此愛上的佈景主題。本文是最基礎的操作示範，若你想購買付費版，或學習更進階的操作這個佈景主題，我有提供一對一的家教，讓你能省去摸索的迷惘。
若你覺得看完教學還是很困難、沒有時間自己架設網站或客製化網站的設計，你可以寫信給我，由我來幫你完成，這樣就能比較快展開經營部落格的旅程。
希望這篇文章有幫助到你。下個階段，我將要教你如何針對「部落格」來撰寫文章囉！
【 延伸閱讀 】
