如何為區塊編輯器、Elementor等構建WordPress文章模板

如果您想在 WordPress 網站上建立真正自定義的內容，使用自定義文章模板是確保您釋出的所有內容都是獨一無二的好方法。 這樣的模板可以節省時間並確保整個網站的一致性。

幸運的是，特定用途的特定模板可以增強使用者體驗和工作流程。您可以相當輕鬆地設計適合您需求的文章模板。無論您使用的是區塊編輯器、Elementor、Divi 還是自定義程式碼，您都可以發揮自己的潛力。

今天，我們將逐步介紹如何使用每個工具建立自定義 WordPress 文章模板。

什麼是 WordPress 文章模板？

WordPress 文章模板是一種預定義的佈局和設計，可用於為部落格文章提供結構。這些模板不是標準佈局（或空白頁），而是提供預定的內容顯示方式。

但是，如果您的內容需要超出標準的單篇文章選項（即，如果您想要以不同的方式構建內容），您可以製作自己的模板。然後，每次您想使用該格式建立文章時，只需選擇該模板，文章就會按照該格式進行格式化。無需插入塊或重新排列。

使用文章模板的好處

您可以想象，建立自己的文章模板有很多好處。 這些包括：

• 一致性。文章模板可確保每篇文章都遵循相同的樣式指南，讓您的部落格看起來專業且具有凝聚力。無論是字型樣式、標題大小還是影象位置，模板都能保持一切統一。
• 效率。使用文章模板，您可以大大加快內容建立過程。您無需手動設定每個新文章的結構，只需選擇一個模板並專注於寫作即可。這對於經常釋出內容的博主和企業尤其有用。
• 改進的設計。模板允許進行高階自定義和改進設計，而無需大量編碼技能。區塊編輯器和 Elementor 等工具可讓您建立具有視覺吸引力的佈局，以增強讀者的體驗 – 並儲存它們以供以後重複使用。例如，您可以包含針對特定文章型別或類別定製的動態小工具、自定義頁首和頁尾。

文章模板可以節省時間。當您建立自己的文章模板時，您可以確保您的部落格文章更容易製作，並且更吸引網站訪問者。但它們可以用於什麼？接下來讓我們介紹一下。

自定義文章模板可用於什麼？

WordPress 中的自定義文章模板用途廣泛，可讓您定製內容的呈現方式。但如果沒有具體示例，這可能會讓人感覺有點抽象。

首先，這些模板可以滿足特定內容型別的需要。這使得每種內容型別都更具吸引力，更適合其用途。例如，您可以為以下內容建立自定義文章模板：

• 部落格文章。為所有文章建立一致的外觀，確保字型、標題和影象位置的統一。
• 登陸頁面。設計模板注重轉化，具有突出的號召性用語按鈕、最少的干擾和有說服力的元素。
• 產品評論。制定模板，以有組織的方式突出顯示產品的主要功能、優缺點以及客戶評價。
• 作品集。使用強調視覺內容（如影象和視訊）的模板展示您的作品，併為專案描述提供簡潔的佈局。

但除了文章型別之外，您還可以使用模板來嘗試不同的佈局並整合各種設計元素。這樣，當您處理不同型別的內容時，您就可以使用不同的模板，例如需要完整相簿部分的文章或帶有比較表的評論。

以下是您可能希望新增到自定義模板中的一些常用佈局選項：

• 全寬佈局。非常適合需要寬敞外觀的內容，例如攝影部落格或案例研究。
• 側邊欄佈局。對於需要額外導航或資訊（如最新文章、類別或廣告）的部落格很有用。
• 網格佈局。非常適合投資組合或電子商務網站，以整潔的網格樣式格式呈現多個專案。
• 自定義頁首和頁尾。修改這些元素以包含與文章內容一致的特定資訊、導航連結或品牌。

自定義文章模板可以節省您的時間，同時確保以最有效的方式呈現每種型別的內容。

既然您已經確信自定義文章模板的價值，讓我們來討論如何為自己建立它們。

如何建立自定義 WordPress 文章模板

我們已經確定，建立自定義 WordPress 文章模板是確保您的內容脫穎而出並滿足您的特定需求的有效方法。

在本指南中，我們將引導您完成使用以下方法建立自定義文章模板的過程：

1. 區塊編輯器
2. Elementor
3. Divi
4. 程式碼

現在讓我們探索如何使用可重複使用的定製設計來提升您的 WordPress 文章。

方法 1：使用區塊編輯器建立自定義文章模板

WordPress 5.0 中引入的區塊編輯器改變了人們在 WordPress 中製作內容的方式。其模組化、基於塊的方法讓人們無需大量編碼知識，也無需費力使用多個小工具或外掛即可製作出具有視覺吸引力的佈局。

雖然您可以使用區塊即時建立自定義佈局，但建立自定義文章模板以供重複使用是一個更好的主意。這樣，您無需在插入內容之前手動構建每個文章的佈局。只需選擇模板即可。

讓我們看一下使用區塊編輯器建立自定義文章模板的過程。

提示：要遵循本教學，您需要使用具有“完整站點編輯”選項的主題，例如Twenty Twenty-F​​our。這就是我們在本例中使用的。

步驟 1：訪問模板編輯器

首先，登入 WordPress 以訪問儀表盤。

轉到外觀 > 編輯器或模板 > 新增新模板以建立新模板。

在區塊編輯器中新增新模板。

步驟 2：選擇模板型別

選擇您想要建立的模板型別，例如單個文章、頁面或自定義文章型別。

為你的新模板選擇一種文章型別。

對於此示例，我們選擇了一個文章模板。

步驟 3：構建自定義模板

從這裡開始，自定義過程與構建標準文章佈局的過程相同。使用拖放介面新增頁首、頁尾、文字、影象和其他內容元素等區塊。讓設計看起來完全符合您的要求。

在本例中，我們插入了區塊來建立描述工作流程的模板。該頁面描述了新客戶在與您合作專案時可以期待什麼。

建立新的區塊編輯器模板就像拖放一樣簡單。

在此模板中，我們新增了標題區塊、用於新增文字或影象的三列容器、用於描述工作流程的時間線塊以及底部的 CTA（ call-to-action）區塊。

模板設計完成後，點選右上角的“儲存” 。

完成更改後儲存您的工作。

步驟 4：在文章中使用新模板

要將模板應用於文章，請在區塊編輯器中開啟文章，然後轉到文章設定側欄。在這裡，您將看到一個連結，上面可能寫著 Single Posts，因為這是 Twenty Twenty-F​​our 主題中的預設文章模板。

單擊此按鈕，將出現新選項。在這裡，單擊“Swap Template”。

將預設模板替換為您的自定義模板。

然後，在下一個螢幕上選擇您的自定義模板。

選擇自定義模板並開始編輯。

使用區塊編輯器的優缺點

這個過程非常簡單，有很多好處。但它也有一些缺點。現在讓我們來探索一下這件事的兩面。

優點：

• 簡單。塊編輯器的使用者友好介面讓所有技能水平的人都可以使用它。使用拖放功能，建立和修改模板也很簡單。而且不需要額外的工具——只需安裝最新的 WordPress 即可。
• 效率。可重複使用的塊和儲存模板的功能簡化了內容建立過程，節省了時間並確保了文章之間的一致性。

缺點：

• 有限的自定義。雖然塊編輯器非常適合基本自定義，但它可能無法提供某些使用者需要的高階功能。對於更復雜的設計，可能需要額外的外掛或自定義編碼。

使用區塊編輯器建立自定義文章模板是一種實用的方法，可以增強 WordPress 網站的設計，而無需瞭解如何編碼。但如果您需要更大的靈活性，探索頁面構建器或自定義編碼等工具可能會有所幫助。接下來讓我們討論這些。

方法 2：使用 Elementor 建立自定義文章模板

Elementor 是一款流行的 WordPress 頁面構建器外掛。有了它，您只需使用拖放介面即可建立複雜的網站並進行各種自定義。與塊編輯器一樣，您可以使用 Elementor 設計滿足您意圖的 WordPress 文章模板。

讓我們來看一下這個過程。

步驟 1：安裝並啟用 Elementor

轉到 WordPress 儀表盤並安裝 Elementor 外掛。為此，請轉到外掛 > 安裝新外掛，然後輸入“Elementor”。該外掛應該是第一個搜尋結果。

單擊“安裝”，然後單擊“啟用”。

您需要該外掛的高階版本來建立自定義文章模板。

步驟 2：訪問模板生成器

安裝完成後，轉到 Elementor > 模板 > 新增新。

在 Elementor 中選擇模板型別。

選擇 Single Post 作為模板型別，然後為模板命名並單擊 Create Template。

步驟 3：自定義佈局

在 Elementor 中自定義模板。

您可以使用拖放編輯器新增和排列不同的文章元素。文章模板的常見選項包括文章標題、文章內容、特色圖片、文章摘錄、文章後設資料和作者框。

但您可以選擇最適合您需求的元素。自定義每個元素的設定以滿足您的設計需求。例如，您可以在每個元素的“Sytle”選項卡中調整排版、顏色和間距。

您可以調整新增到文章模板的每個元素的樣式。

考慮新增動態元素，如相關文章、評論和社交分享按鈕。

步驟 4：將模板應用於文章

對設計滿意後，請點選“Publish”。

Elementor 將提示您設定此模板的使用條件。您可以將其應用於所有文章、特定類別的文章、特定作者的文章，甚至是單個文章。

使用 Elementor 的優缺點

Elementor 通常使建立文章模板變得簡單。但與區塊編輯器一樣，它既有優點也有缺點。

優點

• 高階定製。Elementor 提供高水平的設計靈活性。您可以實現預設塊編輯器無法實現的更復雜的佈局和獨特設計。
• 易於使用。拖放介面相對易於使用。您可以將元素拖放到您希望它們出現的位置。實時預覽也使設計過程變得直觀。
• 動態內容。Elementor 還允許您新增動態內容，這對於那些希望文章部分自動更新新內容的人來說很有幫助。

缺點

• 難度。雖然 Elementor 易於使用，但選項和設定的數量對於初學者來說可能難以應付。要充分利用其功能，有一定的學習曲線。
• 效能問題。使用過多元素有時會影響頁面載入時間。因此，您需要注意不要過度使用，以免影響網站效能。

Elementor 是建立高度定製的 WordPress 文章模板的可靠選擇。其高階功能可讓您設計外觀精美並增強使用者體驗的模板。

方法 3：使用 Divi 建立自定義文章模板

Divi 主題構建器是 Elegant Themes 的 Divi 主題的一部分，它提供了另一種使用拖放編輯器建立自定義文章模板的方法。它允許您設計複雜的佈局並輕鬆地將它們應用於您的 WordPress 網站。

步驟 1：訪問 Divi 主題生成器

要使用此方法，您需要購買 Divi。假設您已經購買了主題及其附帶的 Divi Builder 外掛，您可以像安裝任何其他高階選項一樣安裝該主題。只需轉到您的 WordPress 儀表盤，然後選擇外觀 > 主題 > 安裝主題。然後選擇 Divi .zip 檔案並將其上傳到您的網站。點選安裝。

此過程完成後，轉到 Divi > Theme Builder。

訪問 Divi 主題構建器。

單擊“Add New Template”，然後單擊“Build New Template”以建立一個新模板。

步驟 2：調整模板設定

在模板設定中，選擇要使用新模板的位置。由於我們正在建立文章模板，因此您需要選擇一個出現在 Posts 部分下的模板。

您可以立即選擇想要使用新模板的位置。

對於我們此處的示例，我們選擇了 Blog。

接下來，選擇“Add Custom Body”並選擇“Build Custom Body”。

選擇“Add Custom Body”開始設計您的文章模板。

步驟 3：使用 Divi 模組自定義佈局

使用 Divi Builder 設計您的文章模板。然後，使用內建的 Divi 模組建立您想要的佈局。

選擇 Post Title 模組以新增到官方 Divi 文件中的文章模板。

Divi 提供了多種模組可用於自定義模板，例如文章標題、文章內容、文章摘錄、文章後設資料和評論。

您還可以使用任何其他功能來實現您想要的外觀和功能。

將這些模組拖放到您的佈局中，並自定義其設定以適合您的設計。調整排版、顏色、間距等，以實現您想要的外觀。

您還可以新增動態內容，如相關文章和作者資訊，以使模板的功能更符合傳統的文章模板。

步驟 4：儲存並應用模板

模板設計完成後，單擊Divi Builder 中的儲存按鈕進行儲存。

要將模板應用於您的文章，請在主題生成器設定中設定顯示條件。您可以選擇將模板應用於所有文章、特定類別、標籤或單個文章。

使用 Divi 的利與弊

使用 Divi 建立自定義文章模板非常簡單。它提供了一個我們非常喜歡的簡潔介面。與今天討論的所有方法一樣，有些方法不好，有些方法好。

優點

• 高度定製。Divi 提供廣泛的定製選項，讓您可以建立獨特的文章模板。其廣泛的模組和設計設定讓您可以完全控制模板的外觀。
• 直觀的介面。視覺化拖放編輯器易於使用，可輕鬆設計複雜的佈局。實時預覽可幫助您準確檢視設計在前端的外觀。

缺點

• 依賴於主題構建器。使用 Divi 的主題構建器意味著您將被繫結到外掛。雖然您可以獨立於主題使用 Divi Builder 外掛，但脫離此配對可能會感覺受到限制。
• 選項太多。雖然 Divi 功能強大，但對於初學者來說，它可能讓人不知所措。是的，它很容易使用，但使用它意味著你很快就會被選項淹沒。太多的可能性可能會讓人不知所措。

Divi 是製作自定義 WordPress 文章模板的另一個不錯的選擇。但是，如果您正在尋找頂級定製，那麼手動編碼永遠是您的首選。

方法 4：使用程式碼手動建立自定義文章模板

WordPress 中的自定義編碼可完全控制文章模板的設計和功能。通過手動建立自定義模板，您可以定製文章的各個方面以滿足您的確切需求。此方法涉及直接使用 WordPress 主題檔案、HTML、CSS 和 PHP。

步驟 1. 建立子主題

首先，建立一個子主題，以確保在父主題更新時保留您的自定義設定。

在您的 WordPress 目錄中，轉到wp-content/themes併為您的子主題建立一個新資料夾。 類似 mytheme-child 的內容就足夠了。

在此資料夾中，建立一個 style.css 檔案和一個 functions.php 檔案。

在 style.css 中，新增以下標題以將其連結到父主題：

/*
Theme Name: My Theme Child
Theme URI: http://example.com/my-theme-child
Description: My Theme Child Theme
Author: Your Name
Author URI: http://example.com
Template: mytheme
Version: 
*/
In functions.php, enqueue the parent theme’s styles:
<?php
function mytheme_child_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'mytheme_child_enqueue_styles');

製作完這些檔案後，轉到 WordPress 儀表盤，然後轉到外觀 > 主題。您的新子主題應該列在那裡。像啟用其他主題一樣啟用子主題。

步驟 2. 新增新的模板檔案

在您的子主題資料夾中，建立一個名為 single-custom.php 的新檔案。此檔案將作為您的自定義文章模板。首先新增必要的模板頭：

<?php
/**
* Template Name: Custom Post
* Template Post Type: post
*/
get_header();
if ( have_posts() ) : 
while ( have_posts() ) : the_post();
// Your custom template code goes here
endwhile; 
endif;
get_footer();
?>

步驟 3. 使用 HTML、CSS 和 PHP 自定義模板

您現在可以自定義 single-custom.php 檔案來設計您的文章佈局。使用 HTML 和 CSS 來設計結構和樣式，並使用 PHP 來動態獲取文章內容。

以下是自定義的一個簡單示例：

<div class="post-wrapper">
<h1><?php the_title(); ?></h1>
<div class="post-meta">
<span>Published on: <?php the_date(); ?></span>
<span>by <?php the_author(); ?></span>
</div>
<div class="post-content">
<?php the_content(); ?>
</div>
</div>
<style>
.post-wrapper {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #fff;
}
.post-meta {
font-size: 14px;
color: #555;
}
</style>

步驟 4. 在文章編輯器中應用模板

要使用您的自定義模板，請在 WordPress 編輯器中開啟一篇文章。

在文章設定側欄中，找到模板下拉選單。就像使用塊編輯器建立模板時一樣，單擊當前模板的名稱（可能是 Single Posts），然後單擊 Swap Template。您新建立的模板應出現在彈出模式中。

單擊它，這將把您剛剛製作的 single-custom.php 模板應用到您的文章。

自定義編碼文章模板的優缺點

最後一種方法涉及編碼來建立文章模板，這有點複雜，但它確實有好處。

優點

• 完全控制。自定義編碼可完全控制文章模板的設計和功能。您可以不受限制地新增任何功能或樣式。
• 完全靈活。您可以建立高度具體的佈局和功能，以滿足您的確切要求。無需妥協。這為您提供了真正的靈活性，可以精確建立您想要的網站型別。

缺點

• 複雜性。自定義編碼需要 HTML、CSS 和 PHP 知識。對於沒有編碼經驗的人來說，這是一個真正的挑戰。
• 維護。手動編碼的模板可能更難維護和更新。如果父主題或 WordPress 本身更新，您可能需要手動調整自定義模板以確保相容性。

手動建立自定義文章模板可提供無與倫比的靈活性和控制力。因此，如果您需要高度定製的解決方案，這應該是您的首選。但如果您缺乏編碼經驗，另一種方法可能是最好的。

建立有效部落格文章模板的技巧

建立有效的 WordPress 文章模板可以幫助您確保所有內容的一致性，而無需每次釋出文章時手動重新建立其外觀。它還在您可以新增的功能和可以提供的使用者體驗方面提供了一定的靈活性。

但是，無論你選擇哪種方法，在建立文章模板時都需要牢記一些基本提示：

在適當的時候使用子主題

無論以何種方式自定義 WordPress 主題，您都應始終建立一個子主題，以保護您的更改不會在主題更新期間被覆蓋。這種做法可確保您的自定義文章模板始終保持完整和功能齊全。

如果您使用的是塊編輯器或頁面構建器工具，您可能可以跳過此步驟，因為它們提供了內建的模板製作功能。但這仍然是最佳做法。

保持設計使用者友好性

專注於建立簡潔直觀的設計，以增強可讀性和導航性。避免混亂，並確保標題、圖片和號召性用語按鈕等重要元素易於訪問。

使用者友好的設計讓網站訪問者可以更輕鬆地瀏覽您的網站、與您的內容互動並完成您的 CTA。是的，您可以建立任何您想要的模板，但請確保它仍然遵循網站設計最佳實踐。

定期更新模板以符合當前的設計趨勢

設計趨勢不斷髮展，保持模板最新很重要，這樣才能保持現代和專業的外觀。定期檢查和更新您的文章模板，以融入最新的設計趨勢，同時仍堅持您的整體品牌設計。保持最新狀態也有助於保持您網站的吸引力和功能。

清楚瞭解模板的用途

在設計模板之前，請明確定義其用途。不同型別的內容需要不同的佈局。例如，產品評論可能需要優缺點、評級和詳細描述部分，而部落格文章可能更注重可讀性和視覺元素。

瞭解具體的用例可確保您的模板有效地實現其預期用途。

保持可訪問性

您建立的任何文章模板都應可供所有使用者（包括殘障人士）使用。使用適當的 HTML 標籤，為圖片提供替代文字，並確保您的網站可通過鍵盤導航。此外，在樣式中使用足夠的顏色對比度，並堅持使用可讀的字型。

保持可訪問性可擴大您的受眾並符合最佳實踐和法律要求。

通過製作自己的文章模板體驗真正的定製

在 WordPress 中建立自定義文章模板可讓您很好地控制網站設計和內容建立過程。無論您使用區塊編輯器、Elementor、Divi 還是自定義程式碼，每種方法都有獨特的優勢，可滿足不同的技能水平和需求。如果您不確定要使用哪種方法，請嘗試這些方法以找到最適合您的網站、技能水平和需求的方法。