來源:派臣科技|時間:2020-11-20|瀏覽:次
塊模式有可能使在WordPress中發(fā)布內(nèi)容比以往任何時候都更容易、更靈活。
例如,假設(shè)您總是發(fā)現(xiàn)自己在您的帖子中添加了相同的兩個塊。也許是兩個并排的按鈕。如果你以前做過這樣的事情,那么你就知道怎樣才能做到這一點:
添加一個包含兩列的列塊
接下來,在左列中添加一個按鈕塊
然后。向右列添加一個按鈕塊
顯示帶有兩列的輪廓,每列都有一個表示button作為標(biāo)簽的藍(lán)色圓角按鈕。
這就是塊模式被設(shè)計來解決的問題。
塊模式允許您將塊組合成一個組,以便在需要的時候重用,而不是放入多個塊來創(chuàng)建一個元素。WordPress甚至提供了幾種開箱即用的塊模式。
塊菜單作為內(nèi)容編輯器左側(cè)的邊欄打開,Patterns選項卡處于活動狀態(tài)。在模式菜單上方有一個灰色的搜索框。菜單下面是前兩個模式的預(yù)覽,包括兩個按鈕、三個按鈕和列。
以我們的按鈕為例,我們可以將這些塊組合在一起,并將它們保存為一個塊以供以后使用。但在這之前,讓我們先畫出另一個重要的區(qū)別。
塊模式與可重用塊非常相似。
塊編輯器已經(jīng)允許我們完成塊模式對可重用塊的處理:將一些塊作為一個組放入編輯器中,單擊小菜單圖標(biāo),然后選擇“添加到可重用塊”選項。
太酷了!現(xiàn)在給它一個名字,當(dāng)我們需要兩個緊挨著的按鈕時,我們可以使用它。
那么,當(dāng)可重用塊還可以保存一組塊時,為什么要使用塊模式呢?
一個原因是,當(dāng)你對一個可重用的塊做了一個改變時,這些改變將自動應(yīng)用到任何塊被使用的地方,無論是在同一個崗位上,還是在另一個崗位上。可以將一個可重用塊轉(zhuǎn)換為一個常規(guī)塊,這樣更改只適用于該實例,但這會破壞分組塊的布局,并需要修改一堆內(nèi)容。
另一方面,塊模式是一開始就可以編輯的。它們只是提供了塊的布局,你可以在其中創(chuàng)建和定制你的內(nèi)容。
相關(guān):查看要與事件日歷一起使用的這些塊模式。
如何注冊塊模式
WordPress引入了一個新的register_block_pattern()函數(shù),就像它的名字一樣,它注冊了一個塊模式,以便你將來可以使用它。它的所有文檔都可以在WordPress.org上找到,所以我們不會在這里詳細(xì)說明。重要的是了解它所需要的論證。這是兩個必需的參數(shù):
標(biāo)題:您將在模式菜單中看到的模式名稱。
內(nèi)容:模式代碼。
描述:一個簡短的描述模式的簡介。
categories:將模式與相同類別中的其他模式進(jìn)行分組。
關(guān)鍵字:告訴WordPress如果在塊菜單中搜索某些單詞應(yīng)該返回作為搜索結(jié)果的模式。這對于使模式更容易被發(fā)現(xiàn)非常方便。例如,在搜索“three”或任何其他單詞組合時,可以找到一個包含一行三張卡片的模式,稱為“cards”。
viewportWidth:這給了你一點額外的控制模式在塊插入器中的外觀,比如將其設(shè)置為全寬項。
首先,讓我們定義一個模式類別。
這是完全可選的,并且只有在您想在一個全新的類別下注冊一個模式時才真正必要。
如果你可以使用其中任何一種,那太棒了!如果沒有,那就創(chuàng)建一個!無論哪種方式,如果你不想分類一個模式,它會自動進(jìn)入一個“未分類”的類別,就像未分類的文章一樣。
正如您所看到的,它實際上只需要一個標(biāo)簽參數(shù)。my-block-patterns的部分只是你插件或主題的命名空間…無論你注冊塊模式的地方。
接下來,在WordPress中創(chuàng)建模式。
現(xiàn)在,我們可以在register_block_pattern()函數(shù)中直接為模式編寫代碼。但這將是對耐心的考驗。在塊編輯器中勾畫模式的草圖,然后將代碼復(fù)制到函數(shù)中,這樣做要容易得多。
首先,創(chuàng)建一個組。然后,在那個組中放下一些積木。接下來,選擇組,打開塊選項菜單,選擇“復(fù)制”選項。
顯示包含兩個黑色按鈕的選定組,在組內(nèi)容上展開選項菜單,選擇復(fù)制選項。
復(fù)制塊復(fù)制塊的HTML和標(biāo)記。這就是我們需要的內(nèi)容參數(shù)寄存器函數(shù)。
但首先……
我們需要對復(fù)制的代碼進(jìn)行轉(zhuǎn)義。
這是正確的。我們不能簡單地把它粘貼進(jìn)去。幸運(yùn)的是,有一個在線工具可以幫我們擺脫代碼。粘貼到那里,計時“Escape”按鈕,然后復(fù)制它輸出的代碼。
顯示用于轉(zhuǎn)義代碼的在線工具。這里有一個用于粘貼代碼的紋理,需要在包含生成代碼的另一個紋理之上轉(zhuǎn)義。
先拿著這個。我們馬上就需要它。
注冊模式。
我們有一些模式的代碼。我們有一個記錄模式的函數(shù)?,F(xiàn)在,讓我們把它們放在一起來創(chuàng)建一個圖案。
開始使用模式!
現(xiàn)在我們可以回到編輯器。打開塊插入器,搜索模式,并從結(jié)果中選擇它。
在塊插入程序中顯示兩個按鈕示例模式,該模式在發(fā)布內(nèi)容的左側(cè)打開。
開始在事件日歷中使用塊模式。
如果我們沒有帶一些模式,這篇文章是不完整的。因此,我們創(chuàng)建了一個小擴(kuò)展,您可以安裝添加一些模式,以使用與事件日歷。