如何輕鬆創建自訂的 WordPress 塊

最後更新日期：2024 年 7 月 15 日

Gutenberg 編輯器為 WordPress 提供了強大的內容創建體驗。然而，預設的塊庫可能無法涵蓋所有網站的特定需求。多年來，我們撰寫了數百篇關於內容編輯器的文章，深入了解它的局限性。

透過自訂塊，你可以拓展 WordPress 編輯器的功能，添加特定設計元素，以簡化團隊的內容創建過程。本文章將指導你如何創建自訂的 WordPress 塊。我們將探討入門友好和基於代碼的方法，讓你能輕鬆創建無縫整合到現有工作流程中的自訂塊。

為何創建自訂的 WordPress 塊？

WordPress 帶有直觀的塊編輯器，讓你可以輕鬆地透過添加內容和布局元素來構建文章和頁面。默認情況下，WordPress 提供多個常用的塊，外掛程式也可以添加自己的塊。但是，有時你可能需要創建自訂塊來實現特定功能，因為找不到合適的塊外掛程式。

透過自訂塊，你可以為網站添加獨特的功能和特性，讓 WordPress 博客的內容創建更加高效。例如，你可以創建一個自訂塊來顯示用戶評價，然後輕鬆插入和管理該塊而不需任何代碼知識。

讓我們來看看如何輕鬆創建完全自訂的 WordPress 塊。

方法一：使用 WPCode 創建自訂塊（推薦）

如果你是初學者且缺乏代碼經驗，那麼這個方法適合你。WPCode 是市場上最棒的 WordPress 代碼片段外掛程式，使你能夠輕鬆安全地將自訂代碼添加到網站。它帶有塊片段功能，讓你可以輕鬆創建無需編寫任何代碼的自訂塊。

步驟一：安裝和啟用 WPCode 外掛程式

首先，你需要安裝並啟用 WPCode 外掛程式。詳細說明請參閱我們的初學者指南：如何安裝 WordPress 外掛程式。

激活後，前往 WordPress 管理側邊欄的代碼片段» + 添加片段頁面。在這裡，點擊“使用片段”按鈕。

步驟二：創建自訂塊片段

在創建自訂片段頁面，你可以開始輸入要創建的新塊的名稱。然後從右上角的“代碼類型”下拉選單中選擇“塊片段”選項。這將在“代碼預覽”框中顯示“使用塊編輯器編輯”按鈕，只需點擊該按鈕來啟動塊編輯器。

在這裡，你可以使用現有的塊來創建你自訂的塊，例如我們將創建一個評價塊。完成後，別忘了點擊“更新”按鈕來保存你的自訂塊設置。

步驟三：配置塊插入位置

回到代碼片段頁面，選擇“自動插入”模式來激活代碼片段。然後，在“插入”部分選擇自訂塊的位置，例如頁面結束後顯示評價塊。

步驟四：設定條件邏輯

如果你想要在特定頁面或邏輯條件下顯示自訂塊，可以開啟“智能條件邏輯”部分並添加條件邏輯規則。例如，你可以設定只在特定頁面顯示自訂塊。

方法二：使用 Genesis Custom Code 外掛程式創建自訂塊（免費）

如果你是中級用戶並且尋找免費方案，那麼這個方法適合你。首先，安裝並啟用 Genesis Custom Blocks 外掛程式。然後，依據以下步驟創建和配置你的自訂塊。

步驟一：創建自訂塊

前往左側邊欄的 Custom Blocks » Add New 頁面，將你的自訂塊命名並添加欄位和屬性。

步驟二：創建塊模板

在自訂塊編輯頁面，切換到“模板編輯器”標籤並輸入你的 HTML 和 CSS 欄位。保存並上傳模板文件至你的佈景主題資料夾。

步驟三：預覽自訂塊

在 WordPress 管理介面中設定測試數據以預覽自訂塊。在前端預覽標籤中查看塊的顯示效果，並在需要時進行調整。

步驟四：在 WordPress 中使用自訂塊

編輯任何文章或頁面，點擊“添加塊”按鈕並從塊選單中找到你的自訂塊。填寫塊欄位，保存文章或頁面後即可在網站前端看到你的自訂塊效果。

額外：為你的文章創建自訂模板

除了創建自訂塊，你還可以為網站上的文章或頁面創建自訂模板。你可以使用組塊功能來創建自訂模板，或使用 SeedProd 工具進一步設計精美的自訂模板。

希望這篇文章能幫助你輕鬆創建自訂的 WordPress 塊。你也可以查看我們的指南 如何從頭開始創建自訂 WordPress 佈景主題 和我們推薦的 最佳塊主題。