WordPress 區塊樣板完整教學:同步與非同步樣板的建立與跨頁重用

許多人在建站初期養成了「複製頁面再改內容」的習慣——每次要放相同的行動呼籲(CTA)橫幅或聯絡資訊區塊,就手動複製一份、逐一調整。這個做法在站台只有三、五頁時幾乎感受不到負擔,但當頁面數量超過十頁,設計改一次、就要修十次,才會深刻意識到這個維護成本有多高。

WordPress 從 6.0 版起將區塊樣板(Block Patterns)的管理機制大幅強化,配合同步樣板(Synced Pattern)與非同步樣板(Unsynced Pattern)的明確分類,讓站台編輯終於有一套可靠的重用機制。這篇文章說明兩者差異、建立流程,以及跨頁面套用的實際操作方式。

同步與非同步的根本差異

這兩種樣板指向不同的使用情境,混淆了容易反覆誤操作。

同步樣板(Synced Pattern)是「一份資料、多處呈現」的概念。建立後,WordPress 會將這組區塊儲存為獨立內容單位,每個套用位置都參照同一筆資料。編輯樣板本體,所有套用了這個樣板的頁面都會即時反映變動,不需要逐頁更新。適合聯絡資訊、品牌聲明、永久性 CTA 橫幅這類「全站統一、修一次全改」的內容。

非同步樣板(Unsynced Pattern)則是「複製一份範本、各自獨立」的概念。套用後,每個頁面拿到的是樣板的一份副本,可以自由修改而不影響其他頁面。適合結構固定但文字各異的版塊,例如各服務頁面的功能介紹區塊、活動說明頁的時間地點格式,套用樣板省去排版功夫,內容仍由各頁自行填寫。

比較項目 同步樣板 非同步樣板
修改方式 改樣板本體,全站同步 各頁面副本獨立修改
適合內容 聯絡資訊、頁尾 CTA、全站公告 服務介紹格式、活動版型、案例卡片
誤觸風險 改錯會波及全站 只影響當前頁面
辨識方式 編輯器內顯示紫色外框與鎖頭圖示 套用後與普通區塊無異

這張表的判斷邏輯是:「這個版塊的內容有沒有理由在各頁不一樣?」有的話走非同步,沒有的話走同步。

把常用版塊存成樣板

操作入口在 Gutenberg 編輯器的區塊選取動作。以下以 CTA 橫幅為例示範完整流程。

選取區塊並開啟儲存選項

在編輯器中,先選取要儲存的單一區塊或多個區塊組合。若要儲存整組由「欄位(Columns)、標題(Heading)、按鈕(Button)」構成的 CTA 橫幅,建議先在外層加上一個「群組(Group)」區塊,讓整組結構成為一個可操作單位,再進行儲存。

選取目標區塊後,點擊工具列最右側的「⋮」選項選單(More options),找到「建立樣板(Create pattern)」項目並點擊,畫面會彈出命名視窗。

命名並設定同步狀態

命名視窗包含兩個欄位:樣板名稱,以及「是否同步(Synced)」的勾選方塊。

  • 樣板名稱建議使用功能描述性的短語,例如「CTA 橫幅-試用版」、「聯絡資訊卡片」,方便日後在樣板庫搜尋。
  • 同步勾選預設為開啟。若這個版塊打算讓各頁面各自修改,取消勾選即改為非同步樣板。

確認後按「建立(Create)」,樣板即儲存完成。同步樣板在編輯器中會以紫色外框標示,並在左上角出現樣板名稱的識別標籤。

在其他頁面套用

進入任何一個想套用樣板的頁面後,點擊編輯器左上角的「+」新增區塊按鈕,切換到「樣板(Patterns)」分頁。在搜尋框輸入先前設定的名稱,或直接瀏覽「我的樣板(My patterns)」分類,找到目標後點擊即可插入。

同步樣板插入後,整個區塊組合會帶著紫色外框,提醒編輯者「這是共用版塊,不要在此直接改內容」。若確實需要針對該頁面調整,可在工具列選擇「脫離樣板(Detach pattern)」,將其轉為普通區塊後再編輯,但脫離後就不再與樣板本體同步。

編輯與管理既有樣板

樣板建立後,有兩個管理入口可以使用。

從編輯器直接修改

在編輯器中點擊任何一個同步樣板的紫色外框區塊,工具列會出現「編輯樣板(Edit pattern)」按鈕。點擊後進入專屬編輯畫布,在此做的所有修改都會同步到全站所有套用位置,儲存後即時生效。非同步樣板則沒有這個按鈕,直接在頁面上調整即可。

從樣板管理頁集中維護

後台路徑為「外觀(Appearance)」→「編輯器(Editor)」→「樣板(Patterns)」。這裡列出全站所有已建立的樣板,包含同步與非同步兩類。可以在此重新命名、刪除,或直接點入編輯內容。

特別注意:刪除一個同步樣板時,WordPress 會提示該樣板已被套用在幾個頁面,確認刪除後,那些頁面上的版塊並不會消失——樣板脫離後會轉為各自獨立的普通區塊繼續存在。這一點和預期不同,初次操作前要有心理準備。

跨頁重用的常見版塊類型

哪些內容值得存成樣板、哪些不值得,是建站規劃時需要主動判斷的問題。

以下整理幾類適合樣板化的版塊,供參考:

  • 行動呼籲(CTA)橫幅:「立即索取報價」、「免費試用 14 天」這類固定訴求橫跨多個落地頁,走同步樣板,改一次全站統一。
  • 聯絡資訊區塊:電話、地址、信箱合一的版塊,尤其適合放在頁尾或服務頁底部,全站同步確保資料一致。
  • 服務介紹卡片:Icon、標題、描述的三欄結構,各服務頁面文字不同但排版一致,走非同步樣板。
  • 推薦人引言(Testimonial):固定的引言框格式,名字與內容各頁不同,非同步較合適。
  • 特色列表:重複出現的「打勾清單、說明」格式,版型統一、文字各異,非同步較彈性。

不值得樣板化的是高度一次性的版塊:只用在某一篇文章的特殊排版、只出現一次的活動說明頁,建立樣板反而增加管理負擔,直接在頁面上建立比較直接。

版塊樣板是隨著站台內容規模增長而越來越有價值的機制,站台越大、頁面越多,前期建立樣板的設計時間就越值得。從聯絡資訊和主 CTA 橫幅這兩個幾乎每個站都會用到的版塊著手,是建立樣板習慣的最低成本起點。

相關文章
標籤: 區塊編輯器, Block Patterns, 同步樣板, 全站編輯, Gutenberg