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

WordPress自定義頁面模板

設計網站可能很耗時。即使您使用功能強大的WordPress主題或頁面構建器,您仍可能會花費數小時來構建和編輯您的頁面。此外,您可能更喜歡建立自定義WordPress頁面模板,而不是使用通用的預製佈局。

通過建立WordPress模板,您可以將它們應用到您網站上的任何頁面。因此,您還可以調整整體網頁設計,而無需手動更新每個頁面。

在這篇文章中,我們將瞭解您可能想要使用自定義頁面模板的原因。然後,我們將向您展示如何在WordPress中建立它們。

為什麼您可能想要建立自定義WordPress頁面模板

許多WordPress主題都帶有針對您網站不同部分的預製佈局。這些設計區域包括部落格文章、類別、檔案和關於我們的頁面。雖然您通常可以根據自己的喜好調整這些模板,但在嘗試自定義它們時可能會發現它們有點限制。

建立自定義WordPress頁面模板可以讓您的設計更具創意。然後,您可以將此佈局應用於您網站上的任何頁面或文章。

如果您希望某些頁面彼此略有不同,您還可以建立自定義模板。

例如,如果您有一個攝影作品集,您可能希望這些頁面看起來比其他頁面更寬。如果您經營一個部落格,您可能會決定新增一個僅在您的文章中可見的側邊欄。

擁有自定義頁面模板還可以為您節省大量時間。如果您選擇在未來調整您的設計,您只需更改您的模板 – 更新將應用於所有相關頁面。此設定使您免去了調整每一頁的麻煩。

如何建立自定義WordPress頁面模板(2 種方法)

正如我們所見,建立自定義WordPress頁面模板可以讓您更自由地控制網站的外觀。此過程還可以幫助您節省時間。

幸運的是,您可以通過多種方式在WordPress中建立頁面模板。例如,您可以手動製作一個並將其上傳到您的網站,也可以使用頁面構建外掛。

讓我們仔細看看每種方法!

1.手動建立頁面模板

如果您已經熟悉如何建立WordPress主題,您可能希望選擇手動方法。此方法需要一些編碼知識,併為您的自定義模板設計提供了很大的靈活性。

重要的!在本教程中,我們將建立模板檔案並將其上傳到您當前的主題。我們建議先建立一個子主題。這樣,當父主題更新時,您不會丟失新的更改。

第 1 步:建立模板檔案

首先,開啟您選擇的文字編輯器並新增以下程式碼行:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php /* Template Name: CustomPage */ ?>
<?php /* Template Name: CustomPage */ ?>
<?php /* Template Name: CustomPage */ ?>

您可以隨意命名您的模板。但是,我們建議使用可識別的名稱。

例如,如果您正在為特定型別的部落格文章(例如操作指南)建立頁面模板,則可以將其稱為“教程”。同樣,如果您正在製作一個不包括主題側邊欄的模板,您可以將其命名為“PageWithoutSidebar”。

新增程式碼後,將檔案另存為“custompage.php”之類的檔案。您可以為模板檔案使用任何名稱,但它必須具有.php副檔名。

第 2 步:將模板檔案上傳到您的站點

接下來,您需要將此檔案上傳到您的站點。為此,您可以使用FileZilla之類的檔案傳輸協議 (FTP)客戶端。

如果這是您第一次使用FTP,則需要輸入您的憑據,包括您的使用者名稱和伺服器主機名。您可以在託管帳戶儀表板中找到此資訊。

連線到站點後,導航到wp-content/themes/資料夾並開啟您的子主題資料夾:

子主題資料夾

然後,將您剛剛建立的模板檔案上傳到此資料夾。該模板現在應該可以在您的網站上使用。

要確認這一點,請導航到您的 WordPress 管理區域並建立一個新頁面(或開啟一個現有頁面)。在“設定”面板中,找到“模板”部分並單擊它以檢視您的選項:

頁面模板

您應該在列表中看到您的新模板。但是,如果您將此設定為模板並單擊Preview,您將獲得一個空白頁面。

這是因為我們還沒有向檔案中新增任何內容。我們將在下一步中向您展示如何自定義它。

第 3 步:自定義您的模板檔案

首先,您需要複製主題的現有頁面模板。為此,請通過FTP連線到您的站點並導航到您當前的主題資料夾。然後,查詢名為page.php的檔案並在文字編輯器中開啟它。

接下來,您需要在page.php檔案中複製以下程式碼:

頁面模板程式碼

完成後,開啟您的自定義頁面模板檔案並將該程式碼貼上到以下行下方:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php /* Template Name: CustomPage */ ?>
<?php /* Template Name: CustomPage */ ?>
<?php /* Template Name: CustomPage */ ?>

您的模板檔案現在應該如下所示:

自定義頁面模板程式碼

您現在可以編輯您的自定義頁面模板檔案。例如,如果要從模板中刪除頁尾,可以刪除以下行:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php get_footer(); ?>
<?php get_footer(); ?>
<?php get_footer(); ?>

您還可以新增自定義PHP程式碼以進一步根據自己的喜好自定義模板。完成後,儲存更改。

現在,如果您返回應用模板的文章或頁面並單擊預覽它,您應該能夠看到您的新更改。

2. 使用頁面構建器外掛建立頁面模板

如果您缺乏編碼知識,請不要擔心。有一種更簡單的方法可以建立自己的模板,它涉及使用頁面構建工具。

幸運的是,幾個WordPress頁面構建器使您能夠構建自定義設計。本節將著眼於兩個流行的選項——Elementor vs. Beaver Builder。

使用Elementor構建自定義WordPress頁面

Elementor帶有一個拖放編輯器,可以輕鬆在WordPress中構建和自定義頁面。您可以使用小部件建立自定義模板並在您的網站上使用它們。您還可以從預製的Elementor模板中進行選擇,並根據自己的喜好進行調整。

在本教程中,我們將向您展示如何使用Elementor構建基本的WordPress頁面模板。您可以使用構建器的免費版本來建立 WordPress 自定義設計並將其應用於選定的頁面。但是,Elementor Pro具有更多自定義選項和功能。

第 1 步:設計您的模板

在您的網站上安裝並啟用Elementor後,導航到Templates並單擊Add New

Elementor建立頁面模板

然後Elementor會要求您選擇要建立的模板型別併為其命名:

Elementor頁面模板命名

如果您使用的是免費版本,則可以從PageSectionLanding Page中進行選擇。要建立WordPress自定義文章模板,您需要升級到Elementor Pro。

準備好後,單擊建立模板。這將啟動Elementor編輯器:

Elementor編輯器

您會在左側找到一系列可以拖放到頁面上的元素。但是,在開始之前,您可能需要更改模板的頁面佈局。

點選左下角的設定圖示:

Elementor頁面佈局

然後,您可以從提供的列表中選擇您的頁面佈局。例如,如果您選擇Elementor Canvas,您將獲得一個完全空白的頁面:

Elementor頁面設定

選擇頁面佈局後,您可以開始向頁面新增元素。或者,您可以使用現有模板作為基礎。

要訪問這些Elementor模板,您只需單擊資料夾圖示:

訪問Elementor模板

然後,您可以選擇一個塊或一個完整的頁面:

Elementor頁面模板列表

然後,您可以選擇頁面上的任何元素來配置其設定:

修改Elementor頁面模板

準備好後,單擊Publish按鈕旁邊的箭頭,然後選擇Save as Template

儲存Elementor頁面模板

然後Elementor會要求您輸入模板的名稱。然後,此佈局將儲存到您的模板庫中。

第 2 步:將模板應用到您的頁面

建立並儲存模板後,您可以在 Elementor 設計的任何頁面上使用它。

首先,點選Pages -> Add New,然後選擇Edit with Elementor按鈕:

使用Elementor編輯頁面

這將在Elementor編輯器中開啟您的新頁面:

使用Elementor編輯器修改頁面

然後,您可以單擊資料夾圖示開啟模板庫(如前所示)並在My Templates下查詢您的模板。然後,只需將您的模板插入頁面,並根據需要對其進行自定義。

請注意,如果您使用Elementor Pro,您還可以訪問Theme Builder:

Theme Builder

此功能可讓您設計自定義元素,包括頁首、頁尾和單個文章模板,然後配置它們的顯示條件。

例如,如果您使用Theme Builder建立單個文章模板,您可以選擇將其應用於所有文章。

使用Beaver Builder構建自定義WordPress頁面

Beaver Builder是另一個可以幫助您建立 WordPress 自定義頁面模板的工具。與Elementor類似,此頁面構建器外掛帶有一個拖放編輯器和多種稱為“模組”的元素。

Beaver Builder還允許您將設計儲存為模板。但是,此功能僅適用於外掛的高階版本

在本教程中,我們將使用高階外掛向您展示如何建立WordPress頁面模板。

第 1 步:設計您的模板

在WordPress儀表板中安裝並啟用外掛後,導航到Beaver Builder -> Templates並選擇Add New

Beaver Builder模板列表

然後,您將被要求為您的設計選擇一個名稱並選擇一個模板型別:

新建Beaver Builder模板

然後,單擊Add Saved Template並選擇Launch Beaver Builder。這將帶您到構建器:

Beaver Builder介面

然後,您可以開始建立模板。您可以從“Modules”選項卡拖放元素 ,然後單擊它們以配置其設定。

或者,您可以使用Beaver Builder模板:

Beaver Builder模板

如果您對更改感到滿意,請單擊右上角的完成按鈕。然後,選擇釋出

第 2 步:將模板應用到您的頁面

建立模板後,您可以將其應用到網站上的任何頁面。首先開啟您的頁面進行編輯(或建立一個新頁面),然後單擊Launch Beaver Builder

使用Beaver Builder編輯頁面

Templates選項卡中,選擇Saved Templates並選擇您的設計:

使用Beaver Builder儲存模板

Beaver Builder現在會將模板新增到您的頁面。然後,您可以對其進行任何更改。準備好後,點選完成,然後選擇儲存草稿釋出

小結

學習如何建立WordPress頁面模板可以幫助您節省時間和精力。此過程還使您能夠輕鬆調整網站設計以更好地滿足您的需求。您可以製作各種佈局,包括WordPress單篇文章模板。

在這篇文章中,我們研究了構建WordPress自定義頁面模板的兩種主要方法:

  1. 建立一個模板檔案並使用FileZilla之類的工具將其上傳到您的主題資料夾。
  2. 使用像ElementorBeaver Builder這樣的頁面構建器外掛。

這兩種方法都為您提供了很大的定製自由度,因此您可以選擇您覺得最舒服的一種。

評論留言