如何創建自定義 WordPress 頁面模板

已發表: 2022-05-30

WordPress 主題中的頁面模板有助於確定網站內頁面的佈局。然而，調整這些模板有時可能會令人生畏，尤其是對於初學者而言。幸運的是，通過允許您在主題中創建自定義頁面模板，WordPress 在頁面模板方面提供了相當大的靈活性。

為您的站點創建自定義頁面模板使您能夠根據自己的喜好輕鬆調整站點的佈局和設計。它還允許您添加自定義要求，例如為不同頁面使用不同的標題。這些更改實際上可以應用於不同的頁面或單個頁面。

在本文中，我們將研究什麼是自定義 WordPress 頁面模板、默認頁面模板層次結構，以及如何在您的主題中創建自定義 WordPress 頁面模板。

什麼是自定義 WordPress 頁面模板

WordPress 頁面模板層次結構

創建自定義頁面模板

如何創建全局自定義模板
創建單個頁面模板

結論

什麼是自定義 WordPress 頁面模板

自定義 WordPress 頁面模板是一個模板文件，可讓您對自己的網站進行單獨的設計和感覺。

例如，如果您的站點中有博客主題，您可以為您的站點創建一個自定義模板，該模板不會呈現側邊欄或評論。您還可以為頁面創建模板，其中有一個模板呈現盒裝佈局和另一個全寬佈局的內容。您可以創建的頁面模板數量沒有限制。

頁面的呈現由 WordPress 中的 page.php 文件控制。因此，該文件構成了呈現頁面內容的默認基礎，並且位於主題文件的根目錄中，如下圖所示。

如果有更多特定的頁面模板，那麼模板層次結構就會啟動。

WordPress 頁面模板層次結構

頁面模板層次結構確定 WordPress 在顯示頁面時選擇哪個模板文件，具體取決於發出的請求的性質以及它在主題中的存在。

默認的 WordPress 模板層次結構如下：

頁面模板：WordPress 檢查分配給頁面的模板並在頁面中使用此模板

page-{slug}.php ：如果沒有為頁面分配模板，WordPress 然後檢查帶有 slug 的模板到頁面並在找到時應用它。

slug 是頁面 URL 中域名之後的一部分，可以編輯。下面是一個示例說明。

page-{id}.php ：如果沒有找到帶有 slug 的模板，WordPress 將檢查是否存在帶有要呈現的頁面的頁面 ID 的頁面模板。

page.php ：如果沒有找到帶有頁面 id 的模板，WordPress 將使用標準 page.php 模板來呈現頁面。

單數.php ：如果找不到 page.php 文件，WordPress 將使用單數.php 文件，而不管帖子類型如何。

index.php ：如果以上模板都不可用，WordPress 默認使用 index.php 文件呈現頁面。

因此，您的 WordPress 環境中的頁面呈現可以通過上述任一頁面模板來執行。因此，由您決定要設置的優先級。

創建自定義頁面模板

在您的主題中創建自定義頁面模板非常容易。但是，您需要確定頁面模板是用於單個頁面還是任何頁面。

在本指南中，我們將研究如何在 Stax 主題中手動創建全局頁面模板，以及為我們的一個頁面創建單個頁面模板。

如何創建全局自定義模板

有時您想創建一個可以在您網站內的任何頁面上全局使用的頁面模板。

為此，您需要首先確定要使用的文本編輯器，例如 Notepad、Notepad ++、sublime text 或您喜歡的任何其他編輯器。

完成後，您可以通過執行以下操作開始創建模板文件：

步驟 1：創建一個新文件並添加以下代碼：

 <?php /* Template Name: PageWithNoFooter */ ?>

我們建議使用您網站中可能擁有的任何其他頁面模板中未使用的模板名稱，以及您可以輕鬆識別並與您的網站頁面相關的名稱。

完成後，使用 .php 擴展名保存新頁面模板。在我們的例子中，我們將模板文件命名為 pagewithnofooter.php 。您可以使用您喜歡的任何名稱，但更建議使用與您的模板名稱相似的名稱。

第 2 步：將所需的代碼添加到文件中

在此步驟中，您可以將首選代碼添加到文件中，無論是 PHP 還是 PHP 和 HTML。

出於說明目的，在我們的示例中，我們將使用 pagewithnofooter.php 文件中默認的 right-sidebar.php 文件的內容，但對其進行自定義並添加代碼以呈現自定義 HTML 歡迎文本以及禁用頁腳。如果您使用的是另一個 WordPress 主題，您還可以復制主題中 page.php 的內容，或者您的主題可能擁有的任何其他主題定義的頁面模板。

因此，我們的代碼如下：

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

第 3 步：將頁面模板上傳到您的主題文件。

借助 Filezilla 等 FTP 程序或通過您的主機面板，將您的自定義文件上傳到主題文件的根目錄。在我們這裡的例子中，這將在以下目錄路徑中：

i) wp-content > 主題 > Stax

ii) 推薦：wp-content > Themes > stax-child

這在您的站點中使用子主題時適用，並且 stax-child 是您的子主題。

我們建議在自定義頁面模板或主題中的任何其他文件自定義時使用子主題，以避免在主題更新期間丟失自定義。

第 4 步：創建一個新頁面並為其分配“PageWithNoFooter”模板

為此，請導航到 WordPress 儀表板中的頁面 > 添加新部分並創建頁面。

創建頁面後，將“PageWithNoFooter”模板分配給它並保存更改。

下面是一個示例說明：

現在，在前端預覽頁面後，我們的頁面將不會在您的頁面中呈現頁腳。您還將擁有我們添加的自定義 HTML。

下面是一個截圖：

您可以在您希望應用其佈局的任何頁面或您不打算有頁腳的任何頁面中使用該模板。

創建單個頁面模板

單個頁面的自定義頁面模板更多地是特定於頁面的。如前所述，如果沒有將“頁面模板”分配給頁面，則考慮選擇這些模板。

對於這些模板，您可以通過 slug 或頁面 ID 來定位頁面。在確定是使用 page slug 還是 ID 時，考慮您網站的未來前景也很重要。例如，如果您打算將站點遷移到另一個域，則在創建模板文件時使用頁面 ID 是不合適的。相反，使用蛞蝓將被認為是更好的選擇。另一方面，如果您的網站由多個人管理，並且您認為他們可能會更改頁面 slug，那麼在創建頁面模板時使用頁面 ID 會更好。

在我們的例子中，我們將為我們的聯繫頁面創建一個自定義頁面模板並禁用頁面的頁腳。為了創建這樣的模板，您需要執行以下操作：

第一步：複製page.php的內容

在這一步中，您需要首先在主題文件中找到 page.php。

找到文件後，選擇對其進行編輯並複制其內容。

第 2 步：為頁面創建一個新模板

在主題文件的根目錄中，為聯繫頁面創建頁面模板。您可以使用 page-{id}.php 或 page-{slug}.php 文件。在我們的例子中，我們將使用 slug，因此我們將模板命名為 page-contact.php，因為“contact”是我們的頁面 slug，如下所示：

下面也是文件位置的說明：

第 3 步：粘貼 page.php 文件的內容

您現在需要將我們在上面第 1 步中復制的 page.php 文件的內容粘貼到我們的新 page-contact.php 文件中。執行此操作後，您可以自定義文件以合併所需的代碼更改並保存更改。在我們的例子中，我們將禁用聯繫頁面中的頁腳，因此我們的最終代碼將如下所示：

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

現在預覽您的聯繫頁面時，您將意識到該頁面不包含頁腳。

下面是頁面上最初和應用新模板後的屏幕截圖比較。

帶頁腳的聯繫頁面

沒有頁腳的聯繫頁面

結論

為您的網站創建自定義頁面模板相對容易。在本指南中，我們專門研究瞭如何在您的 WordPress 主題中手動創建自定義模板。我們在這裡使用了免費的 Stax 主題作為用例。但是，您可以在所有其他遵循 WordPress 編碼標準的 WordPress 主題中應用相同的技術。但是，您還可以通過其他方式創建自定義頁面模板，例如使用 Elementor 等頁面構建器。

我們希望本文能夠提供有關如何手動創建自定義頁面模板的必要見解。如果有任何問題或建議，請隨時在下面發表評論。