一顆刻好的印章,不管蓋在申請書、收據還是合約上,蓋出來永遠是同一顆章;哪天圖案要改,重刻這一顆章就好,不必把蓋過的每一張紙都撕掉重蓋。網站的頁首(Header)、頁尾(Footer)也想做到同樣的效果:同一個 Logo、同一組導覽選單理論上該只存在一個地方,不是每一頁各自重排一次,改一個字就要跑遍全站去改。
在傳統佈景主題(Classic Theme)裡,頁首頁尾寫死在 header.php、footer.php 這兩支程式檔案裡,想改版面得懂 PHP、還得請人動手改程式。區塊主題(Block Theme)換了一套做法,頁首頁尾變成用區塊(Block)組裝出來的範本部件(Template Part),一份被多個範本共同引用的內容,改這一份,所有引用它的地方會同時更新。
範本部件不是唯一一種「改一處、全站同步」的機制,它跟可同步樣式模式(Synced Pattern)常被搞混,選單設定管的東西也常被誤會成同一件事。
範本部件是什麼?只存一份就能在每一頁出現的共用容器
範本部件(Template Part)是區塊主題裡一份可以被多個範本共同引用的內容區塊。範本(Template)是決定某一種頁面長相的整份藍圖,例如首頁範本、單篇文章範本、封存頁範本;範本部件則是被嵌進這些範本裡的其中一塊,通常是跨頁都要維持一致的區域,像頁首、頁尾。範本部件不是範本本身,而是範本裡可以替換的一個零件,這層級關係要先分清楚,後面講替換與同步時才對得起來。

技術上,範本部件預設分成 2 個具名區域,header(頁首)與 footer(頁尾),另外還有一個沒有明確歸類的 uncategorized(一般型),留給不屬於頁首頁尾、但同樣要跨頁共用的內容,例如側邊欄的固定推薦區塊。這些檔案實際存放在主題資料夾底下的 /parts 目錄,比較舊的主題也可能放在 /template-parts 這個向下相容的位置,兩者系統都認得。

要把某個範本部件套進範本裡,靠的是專屬的 Template Part 區塊,寫法類似這樣:
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->Code language: HTML, XML (xml)
slug 指定要引用哪一份範本部件,tagName 決定輸出的 HTML 標籤,這裡是 <header>。這段區塊語法平常不用手動打,新增與套用範本部件時編輯器會自動產生,但知道它長什麼樣子,遇到問題要去範本原始碼裡核對時會比較有底。
對自己開發佈景主題的人來說,範本部件要先在 theme.json 裡登記過,登記時要給 3 個值,area(所屬區域,可以是預設的 header、footer,也能自訂新的分類)、name(檔名,不含副檔名)、title(顯示在後台的可翻譯標題)。多數人只是用現成的區塊主題管理內容,不會碰到這一步,但知道背後有這道註冊手續,遇到範本部件清單顯示異常時比較好判斷是不是主題本身沒登記好。
範本部件與選單設定分別管理版面結構跟連結清單
很多人以為「共用頁首頁尾」要去外觀(Appearance)底下的選單(Menus)設定調整,這其實是把兩個管轄範圍完全不同的功能搞混了。選單設定管理的只是一份導覽連結清單的資料,哪些連結、排列順序、有沒有子選單,這份資料本身不是頁首。範本部件管的是整個頁首這個容器,裡面裝了 Logo、站名、搜尋框,還有導覽選單區塊本身在內的所有視覺元件。選單只是被放進範本部件裡的其中一個區塊而已。
換句話說,選單設定是範本部件裡的一塊積木,不是跟範本部件同一層級的東西。導覽選單區塊(Navigation Block)本身可以被放進任何範本部件,也可以直接被放進頁面內文裡當成獨立元件使用,它跟範本部件是兩個不同維度的概念,一個管連結資料,一個管容器結構。搞清楚這層分工之後,下次要改頁首排版,就知道該進外觀編輯器改範本部件,而不是跑去選單設定裡繞圈。

頁首頁尾用範本部件,重複出現的文字用可同步樣式模式
範本部件跟可同步樣式模式(Synced Pattern,舊稱可複用區塊 Reusable Block)都是「改一處、全站同步」,表面行為很像,實際用途卻完全不同。WordPress 的文件把兩者放進同一張比較表裡,分野很清楚:範本部件代表的是網站結構(Site Structure),範例是頁尾;可同步樣式模式代表的是使用者內容(User Content),範例是營業時間;還有一種不同步的一般樣式模式(Pattern),同樣屬於使用者內容,但每次插入都各自獨立,不會同步更新,範例是行動呼籲按鈕。
判斷原則可以記成一句話,跨頁必須維持一致的結構性區塊,像頁首、頁尾,用範本部件;會被插進不同頁面內文、但內容本身該同步更新的一段文字,像固定的營業時間、聯絡資訊、常用的行動呼籲文案,用可同步樣式模式。範本部件內部可以包含可同步樣式模式,例如頁尾這個範本部件裡塞一段同步過的營業時間文字段落,這樣沒問題;但反過來不建議把整個範本部件塞進可同步樣式模式或一般樣式模式裡,因為範本部件代表的是結構,不是可以被隨意複製貼上的一段內容。

焦點模式讓其餘頁面內容變暗防止誤改
要動手改範本部件之前,先確認 2 個前提。第一,網站用的是不是區塊主題,判斷方法很單純,後台外觀底下看到的選項若是編輯器(Editor),就是區塊主題;若看到的是自訂(Customize),代表用的是傳統佈景主題,沒有範本部件可用。第二,範本部件目前收在外觀 > 編輯器 > 樣式模式(Patterns)清單的最上方一類,不是獨立在另一個選單裡,第一次找的人常常在這裡找不到方向。
確認過這 2 個前提,進到樣式模式清單就能看到範本部件被獨立列在最上面。要編輯單一個範本部件,可以用清單視圖(List View)選取它,再點右鍵選編輯頁首,或是直接從樣式模式清單點進要編輯的那一個,兩種路徑都會進入焦點模式(Focus Mode)。進到焦點模式之後,畫面只顯示這一個範本部件,其餘頁面內容會變暗、不可編輯,避免手滑改到不相干的區塊,這是最容易被忽略、卻很好用的一個小功能。

新增範本部件時,區域欄位決定它會出現的位置
新增範本部件的入口在外觀 > 編輯器 > 樣式模式,畫面右上角有個新增樣式模式的按鈕,點開下拉選單裡會看到新增範本部件這個選項。選下去會跳出一個視窗,要求輸入名稱,並且選擇它所屬的區域(Area),選項通常是一般、頁首、頁尾這 3 種。
這個區域欄位常被隨便選,但選對它很重要。選對了,新做的這個範本部件才會正確出現在頁首或頁尾的篩選清單裡,之後要套用到範本時也比較好找;選錯或留在一般型不代表不能用,只是後續在一堆同類項目裡翻找會比較亂。命名也值得花點心思,取一個看得出用途的名字,比如首頁專用頁首,日後同一個區域出現第二組、第三組候選時,才分得清楚哪個是哪個。新增後編輯器會給一張空白畫布,接下來就是用區塊組裝內容,頁首常見的組合是網站標誌(Site Logo)、網站標題(Site Title)、導覽(Navigation)這 3 個區塊;頁尾常見的組合則是分欄(Columns)、放版權文字的段落(Paragraph)、導覽,再加上社群連結。
範本部件區塊的替換功能,讓新頁首頁尾直接掛上模板
新範本部件做好之後,下一步是把它實際掛上某個範本頁面;很多人做完新頁首,卻不知道要去哪裡指定它生效,常在這一步停下來。做法是進到要套用的範本,例如外觀 > 編輯器 > 範本裡的單篇文章範本,找到裡面現有的 Template Part 區塊(通常就是目前的頁首或頁尾),點選它、叫出區塊工具列,選擇替換(Replace),清單裡就會列出可以換上去的候選範本部件,挑選剛做好的那一個。
這裡有個前提要先講清楚,替換這個選項只有在同一個區域已經有 2 個以上的範本部件候選時才會出現;如果目前只有一個,代表這個主題還沒有其他候選可以換,選項自然不會顯示,並不是操作哪裡做錯了。替換完成後存檔,該範本頁面往後就會顯示新的範本部件,其他還在引用舊範本部件的範本不受影響,因為每個範本各自指定自己要引用哪一份範本部件,彼此互不干涉。

同一區準備多組範本部件,依頁面情境切換
共用容器這個機制真正的彈性,在於同一個區域不是只能有一個範本部件,而是可以準備好幾組,分別套用到不同的範本頁面。舉例來說,首頁可以用一個含大圖與行動呼籲按鈕的頁首,其餘內頁則換一個精簡版頁首;部落格文章列表頁可以用一個含分類連結的頁尾,單篇文章頁則換一個附作者資訊的頁尾。每個範本頁面各自決定自己要引用哪一個範本部件,同一個區域底下的多組候選彼此互不干擾。
要準備第二組同區域的範本部件,步驟跟前面新增範本部件那節一樣,只是區域選項選成同一個,例如同樣選頁首,系統就會把它跟原本那個一起收進頁首這個分類裡。套用到不同範本的方法也沿用前面替換功能那節的操作,只是這次是各自指定各自要用哪一組,首頁範本換上大圖版頁首,其他範本維持原本精簡版。這種做法特別適合行銷活動期間需要放大版頁首、活動結束後再換回一般版的場景,不需要動到程式碼,也不會影響其他範本正在使用的版本。
範本部件改了卻沒有全站生效的三種常見原因
範本部件改了卻有些頁面沒跟著變,是實際使用時最常遇到的困惑。既然範本部件的核心特性就是改一處、全站同步,遇到沒同步的狀況,通常代表某個環節其實不符合這個前提,而不是機制本身壞掉,常見原因集中在引用對象、佈景主題類型、內容有沒有被分離這 3 個地方。

那個範本頁面引用的其實是別的候選範本部件
同一個區域如果有好幾組候選範本部件,沒改到的那一頁,很可能是因為它引用的其實是另一組,不是被改的這一份。排查方法是進到那個沒變的範本頁面,看它目前套用的 Template Part 區塊指向哪一個名稱,只要名稱跟被改的那份對不上,答案就出來了。
這種狀況在準備多組範本部件、依頁面情境切換的做法用久之後特別容易發生,尤其是團隊有多人一起維護網站,很容易有人忘記自己當初把某個範本指到哪一組候選。養成習慣,改完頁首之後順手打開幾個代表性的範本頁面確認一次,能省掉不少後續排查的時間。
網站用的其實是傳統佈景主題,不是區塊主題
傳統佈景主題(Classic Theme)的頁首頁尾寫死在 header.php、footer.php 這類 PHP 檔案裡,後台外觀底下看到的是自訂(Customize)而不是編輯器(Editor),這種情況下網站根本沒有範本部件可以用,不管怎麼在外觀選單裡找都找不到。
遇到這種狀況,改頁首頁尾要回到主題本身提供的自訂介面,或是該主題另外提供的頁首、頁尾編輯功能,這已經是完全不同的機制,不在範本部件的範圍內。判斷自己的網站屬於哪一種,回到最前面提過的方法就好,外觀底下看到編輯器字樣,才會有範本部件可以動。
改動的其實不是同一個容器,是被局部覆寫或另存了一份
另一種常見狀況是,某個頁面把範本部件從編輯器裡分離(Detach)成獨立區塊之後再修改,這樣的改動只會影響那一個頁面,不會回寫到共用的範本部件本身。表面上看起來像是改了卻沒同步,實際上是這一處內容已經脫離共用容器,變成那一頁自己專屬的內容,跟其他還在引用範本部件的頁面本來就是兩份不同的東西。
要確認是不是這種狀況,同樣回到範本頁面裡檢查那個區塊,如果區塊工具列不再顯示範本部件相關的選項,只呈現一般的段落、群組區塊,就代表它已經被分離出來,不再跟共用的那一份範本部件產生任何關聯,想要恢復同步,得刪掉這個獨立區塊,重新插入正確的 Template Part 區塊。
範本部件解決的其實是一個很基本的問題,同一份頁首頁尾,不該因為出現在很多頁面上,就要各自維護很多份。分清楚它跟選單設定、可同步樣式模式的差別之後,新增、替換、排查同步異常這幾件事,操作起來就只是照著區域、名稱這幾個欄位走一遍,不需要碰到任何一行程式碼。真的還是覺得某個頁面改不動,對照前面拆解的 3 種常見原因,多半都能找到問題出在哪個環節。
