如何在WordPress中創建自定義古騰堡塊(簡便方法)


您想為您的WordPress網站創建自定義古騰堡塊嗎? WordPress 5.0更新後,您需要使用塊在新的WordPress塊編輯器中創建內容。

WordPress附帶了幾個有用的塊,您可以在編寫內容時使用它們。 許多WordPress插件還帶有您可以使用的自己的塊。

但是,有時您可能想創建自己的自定義Gutenberg塊來執行特定的操作。

如果您正在尋找為WordPress網站創建自定義古騰堡塊的簡單解決方案,那麼您來對地方了。

在本分步教程中,我們將向您展示為古騰堡創建自定義WordPress塊的簡單方法。

為古騰堡創建自定義WordPress區塊

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

步驟1:開始

您需要做的第一件事是安裝並激活Block Lab插件。

這是一個WordPress插件,可讓您輕鬆地從管理面板創建自定義塊。

阻止實驗室WordPress插件

要安裝插件,您可以按照我們的初學者指南安裝WordPress插件。

激活插件後,您可以繼續執行創建第一個自定義塊的下一步。

步驟2:建立新區塊

為了本教程的緣故,我們將構建一個“推薦”塊。

首先,前往 阻止實驗室»添加新 從管理面板的左側欄中。

在此頁面上,您需要為塊命名。 您可以在“在此處輸入塊名稱”文本框中輸入您選擇的任何名稱。

輸入自定義塊名稱

我們將自定義模塊命名為:客戶推薦。

在頁面的右側,您將找到塊屬性。 在這裡,您可以為塊選擇一個圖標,然後從“類別”下拉框中選擇一個塊類別。

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

自定義塊屬性

現在,將一些字段添加到塊中。 您可以添加不同類型的字段,例如文本,數字,電子郵件,URL,顏色,圖像,複選框,單選按鈕等等。

我們將3個字段添加到我們的自定義推薦區中:一個用於評論者圖像的image字段,一個用於評論者姓名的文本框和一個用於推薦文本的textarea字段。

點擊 +添加字段 按鈕插入第一個字段。

圖像字段選項

這將為該字段打開一些選項。 讓我們看看它們中的每一個。

  • 欄位標籤:您可以使用任何選擇的名稱作為字段標籤。 讓我們將第一個字段命名為“審閱者圖像”。
  • 欄位名稱:字段名稱將基於字段標籤自動生成。 我們將在下一步中使用此字段名稱,因此請確保每個字段的名稱都是唯一的。
  • 欄位類型:在這裡您可以選擇字段的類型。 我們希望我們的第一個字段成為圖像,因此我們將選擇 圖片 從下拉菜單中。
  • 現場位置:您可以決定要將字段添加到編輯器還是檢查器。
  • 幫助文字:您可以添加一些文本來描述該字段。 如果要創建此塊供個人使用,則不需要這樣做。

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

您可以點擊 近場 圖片字段完成後,請點擊。

完成上述過程後,讓我們在“推薦”框中添加2個其他字段,方法是: +添加字段 按鈕。

最終自定義阻止字段

如果您想對字段進行重新排序,則可以使用每個字段標籤左側的漢堡包圖標拖動它們來完成。

要編輯或刪除特定字段,您需要將鼠標懸停在字段標籤上才能獲得編輯和刪除選項。

完成後,點擊 發布 位於頁面右側的按鈕,以保存您的自定義古騰堡塊。

步驟3:建立區塊範本

儘管您已在最後一步中創建了自定義WordPress區塊,但只有創建名為block-testimonials.php的區塊模板並將其上傳到當前主題文件夾後,該模板才能工作。

創建一個塊模板

塊模板文件將告訴插件如何在編輯器中顯示塊字段。 插件將查找模板文件,然後使用它顯示塊內容。

如果您沒有此文件,那麼它將顯示錯誤消息“找不到模板文件blocks / block-testimonials.php”。

讓我們創建塊的模板文件。

首先,繼續在桌面上創建一個文件夾並命名 。 您將在此文件夾中創建您的阻止模板文件,然後將其上傳到當前的WordPress主題目錄。

要創建模板文件,可以使用純文本編輯器(如記事本)。

每次將新字段添加到自定義塊時,都需要將以下PHP代碼添加到塊模板文件中:


只記得更換 在此處添加您的字段名稱 與字段名稱。

例如,我們第一個字段的名稱是reviewer-image,因此我們將以下行添加到模板文件中:


很簡單,不是嗎? 讓我們對其餘字段做同樣的事情:


接下來,我們將在上面的代碼中添加一些HTML標記以進行樣式設置。

例如,您可以將審閱者圖像包裝在img標籤中以顯示圖像。 否則,WordPress將顯示您不想要的圖像URL,對嗎?

您還可以將類名添加到HTML標記中,並將代碼包裝在div容器中以設置塊內容的樣式(我們將在下一步中進行此操作)。

因此,這是塊模板的最終代碼:

最後,將文件命名為block-testimonials.php並將其保存在 夾。

第4步:設置自定義塊的樣式

要設置自定義塊的樣式嗎? 您可以在CSS的幫助下做到這一點。

打開一個純文本編輯器(如記事本),然後添加以下代碼:

.testimonial-block {
	width: 100%;
	margin-bottom: 25px;
}

.testimonial-image {
	float: left;
	width: 25%;
	padding-right: 15px;
}

.testimonial-box {
	float: left;
	width: 75%;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

完成後,將文件命名為block-testimonials.css並將其保存在 夾。

步驟5:將阻止模板文件上傳到主題文件夾

現在,我們上傳 包含我們自定義塊模板文件的文件夾到WordPress主題文件夾。

為此,您需要使用FTP客戶端連接到WordPress網站。 為了獲得幫助,您可以查看有關如何使用FTP將文件上傳到WordPress網站的指南。

建立連接後,轉到/ wp-content / themes /文件夾。 在這裡,您需要打開當前的主題文件夾。

使用FTP進入主題文件夾

現在上傳 包含塊模板文件和CSS文件的文件夾到您的主題目錄。

完成後,您可以進行最後一步來測試您的自定義塊。

注意:Block Lab插件可讓您創建主題特定的塊。 如果更改WordPress主題,則需要將blocks文件夾複製到新的主題目錄。

步驟6:測試新區塊

現在該測試我們的自定義證明書塊了。 您可以前往 頁數 » 添新 創建一個新頁面。

接下來,點擊 添加塊 (+)圖標並蒐索“推薦”塊。 找到它後,單擊它以將自定義塊添加到頁面編輯器。

將自定義塊添加到頁面編輯器

現在,您可以使用自定義塊在此頁面添加推薦。 要添加更多個人鑑定,您始終可以插入新的個人鑑定。

完成後,您可以預覽或發布頁面以檢查其是否正常運行。

就這樣! 您已經為網站成功創建了第一個自定義WordPress區塊。

您知道嗎,您可以在編輯器中使用可重複使用的塊來節省時間? 查閱我們的指南,了解如何在WordPress塊編輯器中輕鬆創建可重複使用的塊並在其他網站上使用它們。

您可能還想查看我們的指南,該指南介紹如何創建自定義WordPress主題而無需編寫任何代碼。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。