如何創建自定義 WordPress 塊（簡單方法）

已發表: 2022-05-17

您想為您的 WordPress 網站創建自定義 Gutenberg 塊嗎？

雖然 WordPress 帶有許多用於創建內容的基本塊，但您可能需要為您的網站提供更多自定義的東西。

在本文中，我們將向您展示一種為您的 WordPress 網站創建自定義 Gutenberg 塊的簡單方法。

Creating custom gutenberg blocks in WordPress

為什麼要創建自定義 WordPress 塊？

WordPress 帶有一個直觀的塊編輯器，可讓您通過將內容和佈局元素添加為塊來輕鬆創建帖子和頁面。

默認情況下，WordPress 附帶了幾個常用的塊。 WordPress 插件還可以添加您可以使用的自己的塊。

但是，有時您可能想要創建自己的自定義塊來執行特定的操作，但找不到適合您的塊插件。

在本教程中，我們將向您展示如何創建一個完全自定義的塊。

注意：本文適用於中級用戶。您需要熟悉 HTML 和 CSS 才能創建自定義 Gutenberg 塊。

第 1 步：開始使用您的第一個自定義塊

首先，您需要安裝並激活 Genesis Custom Blocks 插件。有關更多詳細信息，請參閱我們關於如何安裝 WordPress 插件的分步指南。

該插件由流行的 Genesis Theme Framework 和 StudioPress 背後的人們創建，為開發人員提供了簡單的工具來快速為其項目創建自定義塊。

為了本教程的目的，我們將構建一個“推薦”塊。

首先，從管理面板的左側欄中轉到自定義塊»添加新頁面。

這將帶您進入塊編輯器頁面。

從這裡，您需要為您的塊命名。

在頁面的右側，您會找到塊屬性。

在這裡，您可以為您的區塊選擇一個圖標、添加一個類別並添加關鍵字。

slug 將根據您的塊名稱自動填充，因此您不必更改它。但是，您最多可以在“關鍵字”文本字段中寫入 3 個關鍵字，以便可以輕鬆找到您的塊。

現在讓我們將一些字段添加到我們的塊中。

您可以添加不同類型的字段，例如文本、數字、電子郵件地址、URL、顏色、圖像、複選框、單選按鈕等等。

我們將向我們的自定義推薦塊添加 3 個字段：一個用於評論者圖像的圖像字段、一個用於評論者姓名的文本框和一個用於推薦文本的文本區域字段。

單擊[+] 添加字段按鈕以插入第一個字段。

這將為該領域打開一些選項。讓我們來看看他們中的每一個。

字段標籤：您可以使用您選擇的任何名稱作為字段標籤。讓我們將第一個字段命名為“評論者圖片”。
字段名稱：字段名稱將根據字段標籤自動生成。我們將在下一步中使用此字段名稱，因此請確保它對於每個字段都是唯一的。
字段類型：在這裡您可以選擇字段的類型。我們希望我們的第一個字段是圖像，因此我們將從下拉菜單中選擇圖像。
字段位置：您可以決定是否要將字段添加到編輯器或檢查器。
幫助文本：您可以添加一些文本來描述該字段。如果您創建此塊供您個人使用，則不需要這樣做，但可能對多作者博客有所幫助。

您還可以根據您選擇的字段類型獲得一些額外的選項。例如，如果您選擇一個文本字段，那麼您將獲得額外的選項，例如佔位符文本和字符限制。

按照上述過程，讓我們通過單擊[+] 添加字段按鈕為我們的推薦塊添加 2 個其他字段。

如果您想重新排序字段，則可以通過使用每個字段標籤左側的手柄拖動它們來實現。

要編輯或刪除特定字段，您需要單擊字段標籤並編輯右欄中的選項。

完成後，單擊頁面右側的“發布”按鈕，以保存您的自定義 Gutenberg 塊。

第 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;

方法 2. 手動上傳自定義塊模板

如果您需要使用 PHP 與自定義塊字段進行交互，建議使用此方法。

您基本上需要將編輯器模板直接上傳到您的主題。

首先，您需要使用自定義塊名稱 slug 在您的計算機名稱上創建一個文件夾。例如，我們的演示塊稱為 Testimonials，因此我們將創建一個 testimonials 文件夾。

接下來，您需要使用純文本編輯器創建一個名為block.php的文件。這是您放置塊模板的 HTML / 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;

不要忘記保存您的更改。

您的塊模板文件夾現在將在其中包含兩個模板文件。