WordPress模板層次11：定製頁面模板

預設情況下，我們使用page.php檔案來輸出頁面的內容。這小節，我們學習如何定製特定的頁面模板。

預設的通用頁面模板page.php

開啟page.php檔案，並新增一個TEST測試程式碼：

<?php get_header(); ?>

    <div class="container" role="main">

        <div class="row">
            <div class="col-md-8">
TEST/***這是新增的測試程式碼***/
                <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

重新整理Home頁面，可以看到新增的測試程式碼，這就說明了這裡使用的都是通用的 page.php 模板。

通過頁面id，定製頁面模板

例如，來到WordPress後臺，編輯About頁面，可以看到它的post值是115:

所以，開啟page.php模板，先刪除TEST程式碼，然後，將 page.php 另存為 page-115.php。

然後，在page-115.php中新增 TEST ABOUT 來測試它是否正常工作：

來到網站前臺，檢視About頁面，可以看到測試程式碼就出現在About頁面上。

但是，如果去到Home頁面，就沒有這個測試程式碼。因為Home頁面的ID不是115.

那麼這表明：可以通過使用頁面ID號來定製特殊頁面的輸出。

通過頁面名稱，定製頁面模板

實際上，這只是定製特殊頁面的一種方式，我們還可以通過頁面名稱來定製。

About頁面的名稱是About。所以我們把page-115重新命名為page-about.php，然後新增新的測試程式碼NEW ABOUT：

來到網站前臺，檢視About頁面，可以看到測試程式碼就出現在About頁面上。

同樣地，也可以驗證，它並沒有被應用於其他頁面。

自定義模板custom.php

其實，還有另一種方式，那就是建立一個所謂的自定義模板custom.php:

在主題中，我已經準備好了一個自定義頁面模板：page-full-width.php。

可以看到它看起來與其他的頁面完全一樣，不同的是：它沒有使用get_sidebar()，並且它的樣式是12列而不是8列：

在模板的最上方，可以看到，這裡有一個PHP註釋TemplateName，然後是模板的名稱Full Width：

<?php 

/*
    Template Name: Full Width
*/

?>

這裡需要特別提醒大家的一點是：如果我們以後建立任何模板檔案，大部分時候，我們會把註釋新增PHP檔案的頂部。有了註釋之後，當我們編輯一個頁面時，就可以看到在預設模板中，這個註釋對應的選項就可用。

所以，我們試著把About頁面的模板設定為：Full width，那麼，About頁面就使用的是自定義的page-full-width.php頁面模板。

這時，再檢視頁面，將會看到這個全寬模板正在顯示。

請注意，它也自動覆蓋了page-about.php模板，因為我們已經手動告訴WordPress：我們不想使用預設模板，而是使用自定義的全寬模板page-full-width.php。

也可以模板結構圖中看到，這裡的優先順序是從custom.php，到page-slug.php，再到page-id.php。

所以，學會了這些，就可以定製任何想要定製的頁面了。

• 本文固定連結: http://www.xuhss.com/theme-dev/template-hierarchy/custom-page-template
• 轉載請註明: MrBang <time>2018年02月26日 </time>於 虛幻私塾 發表