要一次改 WordPress 全站的顏色和字體，用的是佈景主題 GeneratePress 的自訂。顏色在「外觀 → 自訂 → Colors」改 Global Colors 的全域色票，字體在「Typography」把想用的 Google 字型加進來，指定給內文和標題。設定一次、按發佈，整站就會一起換，之後用 GenerateBlocks 排版面，區塊的色盤裡也直接顯示這組顏色。
我們用好喝咖啡的首頁示範，把整站換成咖啡色系加思源黑體。任何用區塊排好的頁面都可以照著做，色碼換成你自己的就行。示範用的三個顏色：內文 #3B2A20 深焙棕、背景 #F5EFE6 奶油米、主色 #6F4E37 咖啡棕。
快速重點
| 製作需求 | 在哪裡做 |
|---|---|
| 換整站的背景、文字、連結顏色 | 自訂器 Colors，改 Global Colors 的三顆色票 |
| 換全站字體、標題粗細 | 自訂器 Typography，加字型後指定給 Body 和 All Headings |
| 某個區塊的顏色沒跟著變 | 把區塊的顏色改選色盤裡的全域色，不要自己填色碼 |
1.到後台點「外觀」，選「自訂」
全站的顏色和字體都在自訂器裡設定。點後台左側選單的「外觀」，再點「自訂」。
2.點「Colors」進顏色設定
自訂器左欄點「Colors」。GeneratePress 自己的區段名稱顯示英文（Colors、Typography），其他項目是中文，畫面長這樣就沒走錯。這些設定是主題內建的，GeneratePress 免費版就有。
3.把三顆全域色票改成品牌色，按「發佈」
最上面「Global Colors」那排圓色票就是全站的色盤，整個網站都從這裡拿顏色。點色票會打開選色器，把下面的色碼換掉，右邊的預覽馬上跟著變。七顆只要改三顆：
- 第一顆 contrast，管內文和標題的顏色。示範改 #3B2A20 深焙棕
- 第五顆 base-2，管整站背景色。改 #F5EFE6 奶油米
- 最後一顆 accent，管連結和重點色。改 #6F4E37 咖啡棕
其他四顆不用動。三顆改完，按上方的「發佈」，顏色才會真的存進網站。
4.回上一層點「Typography」，按「Add Font」加入字型
點左上角的返回箭頭回到選單，點「Typography」。按「Add Font」，搜尋框輸入 Noto Sans TC，這是思源黑體在 Google 字型庫的名字。清單跳出來後，點「Noto Sans TC」加入。
5.按「Add Typography」，把內文換成新字型
字型加進來了，還要指定用在哪裡。按「Add Typography」，Target Element 清單選「Body」，再把 Font Family 選成 Noto Sans TC，全站內文就換好了。
6.再加一條「All Headings」讓標題略粗，按「發佈」
再按一次「Add Typography」，這次 Target Element 選「All Headings」，Font Family 一樣選 Noto Sans TC，Font Weight 選 500。全部標題會比內文粗一階，不用一個一個改。選了字型之後，Font Weight 清單只會剩這個字型有的粗細，是正常的。設定完按「發佈」。
7.把卡片的底色改選全域色
回到頁面編輯器會發現，背景和文字都換了，卡片的底色卻還是原本的淺藍灰。因為那是當初直接填在區塊裡的色碼，全域設定不會動它。
開左上角的清單檢視，點卡片的 Container，右欄切到樣式分頁（半圓圖示），打開「Backgrounds」，點 BACKGROUND COLOR 的圓色票。色盤最下面一排就是全域色，點奶油米那顆 base-2，其他卡片照做。以後幫任何區塊選色都優先從這排挑，之後改全域色票，它們才會跟著變。
8.到前台看整站效果
存檔後到前台整頁看一次。背景、文字、連結、標題、卡片，同一組品牌色、同一套字體。之後想換風格，回自訂器改那三顆色票就好，整站跟著換。
常見問題
為什麼有些區塊的顏色沒有跟著變？
全域設定只影響沒有另外指定顏色的地方。區塊裡直接填過色碼的，會維持原樣。把那個顏色改選色盤裡的全域色票，之後改全域色它就會跟著變。
在自訂器改了設定，網站怎麼沒變？
自訂器的變更要按上方的「發佈」才會生效。只改不發佈，網站不會變，離開自訂器後這些變更也不一定會留著，改完記得按發佈。
標題可以用跟內文不同的字型嗎？
可以。Typography Manager 一條設定管一個對象，Body 管內文，All Headings 管全部標題，也有 Heading 1（H1）這種單一層級可以選。每一條都能設定各自的字型、粗細和大小。
下一步
換成你自己的品牌色，做法一模一樣：挑深、中、淺三個色碼，分別給 contrast、accent、base-2。還沒有品牌色，就從 Logo 或店面照片裡挑一深一淺，深的當文字、淺的當背景，再挑一個搶眼的當主色。
版面還沒排出來的話，先從認識三個基本區塊開始：WordPress 網頁怎麼排版？認識 GenerateBlocks 的容器、網格、標題。
照著做如果畫面跟這裡不一樣，或者不確定版面該怎麼安排、想連整個網站外包給我們製作，歡迎與我們聯絡。