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

一個真正專業的 WordPress 網站幾乎肯定會包含自定義頁面模板。 事實上，許多最常見的網站都將依賴模板。 房地產網站需要為其房屋提供模板、為其產品提供電子商務網站、為其會員提供會員網站等等。

模板定義頁面和帖子在前端的外觀。 藍圖說明了您將如何以及在何處顯示每個帖子上的所有內容。 例如，您對烹飪網站上的食譜模板所做的任何更改都會影響所有食譜在前端的顯示方式。

我將介紹兩種類型的自定義 WordPress 頁面模板：

1. 常規頁面的模板
2. 單個帖子頁面的模板

為什麼常規頁面需要自定義 WordPress 模板

模板很容易確保相似的頁面遵循相同的結構。 無需單獨為每個頁面創建佈局，您只需創建一次模板並將其分配給您喜歡的任何頁面。 然後這些頁面將遵循模板。

讓我們想像一個例子。 在烹飪網站上，您可能有很多頁麵包含烹飪技巧，例如“如何製作完美的意大利面”、“如何煮雞蛋”等。

我有一本關於烹飪的電子書，我想在所有這些頁面上展示。 我可以只創建一次模板並將模板分配給頁面，而不是編輯具有相同內容的每個頁面（這將花費大量時間）。 這樣，每個頁面都將包含下載我的電子書的號召性用語。

在上面的兩個頁面上，您都可以在右側看到我的號召性用語。 那是因為我為兩個頁面分配了相同的模板。

創建自定義 WordPress 頁面模板的兩種方法

有兩種方法可以創建自定義 WordPress 頁面模板：

• 艱難的路。 主題自動提供在 WordPress 中定義模板的 PHP 文件。 當您創建自定義帖子類型（例如食譜）時，您將需要編輯這些 PHP 字段或創建新字段以確保您的網站顯示您的帖子。
• 簡單的方法。 您可以使用 WordPress 插件（例如 Toolset）來創建模板。 Toolset 在幾分鐘內創建模板，無需任何編碼。 此外，使用工具集塊，您可以將塊添加到具有動態內容的 WordPress Gutenberg 編輯器。

下面我給大家介紹一下簡單的方法。

首先，我將為常規頁面創建一個模板，該模板將在右側包含號召性用語。

其次，我將為我的食譜自定義帖子類型創建一個模板。

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

步驟 1：創建內容模板結構

您首先需要為您的頁面創建內容模板。 安裝工具集後，您可以打開一個新的內容模板並添加您的塊。

首先，我整理了模板的結構。 您可以在下面看到我添加了 Toolset 的網格塊，允許我將模板拆分為多個部分。 我將模板一分為二，並將左側的部分擴展為佔頁面的 75%。

第 2 步：向模板添加內容

現在我有了結構，我需要插入包含我想要顯示的內容的塊。 在左側，我添加了帖子內容。 我需要做的就是插入 Toolset 的單字段塊，它允許我選擇我喜歡的任何內容源。

下面我選擇右側的帖子內容作為塊的來源。

我將為模板的右側添加號召性用語。 我需要做的就是根據內容選擇我想要的任何塊。 下面我使用了標題塊和工具集的按鈕塊。 對於按鈕塊，我還提供了該書的鏈接。

第 3 步：設置塊樣式

當您將 WordPress 與 Toolset 結合使用時，您可以為添加到模板中的塊設置樣式。 如果您選擇“艱難地”創建塊，則需要依靠您的編碼技能來獲得良好的樣式。

當您單擊一個塊時，您會在右側看到許多用於樣式化和增強模板的選項。

在“排版”下，您可以更改以下內容：

• 字體
• 字體大小
• 間距
• 風格
• 文字顏色

那不是全部。 在“樣式設置”下，您還可以更改以下內容：

• 背景顏色
• 邊距/填充
• 邊界
• 盒子陰影

下面我為號召性用語添加了新的背景顏色。 請注意，您無需編寫任何更改代碼，而是只需選擇所需的顏色和任何其他樣式。

第 4 步：針對不同的屏幕尺寸調整模板

您很可能在筆記本電腦或台式機上構建模板，但重要的是要記住您的用戶可能不會在相同的屏幕尺寸上查看網站。 越來越多的人將使用他們的平板電腦或移動設備。

因此，您可能需要針對每個屏幕尺寸調整模板。 使用 Toolset 和 WordPress 很容易做到這一點。

在每個樣式元素旁邊的右側邊欄中，有一個在桌面、平板電腦和移動設備之間切換的選項。

如您所見，當我在選項之間切換時，模板會自行調整，因此您可以檢查模板在每個設備上的外觀。

第 5 步：將模板分配給您的頁面

現在我有了一個模板，我只需要將它分配給正確的頁面。 完成此操作後，每個頁面都將顯示相同的模板。

我需要做的就是編輯每個頁面並選擇正確的內容模板。

在前端，我現在將在我分配給它的任何頁面上看到模板。

為什麼您需要為單個帖子使用自定義 WordPress 頁面模板

除了為常規帖子創建模板外，您很可能還需要自定義帖子類型中的每個帖子的模板。

對於我的烹飪網站，我為我的食譜創建了一個自定義帖子類型。 下面你可以在後端看到我的一個食譜。 請注意我為其創建的所有自定義字段，例如準備時間、烹飪時間和食譜圖像。

我還沒有為我的食譜分配模板。 看看當我們在前端沒有模板的情況下查看配方時會發生什麼。

如您所見，前端沒有出現任何自定義字段。 您可以看到的只是主要的帖子內容，例如帖子標題和帖子正文。 這就是模闆對您的單個帖子如此重要的原因，因為它允許您顯示所有內容，包括自定義字段。

下面你可以在前端看到我的兩個食譜。 您現在可以看到自定義字段，因為我已為它們分配了模板。

下面我將向您展示我是如何為我的食譜創建這個模板的。

第 1 步：創建模板

我需要做的第一件事是創建要在其中添加內容的模板。 我可以從 WordPress 後端的工具集儀表板執行此操作。

通過以這種方式選擇模板，我會自動將模板分配給我創建的所有食譜。 因此，我不需要返回每個配方並手動分配模板。

第 2 步：將內容添加到模板

現在在內容模板上，我可以開始添加和構建內容，就像我為之前的常規帖子模板所做的那樣。

再一次，我可以添加工具集網格塊來創建模板的結構。

我現在可以開始為我的內容添加我的塊了。 例如，在我的食譜中，我在左欄中有一張圖片。 從 Gutenberg 的一組塊中，我可以添加 Toolset 的圖像塊。 我需要工具集版本的塊，因為它允許我添加動態內容。

動態內容意味著您可以創建諸如圖像之類的元素，並且對於每個帖子，它將為該特定帖子繪製正確的內容。 例如，動態內容意味著我的香蕉蛋糕食譜將顯示，你猜對了，香蕉蛋糕。 否則，內容將是靜態的，而不是香蕉蛋糕，您將看到我在模板中創建時插入的任何圖像。

使用工具集和 WordPress，我可以為每個塊選擇動態源來告訴它要顯示什麼。

例如，我創建了一個新塊來添加我的一個自定義字段 Prep Time。 添加塊後，我可以選擇 Prep Time 字段作為右側塊的源。 這個塊也是動態的，因為準備時間會根據配方要求而變化。

您可以添加許多不同類型的塊，包括用於添加多個項目的重複字段塊（例如配方的多行）、圖像滑塊塊和 YouTube 塊。

第 3 步：設置塊樣式

就像常規帖子的第一個模板一樣，我可以為每個塊設置樣式。

第 4 步：針對不同的屏幕尺寸調整模板

同樣，與之前的模板類似，我可以針對不同的屏幕尺寸調整結構。

第 5 步：檢查模板與您的每個帖子的外觀

最後，您還可以選擇您在模板上查看的食譜，看看它是否適合所有食譜。 使用頁面頂部的下拉菜單在帖子之間切換。

準備好後，您可以在前端檢查您的模板。

就像那樣，我有一個食譜模板。 當我創建一個全新的食譜時，它將立即遵循模板結構。

立即開始構建您自己的自定義 WordPress 頁面模板

現在輪到您看看構建 WordPress 頁面模板是多麼容易了。 您需要做的就是下載 Toolset 並查看其文檔，以了解無需編碼即可為您的帖子創建模板的速度有多快。