買預售屋看樣品屋時,建商早就把沙發、窗簾、餐桌全部擺好,你只要決定喜不喜歡這個風格,頂多換張沙發顏色,不必自己從水泥牆開始想空間怎麼隔、家具怎麼擺。WordPress 的區塊編輯器裡也有這麼一間樣品屋,叫做區塊樣板(Block Pattern)——它是官方或佈景主題已經幫你組好的一整組區塊,插入頁面之後可以照自己的需求調整文字、圖片、顏色,不必從空白頁面一個個疊出標題、欄位、按鈕。
多數人剛用區塊編輯器排版時,還是習慣一塊一塊疊:先拉一個群組,再塞欄位,再放圖片,對齊調到懷疑人生。常做編排的人早就不這樣做,插入器裡藏著現成的版面組合,幾秒鐘就能把一段版面立起來,剩下的只是換內容,排版速度自然快上一截。
先從區塊樣板實際上是什麼、跟另一個容易搞混的同步樣板差異在哪裡講起,再一路拆到怎麼找、怎麼套,以及換主題之後又會發生什麼事。

區塊樣板是什麼?插入後各自獨立的成套版面
WordPress 官方教學把區塊樣板定義成一組已經事先組好、可以再調整的預製設計或版面,不是單一個區塊,而是一整組已經排好的區塊組合,標題、欄位、按鈕、圖片可能一次到位,插入之後才由你動手改內容,不必自己一層層疊出巢狀結構。跟直接拉一個空白欄位區塊相比,起手式完全不一樣,一個要站在毛胚屋裡自己想隔間,一個能直接站進已經裝潢好的樣品屋調整家具。
套用之後如果想把調整好的版面存成以後還能重複使用的常用樣板,牽涉到另一套自訂與登記的做法,跟直接套用內建樣板不一樣。
編輯器裡還有一種外觀很像、行為卻完全不同的東西,叫同步樣板,舊版介面稱它可重複使用區塊。插入同步樣板之後,它在工具列上會帶一個紫色圖示,滑鼠移上去會提示「編輯這個樣板也會更新所有用到它的地方」。如果同一個同步樣板在 10 篇文章裡都插入過,改其中一處,其他地方都會跟著變。這篇要教的一般樣板剛好相反,插入之後就變成該篇文章自己的內容,各自獨立,改一個完全不影響其他地方用到的同一個樣板。看樣板縮圖旁邊有沒有那顆紫色圖示,就是分辨兩者最快的方法。
差別聽起來抽象,用途卻很好懂。公司電話、地址這種全站都要一致的資訊適合用同步樣板,改一次全站生效;每篇文章開頭的介紹區塊、每個作品案例的展示版面,通常每篇內容都不一樣,適合用一般樣板,插進去就是自己的,想怎麼改都不影響別處。

樣板來源包含核心、主題與外掛三處
插入器裡看到的樣板組合,並不是編輯器內建寫死的固定清單,而是被登記進來的,而且登記者不只一個。WordPress 開發者手冊寫得很直接,編輯器本身內建幾組核心樣板,佈景主題與外掛的作者可以用一支叫 register_block_pattern 的函式,再登記額外的自訂樣板進來。同一台編輯器,實際能選的樣板組合會依你目前用的佈景主題和啟用的外掛而不同。
3 個來源各有各的角色。核心樣板是 WordPress 本身自帶的,不管換什麼主題都在;佈景主題附帶的樣板通常數量最多,尤其是支援全站編輯的區塊主題,設計者往往會把常用的版面(標題區、精選文章區、頁尾聯絡資訊)都預先做成樣板附在主題裡,插入就能用,風格還自動對上主題的配色與字體;外掛附帶的樣板則多半跟外掛功能綁在一起,比較常見於做電商、活動報名、作品集這類特定用途的外掛。
同一份開發者手冊在描述樣板的屬性時,也把來源歸屬寫進了規格裡。外掛登記樣板時會傳入 source 參數值 plugin、主題登記時傳入 theme,官方直接把核心、主題、外掛定義成 3 種不同的來源身分。

插入器樣板頁籤是最快的套用入口
實際在文章或頁面編輯畫面裡套用樣板,最快的路徑是插入器。點編輯器左上角的加號,這顆按鈕本身就叫插入器,打開之後除了預設的區塊頁籤,旁邊還有一個樣板頁籤,切過去就是找樣板的地方。

打開樣板頁籤,最上面通常先看到自己之前建立過的樣板,再往下捲,就是目前這個佈景主題附帶的所有樣板,依類別分組排列,像是標題區、文章列表、團隊介紹、頁尾這幾種常見類別。點進某個類別,可以看到一排縮圖預覽,大概知道每個樣板長什麼樣子;如果想一次看完所有選項,可以點頁面底部的「探索全部樣板」,會開一個大圖預覽視窗,把所有樣板攤開來瀏覽,找到喜歡的直接點擊,就會插入到游標目前所在的位置。
除了插入器這條主要路徑,有些區塊本身也內建了專屬的樣板選單,入口藏在區塊裡而不是插入器主頁籤。最明顯的例子是查詢迴圈(Query Loop)區塊,新增這個區塊時,編輯器會先跳出選擇畫面,問你要「選擇一個樣板」還是「從空白開始」;選了「選擇一個樣板」之後,可以捲動瀏覽所有可用的查詢迴圈樣板,一樣是找到想要的直接點擊插入。知道這條隱藏路徑,遇到查詢迴圈這類複雜區塊時就不用自己從零排版。
官方樣板目錄,插入器沒有的更多選擇
佈景主題附帶的樣板終究有限,想要更多選擇,官方另外維護了一個獨立於編輯器之外的樣板目錄網站,而且提供繁體中文版本,可以直接用中文介面瀏覽,不必看著英文找。這個目錄匯集了全世界創作者投稿的樣板,選擇範圍比任何一個主題附帶的都大得多。

目錄頁面提供 2 種瀏覽方式,一種只看精選,是官方篩選過、品質比較穩定的一批;另一種是打開社群投稿的全部樣板,數量多達兩千多組,風格也雜。想快點找到要的東西,可以用搜尋列輸入關鍵字,或用分類篩選縮小範圍,像是頁首、團隊、價目表這些常見類別都找得到。
找到喜歡的樣板,點進去會先看到預覽畫面,按「複製樣板」按鈕,或把滑鼠移到縮圖上直接按複製,樣板就進了剪貼簿。回到自己網站的編輯器,把游標放在想插入的位置,用 Ctrl+V 貼上,或滑鼠右鍵選「貼上」,樣板就套進頁面了,接著跟一般樣板一樣可以逐塊調整內容。
主題附帶的樣板,配色與字體通常已經跟主題本身對齊,套上去就好看;目錄裡的樣板來自各種不同的主題背景,貼進自己的網站後,版面骨架會照搬,但顏色與字體會套用目前這個網站自己的全域樣式,不會跟目錄預覽圖一模一樣。這是正常現象,調整一下顏色跟字級就能貼合自己網站的風格,不必懷疑是不是操作錯了。
樣板插入後仍需要逐塊調整內容與風格
樣板插進頁面之後只是個起點,裡面的文字跟圖片多半是預留位置,接下來要一塊一塊改成自己的內容。整個樣板通常被包在一個群組裡,可以先選取最外層的群組,調整寬度、對齊方式、背景色這種整體性的設定,讓它先在版面上長對位置。
要動個別內容,像是換標題文字、貼自己的段落、替換圖片、改按鈕連結,就直接點進那一塊本身編輯,做法跟編輯單一區塊完全一樣,標題點兩下打字取代、圖片點擊換成上傳新圖、按鈕選取後在右側面板改連結網址。不需要學新操作,套用樣板前後,編輯單一區塊的方式沒有變。
樣板裡的結構常常是好幾層巢狀,群組裡面又分成幾個欄位,欄位裡面又放了圖片加文字的組合。畫面上用滑鼠一層層點選,有時候會點錯層級,改到外層群組而不是想改的那個內層區塊。這時候用編輯器的列表檢視會清楚很多,它會把整個樣板的巢狀結構攤開成一個清單,想改哪一塊,直接在清單裡點選就能精準跳到那一層,不必在畫面上反覆點選猜測。
如果套進來的樣板不合用,想整組拿掉,一樣回到最外層的群組,選取之後移除,就能把整組樣板一次刪除,不必一塊一塊拆開清理。
頁首頁尾的範本部件,同樣能直接套用樣板
樣板不只能用在文章內文,如果目前用的佈景主題是支援全站編輯的區塊主題,連網站的頁首、頁尾都是用樣板與範本部件組成的,一樣可以直接替換。
路徑在外觀選單裡的編輯器,打開之後可以選一個範本來編輯,像是頁面範本。進到範本編輯畫面,選取目前使用中的頁首區塊,點旁邊的三個點選單,選擇「取代頁首」,這時候可以選擇現有的範本部件,或直接從佈景主題附帶的頁首樣板裡挑一個換上去。頁尾的操作完全一樣,選取頁尾區塊、點三個點、選「取代頁尾」,從列表裡挑一個套用。
如果想自己從頭設計一個全新的範本部件、存起來以後重複用,牽涉到另外一套自訂樣板的做法,跟這裡的替換操作不一樣。
也要先說清楚一個前提,這條全站編輯器套用樣板的路徑,只有區塊主題才有。傳統佈景主題沒有全站編輯功能,頁首、頁尾要照傳統主題自己的自訂器或選單機制去調整,走不了這條路徑,如果外觀選單裡找不到編輯器這個選項,通常就是因為目前用的是傳統主題。
更換主題或停用外掛會直接影響插入器裡的樣板
用了一陣子區塊編輯器,不少人會遇到這個疑惑,昨天插入器裡明明還看得到的某個樣板,今天打開卻找不到了,是編輯器壞掉了嗎?多半不是,原因通常回到前面提過的來源,樣板是核心、主題、外掛三方登記進來的,任何一方的登記狀態變了,插入器裡看得到的清單就會跟著變。
最常見的 2 種情況是換了佈景主題,或停用了某個帶樣板的外掛。每個佈景主題附帶的樣板都不一樣,換主題等於把原本那批主題樣板整批換掉,插入器裡自然看不到舊主題的樣板了;外掛也是同樣道理,外掛登記的樣板跟著外掛本身存在,一旦外掛被停用或移除,它登記過的樣板也會一起從清單裡消失。
比較讓人安心的是,這個變動只影響插入器裡還能再選的樣板清單,不會動到已經發布出去的內容。樣板插入頁面的當下,那組區塊標記就已經寫進該篇文章或頁面自己的內容裡,跟原本登記它的主題或外掛脫鉤了,就算之後換主題、停用外掛,已經發布的頁面版面照樣正常顯示,不會因此跑掉或消失。
下次插入器裡找不到某個熟悉的樣板,可以先往 2 個方向查,是不是換過佈景主題,或者是不是有外掛被停用了。知道原因在哪,比猜測編輯器出問題有用得多。
從插入器裡的樣板頁籤,到官方目錄裡數百組社群投稿的版面,區塊樣板要解決的問題其實很單純,排版不必每次都從空白頁面開始堆,先站進一個已經蓋好的樣品屋,再依自己的需求調整家具擺設就好。真正花時間的地方,從一塊一塊疊區塊,變成了挑一個順眼的起點、把內容換成自己的,這後面的事,才是排版真正該花力氣的地方。
