[ad_1]
我們不是都喜歡 WordPress 嗎？ 該平台自成立以來就取得了巨大的成功，開發人員不斷添加新功能。 最近最引人注目的功能之一是 WordPress 塊編輯器，代號為 Gutenberg。
Gutenberg 為 WordPress 用戶提供了一種令人興奮的發布內容和自定義網站的新方式。 它非常易於使用，這對初學者和開發人員來說都是個好消息。 如果您使用的是最新版本的 WordPress，那麼您已經熟悉塊編輯器和塊的概念。
默認情況下，WordPress 塊編輯器帶有一些塊，允許您包含文本、圖像、引號、音頻、視頻、嵌入等。 最重要的是，還有大量 古騰堡附加組件 在那裡，您可以毫不費力地擴展編輯器。
不過，您可能有特定的需求，會提示您創建自己的自定義塊。 這是今天的帖子的來源。在幾段中，您將準確了解如何創建自定義 Gutenberg 塊以滿足您的特定需求。
事不宜遲，讓我們開始吧，因為有很多東西要學。
無論如何，什麼是塊？
如果您是完美的初學者，您可能想知道這家古騰堡業務的全部內容。 我知道，我當時很困惑 古騰堡 被介紹了。 但沒有人是罪魁禍首，我們都習慣了 經典編輯器 開始轉變是不舒服的。
儘管如此，無論我們喜歡與否，WordPress 塊編輯器都將繼續存在。 這正是為什麼您應該儘可能多地了解古騰堡（以及隨之而來的一切）以充分利用它的原因。
塊將段落、標題、媒體和嵌入都視為組件，當它們串在一起時，構成存儲在 WordPress 資料庫中的內容，用嵌入的媒體和簡碼取代了自由格式文本的傳統概念。 – 塊編輯器手冊
過去，WordPress 用戶依靠自由格式的文本和簡碼來添加內容。 古騰堡使用積木。 新的編輯器允許您使用塊單元來創建易於管理的豐富且靈活的布局。 目前，您可以將塊編輯器用於帖子和頁面，但有積極的計劃支持 未來全站編輯.
古騰堡編輯器顯示一些塊
使用塊使在 WordPress 中創建內容非常令人耳目一新。 此外，許多現有插件都支持新的編輯器，並帶有現成的塊，使從所述插件添加內容變得輕而易舉。 編輯器允許您將塊拖放到頁面上，以便您可以更快地點擊發布按鈕。
就像直接內置在 WordPress 中的頁面構建器一樣。
如果您熟悉 Elementor 等可視化頁面構建器，那麼您可能熟悉拖放頁面構建的概念。 Gutenberg 試圖將拖放式站點構建完全整合到 WordPress 核心中。 隨時查看我們的 Gutenberg Builder for WordPress 分步指南 了解更多。
有了這些，讓我們進入今天帖子的最佳部分。 讓我們學習如何創建一個簡單的塊。 您可以手動完成，也可以使用插件，例如 創世紀自定義塊 （以前的 BlockLab）， 懶惰的塊， 或者 ACF. 創建自定義塊有點技術性，所以就今天的帖子而言，我們將使用一個插件。
如何創建自定義塊（使用 Genesis 自定義塊）
走插件路線更容易，因為從頭開始創建自定義 Gutenberg 塊需要很好地掌握 HTML、CSS、PHP，更重要的是 JavaScript。 您還需要了解 React，它會讓初學者陷入困境。
在下一節中，我們將使用 StudioPress 和 WPEngine 以及其他開發人員提供給您的 Genesis Custom Blocks。 Genesis Custom Blocks 的免費版本可在官方 WordPress 存儲庫中獲得，這意味著我們可以將其安裝在 WordPress 管理儀錶板中。
安裝創世紀自定義塊
登錄到您的 WordPress 管理儀錶板，然後導航到插件 > 添加新的，如下所示。
接下來，在關鍵字搜索框中輸入「Genesis Custom Blocks」，然後點擊 Install Now 按鈕：
之後，激活插件以開始聚會。
你做得很好🙂
接下來，讓我們創建一個新的自定義塊。 出於說明目的，讓我們創建一個自定義號召性用語 (CTA)，我們將在我們發布的每篇文章的末尾添加它。 最好的部分是您可以重複使用塊來省去一遍又一遍地創建相同塊的麻煩。
從您的 WordPress 管理菜單中，導航到自定義塊 > 添加新的，如下所示。
這樣做將引導您進入以下頁面，您可以在其中找到創建自定義塊的所有選項（在我們的示例中為 CTA）：
這裡有幾句話來解釋您在上面的屏幕截圖中看到的內容。 從頂部開始，你有。
主要編輯區：
- Builder – 您可能會在這裡花費大量時間來設計您的自定義塊。 Builder 允許您添加標題、欄位、slug、關鍵字、類別並預覽您的自定義塊。 您將學習如何添加欄位。
- 模板編輯器——設計您的自定義塊（即添加各種欄位）後，您需要在模板編輯器中創建一個塊模板（閱讀，添加一點代碼）。 我們將在設計 CTA 時了解更多信息。
- 編輯器預覽 – 這允許您在 WordPress 塊編輯器中預覽自定義塊。
- 前端預覽 – 在這裡，您可以預覽自定義塊在您的網站上的外觀。
- 編輯器欄位 – 將在帖子或頁面的主要編輯區域顯示欄位（您知道，就像您在 WordPress 編輯器中查看常規帖子的方式一樣）
- 檢查器欄位 – 將在塊檢查器下方的右側邊欄中顯示該欄位。
邊欄選項
- Slug – slug 會根據您給自定義塊的標題自動填充。 創建塊模板時很重要。
- 圖標 – 此選項允許您向自定義塊添加圖標。
- 類別 – 這允許您將類別分配給您的自定義塊。 您可以使用內置類別之一對自定義塊進行分類，也可以創建一個全新的類別。
- 關鍵字 – 添加最多三個與您的自定義塊相關的關鍵字，以便人們可以在塊選擇器中輕鬆找到它。
- 在模態中打開塊欄位而不是在原地渲染 – 如果您想在模態中打開欄位，請打開。 如果您有一個包含許多欄位的自定義塊，這將很有用。
- 帖子類型 – 勾選框以允許您的自定義塊顯示在每種帖子類型上。 例如，如果您取消選中帖子，則該塊根本不會出現在任何帖子上。
創建自定義塊
現在您對用戶界面以及每個部分的作用有了更好的了解，讓我們捲起袖子開始工作吧。
在 Builder 中，給您的自定義塊一個合適的標題。 我將為此使用 CTA，如下所示。
在添加新欄位之前，讓我們添加一個圖標、關鍵字並為自定義塊選擇一個類別，如下所示。
那組，讓我們在自定義塊中添加一些欄位。 對於我們的示例 CTA 塊，我們將按以下順序僅添加三個欄位：圖像、一些文本和一個允許人們下載虛構電子書的文件欄位🙂
添加塊欄位
在編輯器欄位部分，單擊加號 (+) 圖標以添加第一個欄位，如下所示。
接下來，讓我們添加一個圖像欄位。 從邊欄中，將欄位類型設置為圖像並定義其他選項。 另外，請注意 slug（我將我的設置為 image-field），因為我們將在創建塊模板時使用它。 見下圖。
之後，以類似的方式添加文本和文件欄位。
不要慶祝，還有一步要走。 切換到模板編輯器 > 標記：
我的已經有一些代碼，但你的將是空白的🙂
在這裡，我們將設計您的自定義塊在您的網站上的外觀。 模板編輯器接受 HTML、CSS 和欄位 slug（您必須將其括在 2 個括弧中）。 如果需要使用 PHP，可以使用 PHP模板方法 反而。
別擔心，這很容易。
在模板編輯器中，在標記選項卡下（見上圖），添加以下 HTML 標記（代碼）：
當您編寫 HTML 標記時，您會注意到模板編輯器會為您自動完成欄位段（例如 {{image-field}} ）🙂
接下來，去 CSS 部分添加一些簡單的樣式。
您可以添加您想要的樣式，但這是我正在使用的：
.cta-block { 文本對齊：中心； 背景顏色：橙色； 寬度：100%； 高度：自動； 邊框：2px 純橙色； } .dwnld { 背景顏色：黑色； 邊框：2px純黑色； 顏色：綠色； 填充：5px 10px； 文本對齊：居中； 顯示：內聯塊； 字體大小：20px； 邊距：10px 30px； 游標：指針； 邊框半徑：2px； }
你都準備好了！ 點擊發布：
要查看您的新自定義塊的運行情況，請返回您的 WordPress 管理儀錶板並導航到帖子 > 添加新的（它也適用於頁面）：
像往常一樣創建帖子，單擊加號 (+) 添加新塊，然後選擇新的閃亮自定義塊，如下所示。
接下來，根據需要填寫您的自定義塊並發布您的帖子：
現在，如果我在前端查看我的新自定義 CTA 塊，我會看到：
我的自定義 CTA 就在那裡！ 請不要介意我的設計能力——當然，在現實生活場景中，你會想花一些額外的時間來設計你的塊。 但我希望你今天在這裡學到了一些東西。
使用 Genesis Custom Blocks 和 Lazy Blocks 等工具構建自定義塊不一定是一項具有挑戰性的任務。 除此之外，您還可以根據需要使自定義塊複雜或簡單。 如果您必須手動創建自定義塊，請學習一些 JavaScript 課程。 這會有所幫助🙂
有什麼想法或問題嗎？ 請在下面的評論中告訴我們。