因此,今天我們將解釋如何在古騰堡中建立自訂區塊。請記住,為此您需要具備 HTML 和 CSS 的基本知識,因此,如果這不是您的情況,最好使用外掛程式。在 dinahosting,我們推薦Ultimate Addons for Gutenberg。
如果您閱讀了我們上一篇關於 Gutenberg 的文章,您就會清楚它會繼續存在,並將成為未來幾年 WordPress 的視覺化編輯器。
在這裡,我們為您提供了主要古騰堡區塊的快速回顧,您將有足夠的時間來建立一個非常有價值的頁面。但是,如果您是一個有設計問題或需要創建自訂區塊的人,您肯定會發現作為標準提供的用於佈局網站頁面和帖子的區塊數量有點短。
你還在嗎?然後您將進入在古騰堡創建自訂區塊的令人興奮的世界,所以...祝大家好運!
目錄
1步驟1.插件安裝
2步驟 2. 新增區塊
3步驟 3. 建立區塊模板
4步驟 4. 一點風格
5步驟 5. 享受您的街區
步驟1.插件安裝
為了在古騰堡中創建自訂區塊,我們將使用BlockLab插件,其功能是在內部與模板的後端和前端進行通訊。因此,第一步是在我們的 WordPress 中安裝這個外掛。
在 WordPress 介面的左側選單中,我們前往外掛程式 > 新增外掛程式。
我們尋找 Block Lab 外掛程式並點擊立即安裝。
如果一切順利,我們現在就可以安裝插件了。下一步是激活它。
啟動 Blocklab 外掛程式以在古騰堡 (WordPress) 中建立自訂區塊 |迪納託管
我們轉到插件部分,尋找 BlockLab 並點擊啟動。
步驟 2. 新增區塊
啟動 BlockLab 後,我們進入此部分,然後添加新的。
用於在 Gutenberg 中建立自訂區塊的 Blocklab 外掛程式介面 (WordPress) |迪納託管
現在您必須涵蓋以下欄位:
姓名
代表塊圖標
我們要介紹的類別
關鍵字
以及其他領域。請記住,您保留的內容越完整,第三方就越容易 加拿大電報手機號碼列表 在您的 WordPress 網站上運作。
在我們的例子中,我們要做的是準備一個人員文件作為範例。它通常是公司組織結構圖建構中廣泛使用的元素。
我們將輸入圖像、姓名、您的位置和網路連結(LinkedIn 和個人網站)。
儘管在本範例中我們將建立這種類型的區塊,但您可以建立最適合您需求的區塊。官方網站上有一些教學。
當您涵蓋所有欄位後,請不要忘記按一下「發布」。
步驟 3. 建立區塊模板
這時就開始需要 HTML 和 CSS 知識了。我們將把在 WordPress 後端創建的最後資料與將在瀏覽器中顯示的視圖連接起來。
在我們的例子中,我們將建立檔案block-ficha-persona.php(不要害怕,您不必了解 PHP,您會發現它是非常容易理解的程式碼)。
我建議您使用程式碼編輯器來簡化標記任務。一些免費且最常用的是Brackets和Atom。
在此步驟中,您在上一個步驟建立區塊中建立的欄位的名稱值是必需的。
使用 Blocklab 外掛程式在 Gutenberg 中建立自訂區塊 (WordPress) |迪納託管
在這裡,我向您展示了我們正在使用的block-ficha-persona.php檔案的具體範例的基本標記: