前言
在開發 WordPress 網站時，常常會遇到預設頁面模板無法滿足客戶需求或套版限制的情況。這時候，我們可以透過頁面繼承的方式，為特定頁面建立客製化的 HTML 架構與內容呈現。本文介紹兩種常用的客製化頁面繼承方法，適合有基礎程式能力的工程師或自學者參考。
方式1：建立繼承模板的方式（可複用）
第一步，在主題資料夾下建立一個新的模板檔案，例如 page-extended.php。檔案名稱可自訂，但避免使用中文。
在檔案開頭加入模板名稱註解，讓 WordPress 後台能辨識此模板：
<?php
/*
Template Name: extended
*/
//get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<h1>我是被繼承的頁面</h1>
<p>繼承頁面可以自己客制想要的html架構等等...</p>
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php //get_footer(); ?>完成後，進入 WordPress 後台新增或編輯頁面，在「頁面屬性」的模板下拉選單中選擇剛剛建立的模板名稱，更新後前端頁面即會套用此模板。
此方法的優點是模板可重複使用，方便管理與維護。
方式2：針對頁面 URL 的繼承方式（限定特定頁面）
此方法是依照頁面 URL 自動對應模板檔案。步驟如下：
-
在主題資料夾建立檔案，命名規則為
page-{slug}.php，其中{slug}是頁面的 URL slug。例如頁面 URL 是demo，檔案命名為page-demo.php。 -
在 WordPress 後台建立一個 URL 為
demo的頁面。 -
前端訪問該頁面時，WordPress 會自動載入
page-demo.php，呈現該檔案內的 HTML 架構與內容。
此方法適合針對少數特定頁面做客製化，且不需在後台額外選擇模板。
實際應用與延伸
- 若有多個頁面需要相似結構，可使用方式1建立共用模板，減少重複程式碼。
- 方式2適合快速針對單一頁面做獨立設計。
- 兩種方法可搭配使用，依需求選擇最合適的方案。
常見坑
- 模板檔案命名錯誤會導致 WordPress 無法正確載入。
- 忘記在模板檔案開頭加上
Template Name註解，後台不會顯示自訂模板。 - 使用方式2時，URL slug 必須與檔案名稱完全對應。
完整程式碼
<?php
/*
Template Name: extended
*/
//get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<h1>我是被繼承的頁面</h1>
<p>繼承頁面可以自己客制想要的html架構等等...</p>
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php //get_footer(); ?><?php
// page-demo.php
// 這是針對 URL slug 為 demo 的頁面客製化模板
//get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<h1>Demo 頁面客製化內容</h1>
<p>這裡是 page-demo.php 的 HTML 架構與內容。</p>
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php //get_footer(); ?>