在開發 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 自動對應模板檔案。步驟如下：

1. 在主題資料夾建立檔案，命名規則為 page-{slug}.php，其中 {slug} 是頁面的 URL slug。例如頁面 URL 是 demo，檔案命名為 page-demo.php。

2. 在 WordPress 後台建立一個 URL 為 demo 的頁面。

3. 前端訪問該頁面時，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(); ?>