同一套佈景主題下,所有頁面長得幾乎一樣:一樣的側邊欄、一樣的版面寬度、一樣的頁首頁尾。但有些頁面就是需要長得不一樣,例如一頁式的銷售頁要去掉側邊欄、活動報名頁想用全寬版面、Landing Page 連頁首頁尾都不要。這時候硬改 page.php 會牽動全站,正確做法是替這些頁面建立專屬的自訂頁面範本。
WordPress 自訂頁面範本(Page Template)就是一個獨立的範本檔,套用在某一個頁面或某一類頁面上,讓它跳脫佈景主題的預設版面,卻不影響其他頁面。這篇會把兩條路線講清楚:傳統佈景主題用 PHP 檔加一行註解,區塊佈景主題用網站編輯器點幾下就能完成。也會帶到只給特定頁面吃的 page-{slug}.php、讓範本同時支援文章與 WooCommerce 商品的進階寫法,以及套了沒反應時該怎麼排查。
自訂頁面範本是什麼,跟一般頁面差在哪
自訂頁面範本是一個獨立的版型檔案,可以指定套用在單一頁面、某個頁面區塊,或是同一類頁面上。它的存在是為了讓某些頁面擁有跟其他頁面不同的外觀,而不必動到佈景主題的共用檔案。
WordPress 預設用佈景主題裡的 page.php 來渲染所有「頁面」這種內容類型。也就是說,關於我們、聯絡我們、服務介紹這些頁面,在沒有任何客製化的情況下都共用同一個版型。一旦你想讓其中某一頁變成全寬、拿掉側邊欄,或塞進一段只有那頁才需要的程式邏輯,自訂頁面範本就是標準解法。
範本的特性是「指定性高」。一個叫 page-about.php 的範本,比 page.php 或 index.php 更精準,因為它只會作用在 slug 為 about 的那一頁。換句話說,範本越專屬,套用範圍就越窄,這正是它不會誤傷其他頁面的原因。
要注意,這裡講的是「頁面」(Page)這種內容類型專用的範本,跟文章(Post)的單篇範本、彙整頁範本是不同層級的東西。雖然從 WordPress 4.7 起,頁面範本也能擴充到文章與自訂內容類型上,這點稍後會單獨說明。
WordPress 怎麼決定要用哪一個範本
WordPress 在渲染一個頁面時,會依照「範本層級」(Template Hierarchy)由上而下找檔案,找到第一個存在的就用它,順序如下:
- 頁面範本(Page Template)——如果這個頁面在後台被指定了某個自訂範本,WordPress 直接用它
- page-{slug}.php——沒指定自訂範本時,找檔名含該頁 slug 的專屬範本,例如 page-about.php
- page-{id}.php——找不到 slug 版,再找以頁面 ID 命名的範本,例如 page-6.php
- page.php——再找不到,用佈景主題的預設頁面範本
- singular.php——連 page.php 都沒有,退到單篇內容通用範本
- index.php——什麼都沒有時,最後退回佈景主題的首頁索引檔
理解這個順序很重要,因為它解釋了兩種完全不同的指定方式。第一種是「後台手動指定」:你建一個有名字的範本,到頁面編輯畫面手動選它。第二種是「依檔名自動對應」:你把檔案命名成 page-about.php,WordPress 看到網址是 about 那頁就自動套用,使用者完全不用在後台選。前者彈性、可重複用;後者隱形、綁死某一頁。
舉個實例。你的「關於」頁 slug 是 about、ID 是 6,只要佈景主題資料夾裡有 page-about.php 或 page-6.php,WordPress 就會自動拿它來渲染這頁,不需要任何後台設定。slug 版優先於 ID 版,因為 slug 比較穩定、ID 換主機搬站可能會變。
傳統佈景主題怎麼用 PHP 建立全域範本
傳統(Classic)佈景主題靠 PHP 檔當版型,建立自訂頁面範本只要在檔案最上方加一行特定格式的註解,WordPress 就會認得它是範本。
動手前先做一件事:建立子佈景主題(Child Theme),把自訂範本放進子主題。直接改父主題的檔案,下次父主題更新就會被覆蓋,你的修改全部消失。子主題能繼承父主題的所有功能,又能安全地放客製化檔案。
第 1 步、建立範本檔。打開純文字編輯器(例如 Notepad++、VS Code),最上方寫入這段註解,告訴 WordPress 這是一個範本:
<?php /* Template Name: 全寬版面 */ ?>
範本名稱會顯示在後台的範本選單裡,取一個看得懂用途的名字,例如「全寬版面」「無側邊欄」「銷售頁」。檔名則另外取,用 .php 結尾即可,例如 template-full-width.php。
第 2 步、補上版型內容。空白範本套上去會是一片空白頁,因為檔案裡還沒有任何輸出。最快的做法是複製佈景主題現有的 page.php 內容,貼到範本註解下面,這樣就先繼承了原本頁面的結構,再依需求增減。例如要拿掉頁尾,就刪掉這一行:
<?php get_footer(); ?>
完整的範本檔骨架會長這樣:
<?php
/* Template Name: 全寬版面 */
get_header();
?>
<main class="full-width">
<?php
while ( have_posts() ) :
the_post();
the_content();
endwhile;
?>
</main>
<?php get_footer(); ?>
第 3 步、上傳到佈景主題資料夾。透過 FTP 工具(例如 FileZilla)或主機後台的檔案管理員,把這個檔案放進 wp-content/themes/你的子主題/ 底下。為了整潔,建議在主題裡開一個 page-templates 子資料夾專門放全域範本,WordPress 認得這個資料夾命名。
第 4 步、到後台指定。進入頁面的編輯畫面,在右側「頁面」設定的「範本」(Template)欄位,就會看到你剛建的「全寬版面」可選。選好後更新,前台就會套用新版型。要提醒的是,後台範本選單寬度上限約 250 像素,名字太長會被截斷,命名別貪長。
這種有名字的範本屬於「全域範本」,任何頁面都能在後台選用它。如果你想把某個版型開放給多個頁面共用,這就是正確做法。
只想綁定單一頁面時的命名技巧
當你的範本只服務某一個特定頁面、不希望它出現在後台的範本選單裡被別人誤套,就改用「依檔名自動對應」的方式,連 Template Name 註解都不用寫。
做法是複製 page.php,把新檔案命名成該頁的 slug 或 ID:
- page-{slug}.php,例如 page-contact.php
- page-{ID}.php,例如 page-12.php
檔案放進佈景主題資料夾後,WordPress 渲染對應頁面時會自動抓它,使用者在後台完全看不到、也不用選。slug 版本比 ID 版本可靠,因為頁面 ID 可能因為搬站或重建而改變,slug 通常更穩定。
這裡有個容易踩的坑:如果你要建立的是「全域、給任何頁面用」的範本,檔名千萬不要用 page- 當開頭。WordPress 看到 page- 開頭就會把它當成「只綁某一頁」的專屬範本,導致它不會出現在後台的範本選單。想分組命名全域範本,可以改用底線,例如 page_two-columns.php,避開被誤判的問題。
簡單記憶:page- 開頭等於「自動綁定、後台隱形」;其他命名加上 Template Name 註解等於「全域可選、後台顯示」。兩者依需求擇一,不要混用。
區塊佈景主題改用網站編輯器,不寫程式碼
區塊(Block)佈景主題走的是完全不同的路線。它不靠 PHP 檔,而是用網站編輯器(Site Editor)以視覺化方式拉版型,範本以 HTML 區塊標記儲存,編輯後寫進資料庫,成為 wp_template 這種自訂內容類型的資料。對不想碰程式碼的使用者,這條路門檻最低。
操作流程是這樣。先到後台「外觀」點「編輯器」,進入網站編輯器。左側切到「範本」,點「新增」,捲到底選「自訂範本」,取一個名字後建立。接著打開「列表檢視」,把不要的區塊移掉,例如想做 Landing Page 就把頁首、頁尾區塊刪掉,只保留「文章內容」(Post Content)區塊,因為頁面的所有內容都是透過這個區塊顯示的。需要的話,再插入你事先做好的自訂頁首、頁尾。
範本存好後,回到後台打開要套用的頁面,在右側設定把範本從「預設」改成你新建的那一個,更新即可。前台其他頁面維持原本的頁首頁尾,只有這一頁換成新版型。網站編輯器的側邊欄也提供直接「編輯範本」或「新增自訂範本」的入口,操作路徑不只一條。
這套做法的彈性在於,你能替不同類型的內容做不同版型。例如書評頁和影評頁各做一個自訂範本,分別在裡面用「查詢迴圈」(Query Loop)區塊掛上不同的分類篩選,就能讓兩種頁面呈現各自的清單與橫幅。同樣的邏輯也適用在 Landing Page,去掉頁首頁尾、只留內容區塊,做出一頁乾淨、適合放社群或電子郵件導流的版面。
判斷自己該走哪條路其實很單純:如果佈景主題的版型是在「外觀 → 編輯器」裡用區塊改的,你是區塊主題,用網站編輯器;如果版型藏在一堆 .php 檔、要靠「外觀 → 自訂」和小工具調整,你是傳統主題,走 PHP 那條路。
讓範本同時支援文章與 WooCommerce 商品
從 WordPress 4.7 起,原本只給「頁面」用的自訂範本,可以擴充套用到文章、商品等其他內容類型上。做法是在範本名稱下面多加一行 Template Post Type,列出你要支援的內容類型:
<?php
/*
Template Name: 全寬版面
Template Post Type: post, page, product
*/
上面這個例子,讓這個範本同時能套在文章(post)、頁面(page)與 WooCommerce 商品(product)上。當某個內容類型至少有一個可用範本時,該類型的編輯畫面就會自動出現「內容屬性」設定框,讓你選範本,不需要額外開啟 page-attributes 支援。
對經營 WooCommerce 商店的人來說,這代表你可以替特定商品做專屬版型,例如某檔主打商品想要一頁式的長銷頁,就建一個支援 product 的範本指定給它,其他商品照舊用佈景主題的預設商品頁。這裡只談版型套用,實際的金流、結帳設定是另一套系統,跟頁面範本無關。
如果你打算把帶有 Template Post Type 的佈景主題公開釋出,要留意舊版相容性。WordPress 4.7 以前的版本會忽略 Template Post Type 這行,把只該給文章用的範本錯誤地列在頁面範本清單裡。要避免這個狀況,可以掛上 theme_page_templates 篩選器,在偵測到 WordPress 版本低於 4.7 時把它從清單排除。實務上現在絕大多數網站都遠高於 4.7,只有打算給廣大不特定使用者用的佈景主題才需要特別處理這層相容。
套了沒反應或選單沒出現時怎麼排查
建好範本卻沒生效,多半卡在幾個固定環節,照著對一遍通常就能找出問題。
範本選單裡找不到你的範本,先確認三件事。第一、檔案最上方的 Template Name 註解格式有沒有寫對,少了星號或寫錯位置 WordPress 就認不得。第二、檔案是不是真的放在「目前啟用」的佈景主題資料夾裡,放錯成另一套沒啟用的主題不會出現。第三、檔名是不是不小心用了 page- 開頭,那會被當成自動綁定的專屬範本,本來就不該出現在選單。
套了範本但前台一片空白,原因通常是範本檔裡沒有實際輸出內容。空範本只有一行註解,當然渲染不出東西,把 page.php 的內容複製進來、保留 get_header() 與 the_content() 這類迴圈才會有畫面。
改了範本卻看不到變化,先想到快取。網站若裝了快取外掛或經過 CDN,前台可能還在吃舊版本,清一次快取再看。瀏覽器本身的快取也建議一併清掉或用無痕視窗測試。
想在程式裡確認頁面到底套了哪個範本,WordPress 有幾個內建函式可用。is_page_template() 回傳這頁有沒有用自訂範本、get_page_template() 回傳目前用的範本檔路徑、get_page_template_slug() 回傳指定的範本檔名。頁面一旦被指定範本,檔名會存在 wp_postmeta 資料表裡一個叫 _wp_page_template 的欄位。另外,body_class() 函式會在 body 標籤輸出對應的 class,例如套了自訂範本會出現 page-template 與類似 page-template-my-custom-page-php 的 class,從前台檢視原始碼就能驗證是否套對。
從建立到套用,該選哪一條路
回到最初的需求:你只是想讓某幾頁長得不一樣,又不想牽動全站。傳統佈景主題就加一行 Template Name 註解、複製 page.php 補內容、上傳到子主題;只綁單一頁面則改用 page-{slug}.php 自動對應。區塊佈景主題完全不用碰程式,到網站編輯器新增自訂範本、刪掉不要的區塊、回頁面指定即可。
決定路線前先看自己的主題是哪一種,再依「要不要重複用」決定全域範本或單頁範本。建立任何 PHP 範本前先開好子主題,是少數最該養成的習慣,能省下日後主題更新覆蓋掉成果的麻煩。把範本層級的順序記在腦裡,遇到套了沒反應時就能快速定位是命名、放置位置還是快取的問題,而不是反覆重做。先用一個低風險的測試頁實際走一遍流程,確認版型如預期後再套到正式頁面,是最穩的上線方式。