你想創建一個 WordPress插件 簡單的古騰堡街區？
我們不是都喜歡 WordPress 嗎？ 該平台自成立以來取得了巨大的成功，開發人員不斷添加新功能。 最近的突出功能之一是 WordPress 塊編輯器，代號 古騰堡.
Gutenberg 為 WordPress 用戶提供了一種令人興奮的新方式來發佈內容和自定義他們的網站。 它非常易於使用，這對初學者和開發人員來說都是個好消息。 如果您使用的是最新版本的 WordPress，那麼您已經熟悉塊編輯器和塊的概念。
默認情況下，WordPress 塊編輯器帶有一些塊，可讓您包含文本、圖像、引號、音頻、視頻、嵌入等。除此之外，還有大量 Gutenberg 附加組件可讓您在不中斷的情況下擴展編輯器出汗。
但是，您可能有特定的需求，提示您創建自己的自定義塊。 在本文中，我們將分幾段向您展示如何創建自定義 Gutenberg 塊以滿足您的特定需求。
事不宜遲，讓我們開始吧，因為有很多東西要學。
但是之前，如果您從未安裝過WordPress發現 如何安裝WordPress博客7步驟 et 如何找到，安裝和你的博客激活WordPress主題
然後回到為什麼我們在這裡。
到底什麼是塊？
塊將段落、標題、媒體和嵌入視為組件，當它們串在一起時，構成存儲在 WordPress 數據庫中的內容，用媒體和嵌入取代傳統的文本概念。內置短代碼。
過去，WordPress 用戶依靠文本和簡碼來添加內容。 古騰堡使用 集團. 新的編輯器允許您使用塊單元來創建易於管理的豐富而靈活的佈局。 目前，您可以將塊編輯器用於帖子和頁面，但有積極的計劃採取 未來支持全站編輯.
使用塊使 WordPress 中的內容創建非常令人耳目一新。 此外，許多現有插件都支持新的編輯器，並帶有現成的塊，可以輕鬆地從所述插件添加內容。 編輯器允許您將塊拖放到頁面上，以便您可以更快地點擊發布按鈕。
就像直接集成到 WordPress 中的頁面構建器一樣。
如果你熟悉 頁面構建器，例如 Elementor，您可能對拖放頁面構建的概念很熟悉。 Gutenberg 嘗試將拖放式網站構建完全集成到 WordPress 核心中。
那麼讓我們來看看今天這篇文章中最精彩的部分。 讓我們學習如何創建一個簡單的塊。 您可以手動執行此操作，也可以使用插件，例如 創世紀自定義塊 （以前的 BlockLab）， 懶惰的塊 ou 活性碳纖維. 創建自定義塊有點技術性，所以就今天的文章而言，我們將使用插件。
如何創建自定義塊（使用 genesis 自定義塊）
走插件路線更容易，因為從頭開始創建自定義 Gutenberg 塊需要對 HTML、CSS、PHP 以及最重要的 javaScript 有很好的理解。 你還需要了解 React。
在下一節中，我們將使用 Genesis Custom Blocks。 它的免費版本在官方 WordPress 存儲庫中可用，這意味著我們可以將它安裝在 WordPress 管理儀表板中。
安裝創世紀自定義塊
登錄到您的 WordPress 管理儀表板並導航到 擴展>添加， 如下所示。
然後輸入“ 創世紀自定義塊 在關鍵字搜索框中和 點擊 蘇勒布頓 立即安裝
在那之後， 激活 幫助您入門的插件
接下來，讓我們創建一個新的自定義塊。 出於說明目的，讓我們創建一個自定義號召性用語 (CTA)，我們將添加到我們發布的每篇文章的末尾。 最好的部分是您可以重複使用這些塊，以免您一遍又一遍地創建相同的塊。
在您的 WordPress 管理菜單中，導航到 自定義塊 > 添加新塊，正如我們在下面強調的那樣。
這將帶您進入下一頁，您將在其中找到創建自定義塊（在我們的示例中為 CTA）的所有選項：
這裡有幾句話來解釋您在上面的屏幕截圖中看到的內容。 從頂部開始，您擁有它。
主要編輯區域：
- 平台 – 您可能會在這里花費大量時間來設計您的自定義塊。 這 建造者 允許您添加標題、字段、slug、關鍵字、類別並預覽您的自定義塊。 您將學習如何添加字段。
- 模板編輯器 – 設計您的自定義塊（即添加各種字段）後，您將需要創建一個塊模板（讀取，添加一些代碼） 模型編輯器. 我們將在設計 CTA 時了解更多信息。
- 編輯器預覽 – 它允許您在 WordPress 塊編輯器中預覽自定義塊。
- 前端預覽 – 在這裡，您可以預覽自定義塊在您的網站上的外觀。
- 編輯器字段 - 將在帖子或頁面的主編輯區域顯示字段（你知道，就像你在 WordPress 編輯器中看到你的常規帖子一樣）
- 督察場 – 在塊檢查器下方的右側欄中顯示該字段。
側邊欄選項
- 鼻涕蟲 – 它會根據您給自定義塊的標題自動填充。 這在創建塊模型時很重要。
- 圖標 – 此選項允許您向自定義塊添加圖標。
- 類別 – 它允許您為自定義塊分配一個類別。 您可以使用內置類別之一對自定義塊進行分類，也可以創建一個全新的類別。
- 關鍵詞 - 向您的自定義塊添加最多三個相關關鍵字，以便人們可以在塊選擇器中輕鬆找到它。
- 在模態中打開塊字段而不是在原地渲染 – 如果要在模式中打開字段，請啟用。 如果您有一個包含許多字段的自定義塊，這很有用。
- 文章類型 – 選中復選框以允許您的自定義塊顯示在每種帖子類型上。 例如，如果您取消選中帖子，則該塊將不會出現在任何帖子上。
創建自定義塊
現在您對用戶界面和每個部分的作用有了更好的理解，讓我們開始工作吧。
在 建造者-建造者-，給您的自定義塊一個適當的標題。 我們將為此選擇 CTA，如下所示。
在添加新字段之前，讓我們添加一個圖標、關鍵字並為自定義塊選擇一個類別，如下所示。
為此，讓我們在自定義塊中添加一些字段。 對於我們的示例 CTA 塊，我們將按以下順序僅添加三個字段：圖像、一些文本和一個允許人們下載電子書的文件字段。
另請閱讀： 5 WooCommerce插件可批量編輯您的產品
添加塊字段
在節 編輯器字段點擊 加號 (+) 圖標 添加第一個字段，如下所示。
接下來，讓我們添加一個圖像字段。 在邊欄中，設置 字段類型開啟 圖片 並設置其他選項。 此外，請考慮 slug，因為我們將在創建塊模型時使用它。
之後，以相同的方式添加文本和文件字段。
切換到 模板編輯器 > 標記。
在這裡，我們將設計我們的自定義塊在您的網站上的外觀。 模型編輯器 接受 HTML、CSS 和字段 slug（必須放在 2 個方括號之間）。 如果您需要使用 PHP 語言，您可以使用創建模板 PHP建模方法
別擔心，這很容易。
舞蹈 模型編輯器， 在下面 標記選項卡，添加以下代碼：
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>在編寫代碼時，您會注意到 模型編輯器 為您自動完成字段 slug（例如 {{image-field}} ）。
然後轉到部分 的CSS 使用以下代碼添加簡單樣式：
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
您可以根據需要自定義這些樣式，
點擊 發布 :
要查看您的新自定義塊，請返回您的 WordPress 管理儀表板並像往常一樣創建帖子，單擊 加號（+） 添加新塊並選擇新的自定義塊，如下所示。
接下來，根據需要填寫您的自定義塊並發布您的消息：
現在，如果我們在前端檢查我們新的自定義 CTA 塊，這就是我們所看到的。
我們的自定義 CTA 就在那裡！ 請不要擔心我們的設計能力——當然，在現實生活中，你會花更多的時間來定制你的塊。 但我們希望你在這裡學到了一些東西。
其他推薦資源
我們還邀請您諮詢 RESSOURCES 下面更深入地了解和控制您的網站和博客。
- 10 個附屬 WordPress 插件來創建程序
- 如何在 WordPress 中添加多列
- 如何在 WordPress 中添加多列
- 如何在WordPress上使用不同的背景
- Elementor：如何在懸停時創建動畫
結論
構建自定義塊並非易事。 但隨著 WordPress插件 例如Genesis Custom Blocks和Lazy Blocks等，無論您是否是初學者，您都將成功創建它們。 從最基本的到復雜的，取決於您的需求。
這就是本文向您展示如何將自定義字體添加到 WordPress 網站的內容。 我們邀請您嘗試。 如果您有任何疑慮或建議，請在 評論.
但是，您也可以諮詢我們的 RESSOURCES，如果您需要更多的元素來執行創建Internet網站的項目，請參考我們關於 WordPress博客創建 或者那個 Divi：有史以來最好的WordPress主題.
與此同時， 在您不同的社交網絡上分享此文章.
...
