Wordpress

自訂區塊樣板怎麼註冊?2 種寫法讓版面不必重複貼上

多數人以為 WordPress 裡「存起來重複用的版面」只有一種做法,其實常見的做法就有 3 種,而且彼此的連動邏輯完全不一樣。把一個團隊介紹卡插進第一篇文章、複製貼上到後面十幾篇文章裡,看起來很順眼,直到有一天想把卡片背景色從白色換成淺灰,才發現得回去每一篇逐一手動修改,改到後面幾篇還漏掉。同一份版面,換了不同的存法,維護起來的痛苦程度落差很大。

自訂區塊樣板(Custom Block Pattern)解決的正是這種情境。它把一組排好的區塊組合,透過程式碼註冊進主題,讓它出現在整個網站每一篇文章與頁面的插入器裡,任何人新增內容時都能直接叫出來用,插入之後每個實例各自獨立,改這篇不會動到那篇。這跟複製貼上舊文章的差別在於,插入器本身就是現成的使用說明,不用另外告訴團隊成員去某篇文章複製排版。

不過動手寫程式碼之前,得先弄清楚樣板、同步樣板(原本叫可重用區塊)跟官方樣板庫這 3 種東西的差異,選錯一種,後面維護整個網站的版面會變得很痛苦。先從這 3 者的連動範圍怎麼不一樣講起。

官方樣板、同步樣板與自訂樣板,各自的連動範圍不一樣

這三種東西看起來都是「存起來重複用的版面」,差別在於連動邏輯完全不同。官方或社群樣板庫的現成版面,插入之後就變成普通區塊,跟原本的樣板脫鉤;同步樣板(Synced Pattern)本質上是使用者內容,實際存在資料庫裡,編輯其中一處會同時更新網站上所有插入過它的地方;自訂區塊樣板則是透過程式碼註冊,本身不是資料庫裡的一筆內容,插入之後每個實例各自獨立,不會互相牽動。

官方樣板庫插入後脫鉤、同步樣板改一處全站同步、自訂區塊樣板每個實例各自獨立,三者連動範圍不同
同樣是把版面存起來重複用,官方樣板插入後就脫鉤、同步樣板牽一髮動全身、自訂樣板則是每個實例各自獨立。

WordPress 6.3(2023 年 8 月)把原本的可重用區塊正式改名為同步樣板,行為完全相同,只是換了個更容易理解的名字,方便跟一般的區塊樣板放在同一套概念底下比較。這個命名演進值得記一下,查舊教學時常常會看到可重用區塊這個舊說法,跟現在介面上顯示的同步樣板對不起來,容易讓人以為是兩種不同的東西。

直接插入官方或社群樣板庫的現成版面

多數人第一次接觸樣板,是在區塊編輯器右上角的插入器裡點開「樣板」分頁,看到一整排現成的英雄區塊、團隊介紹版面、價目表可以直接點選插入。WordPress.org 也有獨立的樣板目錄,做法一樣,找到喜歡的版面,複製區塊標記貼進頁面就能用。

這條路最省事,但也最受限。這些都是別人做好的通用版面,插入到頁面之後就變成一堆普通區塊,跟原本的樣板來源完全脫鉤,可以自由調整顏色、文字、圖片,但這份客製化過的版面沒有辦法被記住。下次想在另一篇文章重複用同一份排好的版面,還是得從頭找一次、重新調整一次,沒有辦法一次到位。Learn WordPress 官方教學把分清楚區塊、可重用區塊、區塊樣板三者的差異,列為課程的核心學習目標之一,某種程度也說明連官方都認為這幾個概念很容易被讀者混在一起。

同步樣板改一處,全站跟著變動

同步樣板編輯其中一處,網站上所有插入過它的地方會立刻跟著變。這正好適合內容必須到處保持一致的東西,像是作者簡介、頁尾的聯絡資訊、固定不變的優惠橫幅。把這類內容存成同步樣板,以後電話號碼換了、優惠期限到了,只要改一次,全站所有插入過的位置都會同步更新,不用一篇一篇找出來手動修改。

但同步樣板不是萬用解法。如果其實想要的是版面骨架一模一樣、但每次放進去的內容都不同,例如每篇文章結尾都放一個行動呼籲區塊、但文字每次都要換,用同步樣板反而會變成一場困擾,只要改了其中一篇的文字,其他所有插入過它的地方也會被同時改掉。這正是自訂樣板(不同步)該出場的時機。同步樣板在編輯器裡可以取消連結,把它變成一般區塊之後再編輯,就不會影響到原本存起來的那份同步樣板本身。

自訂樣板各自獨立,還能供全站呼叫

自訂區塊樣板要解決的,就是前面兩種做法各自的痛點。它不像官方樣板庫那樣插入後就脫鉤失聯,也不像同步樣板那樣改一處全站跟著跑掉。透過程式碼把一組排好的區塊註冊進主題之後,這顆樣板會出現在整個網站、所有文章與頁面的插入器裡,任何人新增內容時都能直接叫出來用;每次插入之後都是獨立的副本,這篇改了不會動到那篇,那篇刪了也不會影響其他篇還在用的版本。

developer.wordpress.org 的官方文件開宗明義就把這件事定調,註冊樣板的目的是把區塊程式碼直接寫進主題,讓它能透過標準流程被整個網站使用,用途遠不只是複製貼上單一篇文章的內容。

版面固定但內容要能各自微調時,才該存成自訂樣板

要不要多花力氣寫程式碼註冊,而不是直接用同步樣板,或乾脆每次複製貼上舊文章,判斷依據其實很單純,看兩件事:這個版面的骨架要不要保持一致,以及放進去的內容要不要每次都不一樣。如果骨架要一致、內容也要跟著同步,像頁尾聯絡資訊那樣,同步樣板才是對的選擇,自訂樣板用在這裡反而多此一舉;如果只是偶爾用一次、不需要常駐在插入器裡,複製貼上舊文章也還堪用,但每次都要手動翻出那篇舊文章、清乾淨多餘的樣式,費工又容易漏東西。

自訂樣板解決的正是這個中間地帶,版面設計固定、內容各自獨立、而且要能隨時從插入器叫出來,不用去挖舊文章找。Learn WordPress 官方教學把樣板功能存在的理由講得很直接,內容創作者若要一再重複設定同一組複雜的區塊組合,會是很繁瑣的工作,樣板讓這種常用的區塊配置可以被快速取用;文件也點名了典型的應用情境,包括延伸主題或外掛的功能、配合品牌風格讓客戶或內容創作者能快速套用一致的版面。

內容常要換,但版面骨架想維持一致的情境

具體舉幾個常見的候選,每篇部落格文章結尾都放的延伸閱讀加訂閱按鈕區塊,排版邏輯每次都一樣,但連結的文章跟按鈕文字每次都不同;每個服務頁面用的三欄式優點卡,版面骨架固定,但三個優點的標題與說明文字因頁面而異;每個案例頁共用的客戶背景加成果數字排版,結構一致,但數字與內容各篇都不一樣。這些都是排版邏輯一模一樣、但塞進去的文字與圖片每次都不同的典型自訂樣板候選。

Learn WordPress 官方教學實際示範的情境是團隊頁面,一張照片配上姓名、職稱、簡介的區塊排版。教學一步步帶著讀者先在編輯器裡把這個版面排出來,排到滿意之後,才進入下一步把它轉成能註冊的樣板程式碼。這個示範情境剛好點出判斷的關鍵,版面骨架每次都要一樣,姓名、職稱、簡介這些內容,每個團隊成員都不同,正好符合骨架固定、內容各自獨立這兩個條件。

想讓這顆版面出現在所有新文章的插入器裡

自訂樣板另一個實際的價值,在於它一旦註冊成功,就會自動出現在後台「外觀」底下「編輯器」的「樣板」分頁,如果是傳統主題,則會列在「外觀」裡的「樣板」,也會出現在所有文章與頁面的區塊插入器裡。不需要另外寫一份操作手冊告訴團隊成員或未來接手的人去某一篇文章複製那個排版,插入器本身就是現成的使用說明,想用的人自己就找得到。

這件事對多人協作或代管客戶網站的情境特別有感。如果團隊裡每個人排版的習慣不太一樣,常見的下場就是同一種版面在不同文章裡長得都不太一樣,間距不對、字級不一致。把常用的版面收斂成幾顆自訂樣板,插入器裡有的就直接用,能大幅降低這種排版跑掉、每個人排法不一樣的狀況,也讓維護一整個網站的版面風格變得容易掌握。

在編輯器排好版面,再把區塊標記轉成能註冊的原始碼

實作的第一步,不是打開程式碼編輯器憑空手刻 HTML,而是先在已經很熟悉的區塊編輯器裡,用滑鼠把版面排出來,這一步跟平常寫文章、排頁面沒有兩樣。標題、段落、按鈕、圖片,一個一個拖進去,排到滿意為止。

自訂區塊樣板四步驟:編輯器排版、複製區塊標記、註冊進主題、出現在全站插入器供任何人叫出
先在編輯器把版面排好,複製區塊標記註冊進主題,這顆樣板就會出現在全站插入器裡,每次插入各自獨立。

排好之後,才進入跟平常不一樣的步驟,切換到程式碼編輯器檢視,把區塊背後真正的原始碼複製出來。這段原始碼不是單純的 HTML,而是夾雜著像 <!-- wp:cover --> 這類區塊註解的完整標記,WordPress 靠這些註解才認得出這裡是一個封面區塊、那裡是一個段落區塊。複製出來的這段標記,就是接下來註冊樣板要用的內容本身。

先用群組或封面等容器包住整個版面

官方文件建議在排版時,先用群組或封面這類允許巢狀結構的容器區塊,把整個版面包起來,再把標題、段落、按鈕這些內容放進容器裡面。這不是可有可無的細節,而是關係到樣板插入之後好不好維護。

沒有外層容器的話,樣板插入到頁面之後,呈現的其實是一堆各自獨立的區塊並排在一起,想要整組搬動位置,或是一次刪掉整份版面,都得一個一個選取,很容易漏掉某個角落的區塊。包進群組或封面之後,整顆樣板在編輯器裡會被當成一個整體,拖曳搬動只需要抓最外層,加背景色、調整內距、加自訂 CSS class,同樣只需要動最外層的容器,不用逐一設定每個內部區塊。這也是官方樣板庫既有範例幾乎都遵循的做法。

切到程式碼編輯器,複製乾淨的區塊標記

實際操作路徑很簡單,在文章或頁面的編輯器右上角,點開選項(三個點)選單,裡面有一個切換到程式碼編輯器的選項。點下去之後,原本看到的視覺化排版,會變成一長串帶著 <!-- wp:xxx --> 開頭、<!-- /wp:xxx --> 結尾的完整區塊標記。官方教學特別提醒,這個檢視模式不建議直接手動修改內容,除非已經很熟悉區塊標記的語法,不然很容易改壞,它的主要用途就是拿來複製。

複製出來之後,還有 2 件事要處理乾淨。第一,檢查標記裡有沒有殘留的空段落區塊,排版過程中常常會不小心留下幾個空的段落標記,這些空段落複製出來也會一起帶走,要手動清掉。第二,如果內容裡有單引號或雙引號,貼進 PHP 陣列之前得先跳脫處理,不然會讓 PHP 直接解析錯誤,整段程式碼失效。這兩個細節看起來瑣碎,卻是這一步最容易踩到的坑。

把區塊標記放進主題的 patterns 資料夾,讓 WordPress 自動註冊

有了上一步複製出來的區塊標記,接下來官方文件明確建議優先採用的做法是,不用寫任何 PHP 邏輯,只要在使用中主題的根目錄底下建一個 patterns 資料夾,把區塊標記存成一個 .php 檔案,檔名建議用連字號分隔的英文,例如 hero.php,檔案最上面加一段 PHP 註解當檔頭,WordPress 就會在載入時自動掃描這個資料夾、解析檔頭,幫你完成整套註冊,完全不用手動呼叫任何函式。

這個資料夾位置是主題根目錄下的 patterns/,不是外掛目錄,這是主題層級的自動掃描機制。負責掃描這個資料夾的核心函式 _register_theme_block_patterns() 是隨 WordPress 6.0(2022 年)推出的,而且這個機制對區塊主題與傳統主題都支援,不限定一定要用全站編輯的區塊主題才能用。檔頭本身就是一段 PHP 註解裡的 key 加 value 清單,緊接在檔頭後面的就是實際的區塊標記,中間不需要任何額外符號分隔。

檔頭要填的 Title、Slug 與 Categories 欄位

官方文件列出檔頭可以設定的完整欄位有 10 項。Title 是人類可讀、可以翻譯的樣板名稱;Slug 的格式必須是 namespace/pattern-name 這種帶命名空間的寫法,而且在全站要唯一,namespace 通常直接用主題的代稱;Categories 是逗號分隔的分類清單,決定這顆樣板出現在插入器的哪個分類底下。除了這 3 個必填欄位,還有 Description(給螢幕報讀軟體看的說明,畫面上不會顯示出來)、Viewport Width(預覽時虛擬畫面的寬度,單位是像素)、Inserter(是否要顯示在插入器裡,預設是 true)、Keywords(逗號分隔的搜尋關鍵字)、Block Types(限定關聯哪些區塊類型,例如 core/cover)、Post Types(限定哪些文章類型才看得到,預設是全部)、Template Types(限定套用在哪些範本類型,例如 homesingle)。官方建議多數樣板至少要填 TitleSlugCategories 這 3 個。

樣板 .php 檔的檔頭欄位:Title、Slug、Categories 三個必填,另有七個選填欄位,下方接區塊標記
檔頭共 10 個欄位,多數樣板至少填 Title、Slug、Categories 這 3 個必填的,檔頭之後緊接著就是區塊標記本身。

Slug 一定要帶 namespace,是為了避免跟其他主題或外掛註冊的樣板撞名,同一個網站上可能同時裝著好幾個主題與外掛,萬一撞名,後註冊的樣板可能會直接覆蓋掉先註冊的。Categories 如果要用官方預設的分類,直接照抄分類名稱就能用;如果想用自訂分類,那個分類必須先被註冊過,不然插入器裡完全看不到這顆樣板。實際的檔頭寫法大致如下:

<?php
/**
* Title: 行動呼籲橫幅
* Slug: pongo-theme/cta-banner
* Categories: call-to-action
*/
?>
<!-- Pattern code goes here. -->Code language: PHP (php)

這段檔頭之後緊接著的,就是前面從程式碼編輯器複製出來、清乾淨空段落與跳脫引號的區塊標記本身。

自訂分類,讓插入器裡的樣板分組好找

WordPress 內建已經有一批預設分類可以直接用,featuredaboutaudio(WordPress 6.4 新增)、bannerbuttonscall-to-actioncolumnscontactfootergalleryheadermediaportfoliopostsquery(官方建議改用 posts)、servicesteamtestimonialstextvideo(WordPress 6.4 新增)。多數情況下,官方建議優先沿用這些預設分類,好處是能維持跟其他主題、其他樣板一致的使用經驗,使用者不需要重新學一套分類邏輯。

但如果自訂樣板數量夠多、需要獨立分組,例如專門收案例研究區塊這種只有自己的網站在用的類型,可以用 register_block_pattern_category() 這個函式,在 functions.php 裡掛在 init 這個掛勾上,註冊一個新的分類:

add_action( 'init', 'pongo_theme_register_pattern_categories' );
function pongo_theme_register_pattern_categories() {
    register_block_pattern_category( 'pongo-theme/case-study', array(
        'label'       => __( '案例研究', 'pongo-theme' ),
        'description' => __( '案例研究專用的區塊樣板', 'pongo-theme' )
    ) );
}Code language: PHP (php)

register_block_pattern_category() 接受 2 個參數,$category_name(建議加主題代稱前綴的唯一 slug,避免跟別的主題或外掛的分類撞名)與 $category_properties(包含 labeldescription 兩個可翻譯欄位)。註冊好之後,就能在檔頭的 Categories 欄位裡填上這個自訂分類的 slug;要移除某個分類,則用 unregister_block_pattern_category()

手動呼叫 register_block_pattern(),取代資料夾自動掃描的另一條路

除了讓 WordPress 自動掃描 patterns 資料夾,還有第二種註冊方式,不透過資料夾,而是直接在 functions.php(或外掛)裡呼叫 register_block_pattern() 這個 PHP 函式手動註冊。這不是比較差的替代方案,在某些情境下反而更合適,例如希望有條件才註冊,像是先偵測網站上有沒有裝某個特定外掛,有裝才提供這顆樣板;或是希望樣板跟著外掛走、不綁死在某個主題上,換了主題也不會消失。官方文件也明講,兩種註冊方法可以混用,但同一顆樣板只能擇一方式註冊,不能又放進資料夾、又手動呼叫函式重複註冊一次。

兩種註冊方式對照:放進 patterns 資料夾自動掃描是官方優先建議,呼叫 register_block_pattern() 手動註冊適合條件式或跨主題
放進 patterns 資料夾靠自動掃描最省事、官方優先建議;呼叫 register_block_pattern() 手動註冊則適合條件式或想跨主題沿用,兩者可混用但同一顆樣板只能擇一。

register_block_pattern() 的函式簽章是 register_block_pattern( string $pattern_name, array $pattern_properties ): bool,內部實作呼叫的是 WP_Block_Patterns_Registry 的註冊方法。$pattern_properties 這個陣列裡可以填的欄位,對應到檔頭的那些項目,content(區塊標記本身,必填)、title(必填)、categoriesdescriptionviewportWidthinserterkeywordsblockTypespostTypessourcetemplateTypes。這裡有 2 個欄位最容易漏掉,content 是這顆樣板真正的區塊標記,沒填等於註冊了一顆空殼樣板;source 如果是主題在註冊,要記得填 'theme',漏填的話某些後台檢視畫面裡樣板來源會顯示不正確。而且這個函式必須掛在 init 這個動作掛勾上執行,不能在頁面渲染的當下才呼叫,不然註冊不會生效。

functions.php 裡的完整寫法和必填參數

實際寫進 functions.php 的完整範例大致長這樣:

add_action( 'init', 'pongo_theme_register_patterns' );
function pongo_theme_register_patterns() {
    register_block_pattern( 'pongo-theme/cta-banner', array(
        'title'      => __( '行動呼籲橫幅', 'pongo-theme' ),
        'categories' => array( 'call-to-action' ),
        'source'     => 'theme',
        'content'    => '<!-- Block pattern goes here. -->'
    ) );
}Code language: PHP (php)

把這段拆開來看,contenttitle 是真正必填的 2 項,少了 content 這顆樣板等於沒有內容,少了 title 則會在插入器裡顯示不出正確的名稱。categoriesdescription 屬於選填、但建議填的欄位,沒有分類的樣板會被歸到插入器裡的未分類,使用者比較難找到;沒有 description 則會讓螢幕報讀軟體的使用者少一份可以理解這顆樣板用途的說明。source 這個欄位最容易被忽略,如果是主題在註冊卻沒填 source: 'theme',雖然樣板還是能正常插入使用,但某些後台檢視畫面裡樣板的來源標示會不正確,不利於日後排查這顆樣板是哪裡註冊的。

想讓樣板換主題也不會消失,得放進外掛裡

不管是用 patterns 資料夾自動掃描,還是在主題的 functions.php 裡呼叫 register_block_pattern(),這顆樣板都是綁在目前這個主題上,這一點容易被忽略。換了佈景主題,這些自訂樣板會直接消失不見,patterns 資料夾裡的樣板,在同一個主題更新、或停用其他外掛的情況下仍然會保留,但只要換成別的主題,它就沒了。

如果這顆樣板未來有可能要跨主題沿用,或本來就打算讓好幾個網站共用同一套樣板庫,正確的做法是把註冊程式碼改放進一個獨立的外掛,甚至是永遠啟用的 mu-plugin(必用外掛)。mu-plugin 放在 wp-content/mu-plugins/ 資料夾底下,由 WordPress 核心自動載入,沒有啟用、停用這個開關,也不會因為切換主題而失效,這正是它能讓樣板跨主題存活的原因。判斷該放主題還是放外掛,其實只看一件事,會不會換主題、要不要跨站台共用,只要答案是有可能,就優先選外掛或 mu-plugin,而不是主題層級的註冊方式。

樣板可以限定只出現在特定頁面類型或特定區塊裡

前面幾節註冊的樣板,預設會出現在整個網站、所有頁面類型的插入器裡。但不是每顆樣板都該對所有情境開放,一顆產品規格比較表樣板,如果只有寫產品這個文章類型的人用得到,讓它出現在一般部落格文章的插入器裡只會徒增困擾。這時候就需要進階的範圍限縮設定,用 postTypes(或檔頭的 Post Types)可以限定這顆樣板只在特定文章類型才會出現在插入器裡;用 templateTypes(或檔頭的 Template Types)可以限定只在特定範本才出現,例如只在單篇文章頁 single、不在首頁 home;用 blockTypes(或檔頭的 Block Types)則可以限定這顆樣板只在特定區塊的內容裡才會被建議,例如只在查詢迴圈區塊裡出現。

這幾個限縮欄位不是從一開始就存在的,postTypes 是 WordPress 6.1 才新增支援,templateTypes 則是 6.2 才新增。這個版本演進值得留意,如果在比較舊的 WordPress 版本上找不到這 2 個檔頭欄位,不代表設定錯了,而是版本還沒支援。這幾項限縮設定能避免插入器裡塞滿一堆其實只有某種頁面用得到的樣板,讓實際要用的人更快找到對的那一顆。

用 postTypes 和 templateTypes 鎖定樣板出現的頁面

實際設定的寫法,不管是在檔頭裡還是 PHP 陣列裡,都是逗號分隔或陣列的形式。檔頭寫法像這樣,Post Types: product;手動註冊時則是在 $pattern_properties 陣列裡填 'postTypes' => array( 'product' )Template TypestemplateTypes 的寫法邏輯完全一樣,只是填的值換成 singlehome 這類範本名稱。

舉一個實際情境,假設做了一顆產品規格比較表樣板,排版是特別為列規格、比價設計的,只想讓寫產品這個自訂文章類型的人在插入器裡看到它,其他寫一般部落格文章的人就不需要在自己的插入器裡看到這顆樣板。設定好 postTypes(或檔頭的 Post Types)之後,插入器就會依文章類型自動篩選,寫產品頁的人看得到、寫部落格文章的人看不到,插入器因此更乾淨,也降低了誤用的機會,例如有人手滑把產品規格表插進一篇跟產品完全無關的文章裡。

不想留的樣板,連內建的也能一起關掉

除了限縮自己的樣板出現在哪些頁面,插入器裡還常常堆著別人(核心、其他主題、外掛)留下的樣板,這些也可以一併整理。用 unregister_block_pattern( $pattern_name ) 可以移除單一顆已經註冊的樣板;用 remove_theme_support( 'core-block-patterns' ) 可以整批移除 WordPress 內建的核心樣板;用 should_load_remote_block_patterns 這個過濾器讓它回傳 false,可以停用從 WordPress.org 官方樣板目錄即時抓遠端樣板這個行為,適合不想在網站前台呼叫外部 API、或是官方樣板的風格跟自己網站不搭的情況。

add_action( 'init', 'pongo_theme_unregister_patterns', 999 );
function pongo_theme_unregister_patterns() {
    unregister_block_pattern( 'core/social-links-shared-background-color' );
}

add_action( 'after_setup_theme', 'pongo_theme_remove_core_patterns' );
function pongo_theme_remove_core_patterns() {
    remove_theme_support( 'core-block-patterns' );
}

add_filter( 'should_load_remote_block_patterns', '__return_false' );Code language: PHP (php)

要留意的是,unregister_block_pattern()unregister_block_pattern_category() 都要掛在 init 這個掛勾上,而且優先度要設得比預設值(10)更高,例如 999,才能確保這段取消註冊的程式碼,是在別人的樣板都註冊完之後才執行;如果優先度不夠高,想移除的樣板可能還沒被註冊,取消動作自然就沒有作用。這幾個清理手法讓插入器裡只留下真正會用到的樣板,特別適合接手別人做好的網站、或是做代管客戶站台時,統一插入器內容,不讓客戶自己被一堆用不到的樣板搞混。

註冊後樣板沒出現在插入器,癥結通常是檔名或快取沒清乾淨

自訂樣板最常見的挫折點,是明明照著前面的步驟一步一步做了,插入器裡卻怎麼都找不到剛剛註冊的那顆樣板。遇到這種狀況,不需要重新走一次前面所有的註冊步驟,最常見的原因其實只有 2 類,一次排查完就好。

第一類是檔名或 Slug 對不起來。patterns 資料夾裡的檔案名稱本身其實不影響註冊,WordPress 讀的是檔頭裡的 Slug 欄位,不是實體的檔案名稱,就算檔名跟 Slug 完全不一樣,樣板一樣註冊得成功。但如果是用 register_block_pattern() 手動註冊,把函式的 $pattern_name 打錯字、或是跟別的樣板 Slug 撞名,就會註冊失敗,或是被另一顆樣板悄悄覆蓋掉;手動註冊時漏打一個逗號、少一個右括號這類語法小錯,也會讓整段程式碼在 functions.php 裡靜默失敗,前台不會跳出任何錯誤訊息提醒哪裡出了問題。維護上建議還是讓資料夾裡的實體檔名跟 Slug 的樣板名稱部分維持一致,雖然不會影響註冊,但能避免日後自己搞混。

第二類是快取沒清乾淨。多數快取外掛,包含本站慣用的 WP Rocket,都會把 PHP 產生的頁面輸出一併快取起來,剛註冊好的樣板得等清過完整的伺服器端快取,才會真正出現在插入器裡,只清瀏覽器快取是沒有用的,得連後台的快取外掛設定一起清,才能讓新註冊的程式碼生效。

選哪一種方式存版面,其實從一開始就該想清楚,內容要不要到處同步、骨架要不要能重複叫出來、將來會不會換主題。想清楚這幾件事,自訂樣板該放進 patterns 資料夾還是外掛、檔頭要不要填 Post Types 收窄範圍,答案自然就出來了。往後網站的版面風格要維持一致,靠的不是每次重新排版、也不是提醒團隊成員去某篇文章複製貼上,而是這幾顆已經註冊好、隨時能從插入器叫出來的樣板——版面骨架固定住了,剩下的心力才能真正花在每次要填進去的內容本身。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

同步樣板跟自訂區塊樣板連動範圍有什麼不同?

同步樣板編輯其中一處,網站上所有插入過它的地方會立刻跟著變,適合內容必須到處一致的情境;自訂區塊樣板是透過程式碼註冊進主題,插入之後每個實例各自獨立,改這篇不會動到那篇,適合版面骨架固定、但內容每次都不同的情境。

什麼情況該把版面存成自訂區塊樣板?

判斷依據看兩件事:這個版面的骨架要不要保持一致,以及放進去的內容要不要每次都不一樣;如果骨架固定、內容各自獨立,又想隨時從插入器叫出來,不用去挖舊文章找,就適合存成自訂區塊樣板。

排好版面後,該怎麼包住整個區塊組合?

官方文件建議先用群組或封面這類允許巢狀結構的容器區塊,把整個版面包起來,再放進標題、段落、按鈕等內容;有了外層容器,日後搬動位置、加背景色都只需要動最外層,不必逐一設定每個內部區塊。

樣板放進 patterns 資料夾要怎麼被自動註冊?

只要在使用中主題根目錄底下建一個 patterns 資料夾,把區塊標記存成 .php 檔案,檔案最上面加一段 PHP 註解當檔頭,WordPress 載入時就會自動掃描這個資料夾、解析檔頭,完成整套註冊,不需要手動呼叫任何函式。

樣板沒出現在插入器,通常是什麼原因?

最常見的原因只有兩類:一是檔名或 Slug 對不起來,多半發生在手動註冊時打錯字或撞名;二是快取沒清乾淨,PHP 產生的頁面輸出被快取外掛存住,得連後台快取設定一起清,新註冊的樣板才會顯示出來。

資料來源
  1. Registering Patterns — developer.wordpress.org
  2. Registering Block Patterns — Learn WordPress