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