佈景主題 (Theme) 決定網站的視覺風格、版面配置與前台輸出方式。本章從使用者角度開始，說明如何挑選、安裝、啟用與調整佈景主題，並建立「哪些修改適合在後台完成、哪些修改應進入程式碼」的判斷能力。

本章學習目標

能分辨傳統佈景主題與區塊佈景主題，完成主題安裝、選單、網站識別、小工具與附加 CSS 調整。

4.1 WordPress 佈景主題

佈景主題是 WordPress 前台的呈現層。相同文章資料套用不同佈景主題後，可能變成部落格、企業網站、作品集或教學網站。主題不應直接負責核心商業資料儲存，否則一旦更換主題，重要功能可能跟著消失。

傳統主題與區塊主題

  • Classic Theme：以 PHP 模板檔為主，例如 index.php、single.php、page.php。
  • Block Theme：支援 Site Editor 與 theme.json，版面可由區塊與模板組成。
  • Hybrid Theme：保留傳統模板，同時支援部分區塊與全站樣式能力。

挑選主題的檢查指標

挑選主題時，不要只看截圖是否漂亮，也要看維護狀態與相容性。

  • 最近更新時間是否接近目前 WordPress 版本。
  • 是否支援響應式設計與行動裝置。
  • 是否避免綁定過多短代碼或頁面建構器。
  • 是否有清楚文件、評價與支援管道。
  • 是否有良好效能，首頁不要載入過多未使用資源。

4.2 佈景主題編輯功能

後台「外觀」區域提供許多不需寫程式即可完成的設定。使用者應先善用後台功能，避免一開始就修改主題檔案。

自訂器與網站識別

傳統主題常使用「外觀 → 自訂」調整網站標題、標語、Logo、網站圖示、色彩、選單與小工具。這些設定會儲存在資料庫中，不會直接修改主題檔案。

站台編輯器與模板

區塊主題使用「外觀 → 編輯器」調整頁首、頁尾、單篇文章、頁面與封存模板。編輯器的好處是彈性高，但也需要理解模板與內容的差異，避免把一次性內容寫進全站模板。

選單、小工具與樣式

選單負責網站導覽，小工具常用於側欄與頁尾。若網站內容較多，建議先規劃資訊架構，再建立選單層級，避免導覽過深或名稱不一致。

4.3 動手調整佈景主題

如果只需要調整少量外觀，可以先使用「附加 CSS」。例如調整文章標題顏色與卡片間距：

.site-title { color: #2563eb; }
.post-card { margin-bottom: 24px; }
.post-card .entry-title { font-size: 1.5rem; }

調整流程建議

  1. 先確認需求是內容、外觀還是功能。
  2. 後台能完成的先用後台設定。
  3. 少量樣式用附加 CSS。
  4. 大量版面修改使用子佈景主題或自訂主題。
  5. 功能型需求寫成外掛。

本章練習

  1. 安裝一個官方主題並啟用。
  2. 設定網站標題、Logo、網站圖示與主選單。
  3. 新增一段附加 CSS 改變文章標題顏色。
  4. 比較傳統主題與區塊主題的編輯入口差異。