WordPress 佈景主題怎麼組成：範本檔案、範本標籤與子佈景主題

想改一下網站的版面，打開佈景主題資料夾，一堆檔案不知道從哪裡下手；好不容易改好了，佈景主題一更新，改的東西全部不見。

這篇說明 WordPress 佈景主題是由哪些檔案組成、WordPress 怎麼決定一個頁面要用哪個檔案，最後一步一步做出子佈景主題，讓你的修改不會被更新蓋掉。

兩種佈景主題

現在的 WordPress 佈景主題分成兩種，結構不一樣：

• 傳統佈景主題：版面用 PHP 檔案寫，例如 Twenty Twenty-One。在 外觀 → 自訂 調整設定。
• 區塊佈景主題：版面用區塊組成，存成 HTML 檔案，例如 Twenty Twenty-Five。在 外觀 → 編輯器 用拖拉的方式改版面。

傳統佈景主題有哪些檔案

twentytwentyone/
├── style.css        ← 佈景主題的名稱、版本寫在這裡，也放 CSS
├── functions.php    ← 載入樣式、註冊選單、加功能
├── index.php        ← 最後的備用範本，一定要有
├── header.php       ← 每一頁上方（Logo、選單）
├── footer.php       ← 每一頁下方（頁尾）
├── single.php       ← 單篇文章
├── page.php         ← 頁面
├── archive.php      ← 分類、標籤、日期的文章列表
├── search.php       ← 搜尋結果
├── 404.php          ← 找不到頁面
└── template-parts/  ← 拆出來重複使用的小區塊

WordPress 怎麼挑範本：範本層級

打開一個網址，WordPress 會從最「專門」的檔名開始找，找不到就往下一個，最後一定會用到 index.php。幾個常見的順序：

• 單篇文章：single-post-文章代稱.php → single-post.php → single.php → singular.php → index.php
• 頁面：頁面設定裡選的自訂範本 → page-頁面代稱.php → page-編號.php → page.php → singular.php → index.php
• 分類列表：category-分類代稱.php → category-編號.php → category.php → archive.php → index.php
• 首頁：front-page.php →（首頁顯示最新文章時）home.php → index.php

所以想讓「關於我們」這一頁長得跟其他頁面不一樣，做一個 page-about.php（about 是頁面的代稱）就好，不用動到 page.php。

想知道某一頁到底用了哪個範本，可以裝 Query Monitor 外掛，前台工具列會顯示目前用的範本檔案。

常用的範本標籤

範本檔裡用來輸出內容的函式，叫做「範本標籤」，最常見的有：

• get_header()、get_footer()：載入 header.php、footer.php
• the_title()、the_content()：文章標題、內容
• the_permalink()：文章網址
• the_post_thumbnail()：精選圖片
• get_template_part( 'template-parts/content' )：載入拆出來的小區塊
• wp_head()、wp_footer()：讓 WordPress 和外掛在這裡加入需要的程式，一定不能刪，刪了很多外掛會失效

區塊佈景主題有哪些檔案

twentytwentyfive/
├── style.css        ← 名稱、版本
├── theme.json       ← 顏色、字型、間距等設定和樣式
├── functions.php    ← 選用
├── templates/       ← 範本：index.html、single.html、page.html、archive.html…
├── parts/           ← 範本組件：header.html、footer.html
└── patterns/        ← 區塊版面配置（預先排好的區塊組合）

範本的檔名和挑選順序跟傳統佈景主題一樣，只是副檔名從 .php 變成 .html，裡面放的是區塊。

要注意的是：在 外觀 → 編輯器 改過的範本，會存在資料庫裡，優先於檔案。所以有時候改了檔案卻沒變化，是因為編輯器裡已經存過一個修改的版本。

為什麼要用子佈景主題

直接改佈景主題的檔案，下次佈景主題更新，檔案會被整個換掉，你改的東西就不見了。

子佈景主題是一個只放「你要改的部分」的佈景主題，其他全部沿用原本的佈景主題（稱為母佈景主題）。母佈景主題更新時，子佈景主題的檔案不會被動到。

建立的方法：在 wp-content/themes/ 底下新增一個資料夾，放進下面的檔案，再到 外觀 → 佈景主題 啟用它。

做法一：傳統佈景主題的子佈景主題

以 Twenty Twenty-One 為例，資料夾叫 twentytwentyone-child。

style.css：

/*
Theme Name: Twenty Twenty-One 子佈景主題
Template:   twentytwentyone
Version:    1.0.0
*/

/* 自己的樣式寫在這裡，例如文章裡的連結換成品牌色 */
.entry-content a {
	color: #1e8a8a;
}

• Template: 一定要寫，而且要和母佈景主題的資料夾名稱一模一樣（不是顯示的名稱）。
• Theme Name: 是在後台看到的名稱，可以自己取。

functions.php：

<?php
// 載入子佈景主題的 style.css，排在母佈景主題的樣式後面
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'zw-child-style',
		get_stylesheet_uri(),
		array( 'twenty-twenty-one-style' ), // 母佈景主題樣式的代號
		wp_get_theme()->get( 'Version' )
	);
} );

子佈景主題的 style.css 不會自己載入，要在 functions.php 加這段。array( 'twenty-twenty-one-style' ) 是說「排在母佈景主題的樣式後面」，這樣你寫的樣式才蓋得過原本的。

每套佈景主題載入樣式的代號不一樣。不確定的話，在網頁按右鍵「檢視原始碼」，找 <link rel="stylesheet" id="…-css"，id 去掉最後的 -css 就是代號。

少數母佈景主題載入的是「目前啟用的佈景主題」的 style.css，換成子佈景主題後，載入的反而是子佈景主題的檔案、母佈景主題的樣式不見了。啟用子佈景主題後一樣看原始碼：母佈景主題的 style.css 有出現就沒問題；沒出現，就要在 functions.php 另外把母佈景主題的樣式載入。

做法二：區塊佈景主題的子佈景主題

以 Twenty Twenty-Five 為例，資料夾叫 twentytwentyfive-child。只有 style.css 是必要的，其他檔案用到再放。

style.css：

/*
Theme Name: Twenty Twenty-Five 子佈景主題
Template:   twentytwentyfive
Version:    1.0.0
*/

/* 需要的話，自己的樣式寫在這裡 */
.wp-block-post-date {
	font-weight: bold;
}

theme.json（選用）：只寫要改的設定，其他會沿用母佈景主題。這個例子把連結顏色改成品牌色：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"styles": {
		"elements": {
			"link": {
				"color": { "text": "#1e8a8a" }
			}
		}
	}
}

templates/single.html（選用）：放一個和母佈景主題同名的範本，就會取代原本的文章頁範本：

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
	<!-- wp:post-title {"level":1} /-->
	<!-- wp:post-date /-->
	<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
	<!-- wp:paragraph -->
	<p>這段文字只會出現在子佈景主題的文章頁。</p>
	<!-- /wp:paragraph -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

functions.php（style.css 裡有寫 CSS 才需要）：

<?php
// 區塊佈景主題不會自動載入子佈景主題的 style.css，要自己載入
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'zw-child-style',
		get_stylesheet_uri(),
		array( 'twentytwentyfive-style' ),
		wp_get_theme()->get( 'Version' )
	);
} );

區塊佈景主題的樣式主要寫在 theme.json，子佈景主題的 style.css 預設不會被載入，裡面寫了 CSS，就要加這段。

實際測試的結果

在測試網站上分別啟用母佈景主題和子佈景主題，用同一篇有連結的文章比較：

Twenty Twenty-One

• 母佈景主題：只載入母佈景主題的 style.css，文章連結是深灰色。
• 子佈景主題：先載入母佈景主題的 style.css，再載入子佈景主題的 style.css，文章連結變成青綠色。文章頁用的範本還是母佈景主題的 single.php，因為子佈景主題裡沒有放這個檔案，WordPress 就往母佈景主題找。

Twenty Twenty-Five

• 母佈景主題：連結是黑色，日期是細字。
• 子佈景主題：連結變成青綠色（theme.json 生效）；文章頁用的是子佈景主題的 single.html，多了那一行說明文字；日期變成粗體（style.css 透過 functions.php 載入成功）。
• 測試時先沒有放 functions.php，子佈景主題 style.css 裡的 CSS 完全沒有作用，加上之後才生效。

小提醒

• 先在測試環境做。functions.php 少一個分號，整個網站就打不開。萬一發生了，用 FTP 把子佈景主題的資料夾改名，網站會換回預設佈景主題，就能進後台處理。做法請看WordPress 出現 500 錯誤怎麼辦？。
• 不要在後台的「佈景主題檔案編輯器」直接改，改錯了沒有復原鍵。
• 只想改一點 CSS，用「附加的 CSS」就好，不一定要做子佈景主題。

延伸閱讀

• WordPress functions.php 實用程式碼整理：10 個常用又安全的小技巧
• Joomla 樣板覆寫（Template Override）教學：不改核心，修改文章與模組的輸出
• WordPress 頁面怎麼執行 PHP？自訂短代碼、頁面範本的安全做法

佈景主題改得好，網站才會有自己的樣子，而不是跟別人一模一樣。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計，台北與全台客戶也歡迎來聊聊。