為什么要創建自定義WordPress塊？
WordPress帶有一個直觀的塊編輯器，允許您通過將內容和布局元素添加為來輕松構建帖子和頁面。
默認情況下，WordPress附帶了幾個常用的塊。WordPress插件也可以添加自己的塊，您可以使用。
但是，有時您可能希望創建自己的自定義塊以在WordPress網站上執行特定操作，因為找不到適合您的塊插件。
使用自定義塊，您可以向網站添加獨特的特性和功能，這些特性和功能在預構建塊中可能不可用。這可以幫助自動化流程或使您的WordPress博客的內容創建更有效率。
例如，您可以創建一個自定義塊來顯示推薦，然后無需任何編碼知識即可輕松插入和管理該塊。
話雖如此，讓我們看看如何在WordPress中輕松創建一個完全自定義的塊。
在本教程中，我們將向您展示兩種創建自定義塊的方法。您可以使用下面的快速鏈接跳轉到您選擇的方法：
-
方法1：使用WPCode為WordPress創建自定義塊（推薦）
-
方法2：使用創世紀自定義代碼插件為WordPress創建自定義塊（免費）
方法1：使用WPCode為WordPress創建自定義塊（推薦）
如果您是初學者并且沒有編碼經驗，那么此方法適合您。
WPCode 是市場上最好的 WordPress 代碼片段插件，它使將自定義代碼添加到您的網站變得非常容易和安全。
它帶有塊片段功能，可讓您輕松地為您的WordPress網站創建自定義塊，而無需編寫任何代碼。
首先，您需要安裝并激活WPCode插件。有關詳細說明，您可能需要查看有關如何安裝WordPress插件的初學者指南。
激活后，您需要從WordPress管理側邊欄轉到代碼片段? +添加代碼片段頁面。
到達那里后，單擊“添加自定義代碼段（新代碼段）”選項下的“使用代碼段”按鈕。
這將帶您進入“創建自定義代碼段”頁面，您可以在其中鍵入要創建的自定義塊的名稱。
完成此操作后，只需從屏幕右上角的“代碼類型”下拉菜單中選擇“塊代碼片段”選項。
這將在“代碼預覽”框中顯示“使用塊編輯器編輯”按鈕。
只需單擊此按鈕即可啟動塊編輯器。
現在，屏幕上將出現一個提示，要求您保存代碼片段以將其加載到塊編輯器中。只需單擊“是”按鈕即可繼續前進。
現在您已進入塊編輯器，您可以使用塊菜單中提供的預制塊輕松創建自定義塊。
在本教程中，我們將創建一個自定義塊，用于在您的網站上添加推薦。
首先，您需要單擊屏幕左上角的“+”按鈕以打開阻止菜單。
從這里，將標題塊拖放到塊編輯器界面中，并將其命名為“推薦”。
接下來，您可以使用段落、拉引或引號塊在您的網站上添加來自不同客戶的推薦。
您甚至可以使用圖像、網站徽標、社交圖標或網站標語塊來進一步自定義您的推薦塊。
您還可以從屏幕右側的塊面板中自定義推薦的內容的大小、文本顏色或背景顏色。
完成后，不要忘記單擊頂部的“更新”按鈕以存儲您的自定義塊設置。
接下來，只需單擊頂部的“返回WPCode片段”按鈕即可重定向到“編輯片段”頁面。
到達那里后，向下滾動到“插入”部分，然后選擇“自動插入”模式。
激活代碼片段后，您的自定義塊將自動添加到您選擇將其插入到網站上的位置。
接下來，您必須配置您創建的自定義塊的位置。
為此，只需單擊“插入”部分中的“位置”下拉菜單，然后切換到“頁面特定”選項卡。從這里，如果您想在帖子結束后顯示您的推薦塊，您現在可以選擇“帖子后插入”選項。
完成此操作后，您還可以配置帖子數量，之后應顯示推薦塊。例如，如果您輸入數字 3，則推薦塊將出現在每三個帖子中。
您還可以在不同段落之間、帖子摘錄后等顯示塊。
但是，如果找不到要查找的塊位置，則還可以創建自己的條件邏輯規則，以將自定義塊添加到首選位置。
為此，請向下滾動到“智能條件邏輯”部分，然后打開“啟用邏輯”開關。
接下來，您必須單擊“添加新組”按鈕以開始創建條件邏輯規則。
例如，如果您只想顯示在特定頁面或帖子上創建的自定義塊，則必須從右側的下拉菜單中選擇“頁面URL”選項。
之后，您可以將下拉菜單保留在中間，然后將您選擇的WordPress頁面/帖子的URL添加到左側的字段中。
您還可以將條件邏輯規則配置為僅在特定頁面、登錄用戶、WooCommerce 商店頁面、簡易數字下載頁面、特定日期等上顯示自定義塊。
完成后，滾動回頁面頂部并將“非活動”開關切換為“活動”。然后，單擊“更新”按鈕以存儲您的設置。
您的自定義屏蔽現在將自動添加到您為屏蔽代碼段選擇的所有位置。
請記住，您創建的自定義塊不會在古騰堡編輯器的塊菜單中顯示為選項。
您必須通過從WordPress儀表板訪問代碼片段頁面并單擊塊代碼片段下方的“編輯”鏈接來配置塊設置。
這將打開“編輯代碼段”頁面，您可以在其中自定義塊或輕松更改其位置和條件邏輯規則。
現在訪問您的網站以查看您在操作中創建的自定義塊。
這是我們演示網站上的自定義推薦塊。
方法2：使用創世紀自定義代碼插件為WordPress創建自定義塊（免費）
如果您是中間用戶并正在尋找免費解決方案，那么此方法適合您。請記住，您需要熟悉 HTML 和 CSS 才能按照此方法中的說明進行操作。
首先，您需要安裝并激活創世紀自定義塊插件。
為了本教程，我們將構建一個推薦塊。
第 1 步：為 WordPress 創建自定義塊
首先，您需要從管理面板的左側邊欄中轉到自定義塊?添加新頁面。
這將帶您進入塊編輯器頁面，您將在其中為您的WordPress站點創建自定義塊。
從這里開始，您可以先為您的塊命名。
現在，在頁面右側，您將找到可以配置的塊屬性。
在這里，您可以為區塊選擇一個圖標、添加類別和添加關鍵字。
該 slug 將根據你的塊的名稱自動填充，因此您不必更改它。但是，您最多可以在“關鍵字”文本字段中輸入 3 個關鍵字，以便輕松找到您的塊。
現在，是時候向塊中添加一些字段了。您可以添加不同類型的字段，例如文本、數字、、URL、顏色、圖像、復選框、單選按鈕等。
我們將在自定義推薦塊中添加 3 個字段：用于審稿人照片的圖像字段、用于審稿人姓名的文本框和用于推薦文本的文本區域字段。
只需單擊“+”按鈕即可插入第一個字段。
這將為右列中的字段打開一些選項。讓我們來看看它們中的每一個。
-
字段標簽：您可以使用您選擇的任何名稱作為字段標簽。我們將第一個字段命名為“審閱者圖像”。
-
字段名稱：將根據字段標簽自動生成字段名稱。我們將在下一步中使用此字段名稱，因此請確保它對于每個字段都是唯一的。
-
字段類型：在這里，您可以選擇字段類型。我們希望我們的第一個字段是圖像，因此我們將從下拉菜單中選擇“圖像”。
-
字段位置：您可以決定是要將字段添加到編輯器還是檢查器。
-
幫助文本：您可以添加一些文本來描述字段。如果您創建此塊供個人使用，則不需要這樣做，但可能對有所幫助。
您可能還會看到一些基于所選字段類型的其他選項。例如，如果您選擇一個文本字段，那么您將獲得占位符文本和字符限制等額外選項。
按照上述過程，讓我們通過單擊“+”按鈕為我們的推薦塊添加另外 2 個字段。
如果要對字段重新排序，則可以通過使用每個字段標簽左側的手柄拖動它們來執行此操作。要編輯或刪除特定字段，您需要單擊字段標簽并編輯右列中的選項。
完成后，只需單擊頁面右側的“發布”按鈕即可保存您的自定義古騰堡塊。
步驟 2：創建自定義塊樣板
盡管您在最后一步中創建了自定義WordPress塊，但在創建塊之前，它將無法工作。
塊模板準確確定輸入到塊中的信息在您的網站上顯示的方式。如果您需要運行函數或對數據執行其他高級操作，您可以使用HTML和CSS甚至PHP代碼來決定它的外觀。
有兩種方法可以創建塊樣板。如果您的塊輸出是 HTML/CSS 格式，則可以使用內置的模板編輯器。
另一方面，如果您的塊輸出需要一些 PHP 在后臺運行，那么您需要手動創建一個塊模板文件并將其上傳到您的主題文件夾。
方法 1：使用內置模板編輯器
在自定義塊編輯屏幕上，只需切換到“模板編輯器”選項卡，然后在標記選項卡下輸入您的 HTML。
您可以編寫 HTML 并使用雙大括號插入塊字段值。
例如，我們對上面創建的示例塊使用了以下 HTML：
<``div` `class``=``"testimonial-item"``>``<``img` `src``=``"{{reviewer-image}}"` `class``=``"reviewer-image"``>``<``h4` `class``=``"reviewer-name"``>{{reviewer-name}}</``h4``>``<``div` `class``=``"testimonial-text"``>{{testimonial-text}}</``div``>``</``div``>
之后，只需切換到“CSS”選項卡即可設置塊輸出標記的樣式。
以下是我們用于自定義塊的示例 CSS：
.reviewer-name { `` ``font-size``:``14px``;`` ``font-weight``:``bold``;`` ``text-transform``:``uppercase``;``}` `.reviewer-image {`` ``float``: ``left``;`` ``padding``: ``0px``;`` ``border``: ``5px` `solid` `#eee``;`` ``max-width``: ``100px``;`` ``max-height``: ``100px``;`` ``border-radius``: ``50%``;`` ``margin``: ``10px``;``}` `.testimonial-text {`` ``font-size``:``14px``;``}` `.testimonial-item { `` ``margin``:``10px``;`` ``border-bottom``:``1px` `solid` `#eee``;`` ``padding``:``10px``;``}
方法二：手動上傳自定義塊模板
如果您需要使用 PHP 與自定義塊字段進行交互，則建議使用此方法。您基本上需要將編輯器模板直接上傳到您的主題。
首先，您需要在計算機上創建一個文件夾，并使用自定義塊名稱 slug 對其進行命名。
例如，我們的演示塊稱為推薦，因此我們將創建一個文件夾。testimonials
接下來，您需要創建一個使用純文本編輯器調用的文件。這是您將放置塊模板的HTML / PHP部分的地方。block.php
下面是我們用于示例的示例模板：
<div ``class``=``"testimonial-item <?php block_field('className'); ?>"``>``<img ``class``=``"reviewer-image"` `src=``"<?php block_field( 'reviewer-image' ); ?>"` `alt=``"<?php block_field( 'reviewer-name' ); ?>"` `/>``<h4 ``class``=``"reviewer-name"``><?php block_field( ``'reviewer-name'` `); ?></h4>``<div ``class``=``"testimonial-text"``><?php block_field( ``'testimonial-text'` `); ?></div>``</div>
現在您可能已經注意到我們如何使用該函數從塊字段中獲取數據。block_field()
我們已將塊字段包裝在要用于顯示塊的 HTML 中。我們還添加了 CSS 類，以便我們可以正確設置塊的樣式。
不要忘記將文件保存在您之前創建的文件夾中。
接下來，您需要使用計算機上的純文本編輯器創建另一個文件，并將其保存在您創建的文件夾中。block.css
我們將使用此文件添加設置塊顯示樣式所需的 CSS。下面是我們用于此示例的示例 CSS：
.reviewer-name { `` ``font-size``:``14px``;`` ``font-weight``:``bold``;`` ``text-transform``:``uppercase``;``}` `.reviewer-image {`` ``float``: ``left``;`` ``padding``: ``0px``;`` ``border``: ``5px` `solid` `#eee``;`` ``max-width``: ``100px``;`` ``max-height``: ``100px``;`` ``border-radius``: ``50%``;`` ``margin``: ``10px``;``}` `.testimonial-text {`` ``font-size``:``14px``;``}` `.testimonial-item { `` ``margin``:``10px``;`` ``border-bottom``:``1px` `solid` `#eee``;`` ``padding``:``10px``;``}
不要忘記保存更改。
您的塊模板文件夾現在將包含兩個模板文件。
之后，您需要使用 FTP 客戶端或 WordPress 托管帳戶控制面板中的文件管理器應用程序將塊文件夾上傳到您的網站。
連接后，導航到該文件夾。/wp-content/themes/your-current-theme/
如果您的主題文件夾沒有名為“blocks”的文件夾，請繼續創建一個新目錄并調用它。blocks
接下來，您必須將在計算機上創建的文件夾上傳到該文件夾。blocks
就這樣！您已成功為自定義塊創建手動模板文件。
第 3 步：預覽自定義塊
在預覽 HTML/CSS 之前，需要提供一些可用于顯示示例輸出的測試數據。
在WordPress管理區域內，編輯您的塊并切換到“編輯器預覽”選項卡。在這里，您需要輸入一些虛擬數據。
此數據不會成為自定義塊的一部分，只會用于預覽您使用 HTML 和 CSS 所做的更改。
添加數據后，不要忘記單擊“更新”按鈕以保存更改。
如果您不點擊“更新”按鈕，則將無法看到自定義塊的預覽。
您現在可以切換到“前端預覽”選項卡，以查看您的塊在WordPress網站前端的外觀。
如果一切對您來說都很好，那么您可以再次更新您的塊以保存任何未保存的更改。
第 4 步：在 WordPress 中使用您的自定義塊
您現在可以像使用任何其他塊一樣在WordPress中使用自定義塊。
只需編輯要使用此塊的任何帖子或頁面。然后，單擊左上角的“+”按鈕以打開阻止菜單。
從這里，通過輸入其名稱或關鍵字來找到您的塊，然后將其添加到頁面/帖子中。
將自定義塊插入內容區后，您將看到之前創建的塊字段。
您可以根據需要填寫塊字段。
當您從自定義WordPress塊移動到另一個塊時，編輯器將自動顯示塊的實時預覽。
您現在可以保存您的帖子和頁面并預覽它，以查看您的自定義塊在您的網站上的實際效果。
以下是推薦塊在我們的測試網站上的外觀。
