如何創建 WordPress 塊模式以加快網站建設

塊模式對於所有 WordPress 用戶來說都是一件大事，在這篇文章中，我將向您展示如何創建自己的塊模式。

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

兩天前，我發布了一個視頻，我向 WordPress 介紹了這個即將到來的概念，稱為博客模式。 它現在是一種實驗性的，我對此感到非常興奮。 而且我認為，如果您將注意力集中在塊模式的潛力上，那麼您就會看到它的潛力，如果您有客戶，可以幫助您更快地交付網站，使他們能夠利用他們的網站。

所以我要給你看。 確切地說如何在此視頻中創建塊圖案。 現在我們要做一些技術人員方面的事情，我知道這是非技術人員的 WordPress 頻道，所以我會盡量讓它簡單，但你是最後會真正看到創建這些塊模式之一是多麼簡單。

所以讓我們繼續看看吧。 所以這裡是它討論這個功能的新版本的頁面。 只能讓普通人創建塊模式。 所以當我向下滾動時，它會為它提供那種模板。 所以它所涉及的只是創建一個叫做自定義函數的東西。

但別擔心，我會讓每個人都超級容易地做到這一點，但這就是那個小代碼片段的所在。 現在，我將在下面的視頻說明中提供一個鏈接。 它會帶你到我的網站。 您將獲得有關如何執行此操作的書面說明。 您可以將這段代碼複製並粘貼到您自己的網站上。

好的，這就是我們需要的。 這是 Gutenberg 的一項新功能，您需要安裝激活的 Gutenberg 插件，因此您需要最低版本 7.8，這是最近發布的。 現在，最終可能會在四到六個月內發生，也許到 2020 年夏末，這將默認包含在 WordPress 中，但現在，如果你想嘗試一下，你將需要這樣做，您將需要安裝 Gutenberg 插件。

接下來你可以做的事情，這是可選的，如果你不知道如何為子主題添加自定義功能，而且我什至不再使用子主題，你可能想要使用這個免費插件，這是最好的免費插件之一。 我曾經遇到過，它被稱為代碼片段。 這將允許我們添加這個自定義功能和一種非常易於使用、易於管理的方式。

好的？ 所以你會需要那個。 這是可選的。 這是一個名為 cadence blocks 的免費插件。 它的作用是為 Gutenberg 添加了許多頁面構建器功能。 它允許您做的事情非常整潔。 您可以拖動列並調整其大小。 它有很多元素添加了很多頁面構建器功能，但對於 Gutenberg，它是一個完全免費的插件。

好的。 現在讓我們跳到我的網站。 所以這裡有一個網站。 現在一切都準備好了。 如果你不知道如何安裝插件，前幾天有人因為我沒有展示如何安裝插件和視頻而生我的氣。 你去插件，你點擊添加新的，然後在這裡你搜索那個插件的名字，然後你點擊。

下載，或者對不起，你現在點擊安裝，然後你激活它。 這是一個非常簡單的過程。 所以我要點擊我安裝的插件，你可以看到我已經安裝了 Gutenberg，這是可選的節奏塊，這裡是代碼片段。 因此，我將繼續激活代碼片段，您可以看到它現在已在此處激活。

然後繼續並單擊代碼片段，您將看到它附帶的一些代碼片段。 這是這個撥動開關，它被撥動了。 它們都已關閉，您實際上不需要保留默認情況下附帶的這些。 您可以直接單擊此處，您可以將它們全部刪除，但我已經繼續並在此處添加了一個稱為塊模式模板。

所以你會怎麼做。 單擊添加新的，您可以在我向您展示的那一小段代碼中命名此塊模式模板，就在此處，但我將在我的網站上為您提供修改後的版本。 您只需將其複制並粘貼到此處，然後單擊“保存更改”。

你不會點擊保存和激活，你會點擊保存更改，我馬上會告訴你為什麼。 好的。 所以現在你要做的是創建這個塊模式。 塊模式只是一個保存的部分。 因此，如果您使用頁面構建器，現在您知道可以保存部分，其中一些帶有預先設計的部分，但用戶體驗，我認為古騰堡要好得多。

因此，您要做的是轉到頁面。 然後點擊添加新的，你會想要命名它。 嗯，實際上讓我擺脫了這次旅行。 您將要命名此塊模式，這正是我們要創建此塊模式的地方。 現在，我現在不打算創建塊模式。

我將向您展示我已經創建的一個，它是 . 就在這兒。 所以這是我創建的塊模式。 你可以看到它是這個部分。 它有這個多彩的背景。 我在這裡有一個標題、一些副標題和幾個按鈕，我放了一個視頻。所以我要把這個作為我的塊模式，這樣我只需點擊兩下鼠標，就可以將它添加到我網站上的任何地方。

所以我要做的是點擊右上角，有這三個點。 它們有點難看，當你點擊它時，這裡有這個選項，上面寫著代碼編輯器。 因此，您將要單擊代碼編輯器，然後它會向您顯示與使該博客成為塊模式博客模式有關的所有代碼。

好的？ 因此，您將單擊此處，然後單擊計算機上的控制 a 或命令 a 以突出顯示所有內容。 他們是新的一年。 把它放在你的剪貼板中。 所以我要控制C。所以現在它在我的剪貼板中。 所以現在我要做的就是離開這裡。 實際上，如果你想離開這個視圖，這裡有一個小 X 表示退出代碼編輯器，現在它將以正常方式顯示它就在這裡。

好的。 因此，如果需要，您可以將其保存為草稿，但您不需要它。 這只是為您創建這個塊模式，您可以創建一個任何東西的塊模式，它不必是一個塊的東西。 例如，它可以是博客文章的完整模板。 好的，所以現在我要點擊 w 它讓我離開塊編輯器的地方。

現在我將回到代碼片段。 所以這裡就是我創建塊模式模板的地方。 我將單擊克隆，現在它創建了它的克隆，然後我將單擊標題開始編輯它。 所以對於標題，我將把它改成一個對管理有意義的標題。

所以對我來說，我只是要命名它。 有視頻的英雄。 所以現在我知道當我將來查看列表時這是什麼。 好的，這裡有幾件事您需要編輯。 三件事。 超級簡單。 第一個是名字。 所以這可以是任何名稱，它必須全部小寫，沒有空格或時髦的字符。

因此，我將繼續並立即輸入名稱。 你可以看到我用視頻將它命名為英雄。 接下來，在這裡你需要輸入一個標題。 所以我們正在替換這個詞標題，這就是將要顯示的內容。您正在查看博客模式列表，塊，而不是博客塊模式。 如果你注意到，你可以，這是友好的名字，所以它可以有空格。

呃，我不會把任何時髦的角色放在那裡。 空間很好。 所以這就是這個列表a中要顯示的內容，接下來就是模式a。 您只需將剛剛複制的內容粘貼到剪貼板中即可。 現在我要你記下一件事。 對於這些中的每一個。 我在正面和背面都留下了小撇號。

您會看到必須存在撇號。 如果您不小心將其刪除，請立即將其放回原處。 好的。 我們只是在改變。 我們只是替換文本佔位符。 所以在這裡，我不想替換所有東西。 我只是想替換單詞模式，所以我要突出顯示它，然後我要粘貼我複制的內容。

它就在那裡。 所以現在我要向下滾動，這次我要點擊保存更改並激活。 所以現在它應該說片段更新和激活。 當我點擊所有片段時，您現在可以看到這個帶有視頻的英雄已打開。 因此，將來對於其他塊模式，我想去它所說的塊模式模板並單擊克隆並以這種方式製作該塊模式模板。

這樣我總是有模板在那裡。 現在，如果您已經知道並且有自己的添加自定義函數的方式，那麼您不需要代碼片段以及所有這些東西，您可以將它放在您想要放置的位置。 如果您問我，這只是一種更容易管理它的方法。 好的，所以現在我要去我的頁麵點擊添加新的，如果你想看的話。

塊模式。 呃，這裡是它的圖標。 當你將鼠標懸停在它上面時，它會顯示塊模式。 當我點擊它時，你會看到一些正在試驗的塊模式。 但是當你向下滾動時，你會看到我創建的塊模式。 真正巧妙的是它會生成縮略圖預覽。

它動態地做到這一點。 您擁有的頁面構建工具甚至無法做到這一點。 嗯，它使管理塊模式變得更加容易。 所以，你可以在這裡看到它說有模板的英雄。 現在，如果我想在我網站的任何地方使用它，只需單擊鼠標。 然後就是這樣。 那時我要做的就是開始更改一些文本，將鏈接更改為按鈕。

我可以點擊這裡，我可以更改視頻。 所以。 這就是您創建塊模式的方式。 現在這是一件大事，我認為因為將要發生的事情是一個主題。 開發人員和插件創建者，他們將能夠為您創建這些塊模式，因此使用 WordPress 已經包含的本機塊構建工具構建網站將變得更快、更快、更容易。

沒有什麼可買的，沒有代碼膨脹。 沒有這些東西，而且。 什麼讓它更進一步。 您可以看到創建自己的塊模式是多麼容易，並且很容易在列表中看到它。 點擊一個按鈕，它就會放在那裡。 因此，現在您可以考慮，當您擁有自己的塊模式庫時，構建網站會變得多麼容易。

因此，如果您為客戶創建網站並且不想使用頁面構建器。 您只想使用內置的塊生成器。 您可以創建自己的模式庫。 你看到它是多麼容易。 我能做到。 你能做到這一點。 嗯，您可以創建自己的塊模式庫，您可以從一個站點移動到另一個站點，並且您可以向您的客戶展示他們如何構建它。

現在，這不僅適用於頁面，還適用於帖子，並且不僅限於您看到的那個部分。 基本上可以在頁面上創建的任何內容。 您可以製作塊圖案。 因此，如果您僅將塊構建器用於博客文章，並且您希望在博客文章中反複使用某些元素來增強博客文章的佈局，那麼您可以為它。

這真的很容易。 一鍵即可使用。 事實上，整個博客文章模板。 因此，如果您為博客文章的各個部分遵循了一個公式，您可以將整個博客文章設置為塊模板。 一鍵應用，然後您所要做的就是指向、單擊和編輯。

所以在我們結束之前的最後一件事，這是一個新概念，在接下來的幾個月裡需要考慮。 立即嘗試。 它不完全是雪人，雪人。 它還沒有為黃金時段做好準備，因為如果你注意到了，嗯，我看到的唯一負面因素就是你在看博客的時候。 看到那裡我又去了。

如果您正在查看塊模式，它只是一個更高的文章列表，您必須滾動瀏覽，因此他們需要改進分類和組織的過程。 也許他們有某種界面讓它更直觀和更容易使用。 如果你將有 50 個不同的塊。

圖案。 所以他們只需要改進它。 代碼上的一些語法可能會有所改變。 誰知道這最後什麼時候出來。 但這段視頻的全部目的只是向您展示即將發生的事情，以便您可以開始。 思考它如何應用於您的工作流程以及您作為網站建設者所做的事情。

無論如何，這就是我在這篇文章中為你準備的全部內容。 我希望您會喜歡這樣對 WordPress 未來的高級展望，如果您確實欣賞此視頻或發現了一些價值，請考慮給它豎起大拇指並分享此視頻，以便人們可以看到即將發生的事情。