如何創建自定義 WordPress 頁面模板
已發表: 2020-06-05一個真正專業的 WordPress 網站幾乎肯定會包含自定義頁面模板。 事實上,許多最常見的網站類型都依賴於模板。 一個房地產網站需要一個房子的模板,一個產品的電子商務網站,一個會員的會員網站,等等。

模板定義了頁面和帖子在前端的外觀。 它是藍圖,說明您將如何以及在何處顯示每個帖子上的所有內容。 例如,您對烹飪網站上的食譜模板所做的任何更改都會影響所有食譜在前端的顯示方式。
我將介紹兩種類型的自定義 WordPress 頁面模板:
- 常規頁面的模板
- 單個帖子頁面的模板
為什麼您需要為常規頁面自定義 WordPress 模板
模板是一種確保相似頁面遵循相同結構的簡單方法。 不必為每個頁面單獨創建佈局,您只需創建一次模板並將其分配給您喜歡的任何頁面。 然後這些頁面將遵循模板。
讓我們想像一個例子。 在烹飪網站上,您可能有許多帶有烹飪技巧的頁面,例如“如何製作完美的意大利面”、“如何煮雞蛋”等。
我有一本關於烹飪的電子書,我想在所有這些頁面上展示。 無需編輯具有相同內容的每個頁面(這將花費大量時間),我只需創建一次模板並將模板分配給頁面。 這樣每個頁面都會包含一個號召性用語來下載我的電子書。


在上面的兩個頁面上,您都可以在右側看到我的號召性用語。 那是因為我為兩個頁面分配了相同的模板。
創建自定義 WordPress 頁面模板的兩種方法
您可以通過兩種方式創建自定義 WordPress 頁面模板:
- 艱難的方式。 主題自動提供在 WordPress 中定義模板的 PHP 文件。 當您創建自定義帖子類型(例如食譜)時,您需要編輯這些 PHP 字段或創建新字段以確保您的網站顯示您的帖子。
- 簡單的方法。 您可以使用 WordPress 插件(例如 Toolset)來創建模板。 Toolset 在幾分鐘內創建模板,無需任何編碼。 此外,使用工具集塊,您可以將塊添加到具有動態內容的 WordPress Gutenberg 編輯器。

下面小編就給大家簡單介紹一下。
首先,我將為常規頁面創建一個模板,其中將包含右側的號召性用語。
其次,我將為我的食譜自定義帖子類型創建一個模板。
如何為常規頁面創建自定義 WordPress 頁面模板
步驟 1:創建內容模板結構
您首先需要為您的頁面創建內容模板。 安裝工具集後,您可以打開一個新的內容模板並開始添加塊。
首先,我安排模板的結構。 您可以在下面看到我添加了 Toolset 自己的網格塊,它允許我將模板分成多個部分。 我已將模板一分為二,並擴展了左側的部分,使其占據頁面的 75%。

第 2 步:向模板添加內容
現在我有了結構,我需要插入包含我想要顯示的內容的塊。 在左側,我添加了帖子內容。 我需要做的就是插入 Toolset 的單字段塊,它允許我為內容選擇我喜歡的任何來源。
下面我選擇右側的帖子內容作為塊的來源。

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

第 3 步:設置塊的樣式
當您將 WordPress 與 Toolset 結合使用時,您可以為添加到模板中的塊設置樣式。 如果您選擇“艱難的方式”創建塊,那麼您將需要依靠您的編碼技能來獲得良好的樣式。
當您單擊一個塊時,您將在右側看到許多用於設計和增強模板的選項。
在“排版”下,您可以更改以下內容:
- 字體
- 字體大小
- 間距
- 風格
- 文字顏色

那不是全部。 在“樣式設置”下,您還可以更改以下內容:
- 背景顏色
- 邊距/填充
- 邊界
- 框影
下面我為號召性用語添加了新的背景顏色。 請注意,您無需對任何更改進行編碼,只需選擇所需的顏色和任何其他樣式即可。

第 4 步:針對不同的屏幕尺寸調整模板
您很可能在筆記本電腦或台式機上構建模板,但重要的是要記住,您的用戶可能不會在相同的屏幕尺寸上查看網站。 事實上,越來越多的人將使用平板電腦或移動設備。
因此,您可能需要針對每個屏幕尺寸調整模板。 使用工具集和 WordPress 很容易做到這一點。
在每個樣式元素旁邊的右側邊欄上,有一個選項可以在桌面、平板電腦和移動設備之間切換。

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

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

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

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

為什麼您需要為單個帖子定制 WordPress 頁面模板
除了為常規帖子創建模板之外,您很可能還需要為自定義帖子類型中的每個帖子創建模板。
對於我的烹飪網站,我為我的食譜創建了自定義帖子類型。 在下面,您可以在後端看到我的一個食譜。 請注意我為其創建的所有自定義字段,例如準備時間、烹飪時間和食譜圖像。

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

如您所見,前端沒有顯示任何自定義字段。 實際上,您只能看到主要的帖子內容,例如帖子標題和帖子正文。 這就是為什麼模闆對您的單個帖子如此重要,因為它允許您顯示所有內容,包括自定義字段。
下面你可以在前端看到我的兩個食譜。 您現在可以看到自定義字段,因為我已經為它們分配了一個模板。


下面我將向您展示我如何為我的食譜創建這個模板。
第 1 步:創建模板
我需要做的第一件事是創建模板,我將在其中添加我的內容。 我可以從 WordPress 後端的工具集儀表板執行此操作。

通過這種方式選擇模板,我會自動將模板分配給我創建的所有食譜。 因此,我不需要回到每個配方並手動分配模板。
第 2 步:將內容添加到模板
現在在內容模板上,我可以開始添加和構建內容,就像我為常規帖子的前一個模板所做的那樣。
再一次,我可以添加工具集網格塊來創建模板的結構。

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

動態內容意味著您可以創建一個元素,例如圖像,並且對於每個帖子,它將為該特定帖子繪製正確的內容。 例如,動態內容意味著我的香蕉蛋糕食譜將顯示,您已經猜到了,香蕉蛋糕。 否則,內容將是靜態的,而不是香蕉蛋糕,您會看到我在模板中創建它時插入的任何圖像。
通過使用工具集和 WordPress,我可以為我的每個塊選擇動態源來告訴它顯示什麼。
例如,我創建了一個新塊來添加我的自定義字段之一準備時間。 添加塊後,我可以選擇 Prep Time 字段作為右側塊的源。 該塊也是動態的,因為準備時間會根據配方要求而變化。

您可以添加多種不同類型的塊,包括用於添加多個項目(例如配方的多行)的重複字段塊、圖像滑塊塊、YouTube 塊等等。
第 3 步:設置塊樣式
就像常規帖子的第一個模板一樣,我可以為每個塊設置樣式。
第 4 步:針對不同的屏幕尺寸調整模板
同樣,與之前的模板類似,我可以針對不同的屏幕尺寸調整結構。

第 5 步:檢查每個帖子的模板外觀
最後,您還可以選擇在模板上查看的食譜,以便查看它是否適合所有食譜。 使用頁面頂部的下拉菜單在帖子之間切換。

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

就像那樣,我有一個食譜模板。 現在,當我創建一個全新的配方時,它將立即遵循模板結構。
立即開始構建您自己的自定義 WordPress 頁面模板
現在輪到您了解構建自己的 WordPress 頁面模板是多麼容易。 您需要做的就是下載 Toolset,然後查看其文檔,了解無需編碼即可為帖子創建模板的速度。