iT邦幫忙

2026 iThome 鐵人賽

DAY 13
0

前幾篇我們拆過模板、theme.json、區塊、樣式,今天補上最後一塊拼圖,也是最實用的一塊:區塊版面配置(Patterns)。如果說區塊是磚頭,區塊版面配置就是預先砌好的一面牆,一整組排好版的區塊,存起來之後在任何頁面一鍵插入就能用。

但區塊版面有個地方幾乎每個人第一次都會踩雷,也就是同步和非同步的差別,搞錯這個改一個地方會炸掉二十個頁面,或者以為會連動結果沒連動。

可重複使用的區塊組合

區塊版面配置是一組預先排好的區塊組合,可以整組插入頁面,一個「Hero 區塊」有背景圖 + 大標題 + 副標 + 按鈕,這四個區塊排好版存成一個區塊版面,下次要用直接插入不用重排:

拿傳統佈景主題類比,這最接近的東西是可重複使用的範本片段但更靈活。傳統主題你要複用一段版面,通常是寫一個 get_template_part() 拉進來,或做成短代碼(shortcode),這些都得寫 PHP。區塊版面配置不用,它就是一段區塊標記,甚至可以在後台用滑鼠排好直接存成 Pattern。

主題內建的區塊版面配置,放在 patterns/ 資料夾,用一個帶檔頭的 PHP 檔註冊:

<?php
/**
 * Title: Hero
 * Slug: mytheme/hero
 * Categories: featured
 */
?>
<!-- wp:cover -->
<div class="wp-block-cover"><!-- ...一整組排好的區塊... --></div>
<!-- /wp:cover -->

注意它雖然是 .php 檔,但檔案主體是區塊標記,PHP 只用來寫那個註冊用的檔頭。

關鍵差異:同步 vs 非同步

現在講那個會踩雷的地方。當你把一組區塊存成區塊版面重複使用,會遇到一個問題:改其中一個,其他要不要跟著變? 答案取決於你用的是哪一種。

非同步區塊版面(一般區塊版面):插入的是一份「拷貝」,你把 Hero 區塊版面放到五個頁面,就是五份獨立的複製品,改其中一個不會影響其他四個。它的本質是「省去重排的起手式」,給你一個排好版的起點之後各自獨立編輯,主題內建的區塊版面與從官方區塊版面目錄上面抓下來的多半是這種。

同步區塊版面(舊稱 Reusable Block,可重複使用區塊):插入的是「同一份的引用」。你把它放到五個頁面,五個指向的是同一份本體,改一個五個一起變。它適合「全站要一致、要一起改」的東西,像頁尾的公司地址、全站共用的 CTA,它的內容存在資料庫(wp_block post type),頁面上放的只是一個指向它的引用。

一句話記法:**非同步是複製貼上,同步是捷徑連結,**複製貼上之後各走各的,捷徑連結改了源頭全部跟著動。

那個很多人踩的雷

最常見的災難是這樣:有人想要「一個基礎版面」卻用了同步,他在第一個頁面調了一下文字,跑去第二個頁面發現也被改了。反過來也有:想要「全站一致的頁尾」,卻用了非同步區塊版面,結果改了總部地址,發現二十個頁面的舊地址一個都沒變,得手動改二十次。

判斷法則很單純:這組區塊之後要不要「一起改」? 要一起改(頁尾、共用聯絡資訊、全站 CTA),用同步;只是想要個排好版的起點、之後各自發展(每頁不同的 Hero 文案),用非同步,設定區塊版面要同步或是非同步,可在建立時勾選:

區塊版面目錄:不用自己從零排

還有一個好用的資源值得知道:區塊版面目錄https://wordpress.org/patterns/,這是官方的區塊版面公開庫,上面有大量社群做好的版面,頁首、定價表、團隊介紹、頁尾,你可以直接在編輯器裡瀏覽、插入,當作起手式再改成自己的。

這對 AI 開發是個很好的搭配,第三部組頁面時,你可以先從目錄抓一個結構相近的區塊版面當骨架,再讓 AI 依你的內容和 theme.json 的設計元素去調整,這比讓 AI 從一張白紙排整個版面又快又穩。

該如何管理已經建立好的區塊版面?在後台外觀 → 區塊版面配置可以看到佈景主題、外掛內建的與你自己手動新增的區塊版面,需要注意的是透過程式碼建立的區塊版面是無法編輯的,要再製一個新的出來才能修改內容:

面向 非同步區塊版面 同步區塊版面
插入的是 一份拷貝 同一份的引用
改一個會不會影響其他 不會 會,全部一起變
內容存哪 直接寫進該頁 資料庫(wp_block
適合 每頁各自發展的起手版面 全站要一致、要一起改的區塊
傳統主題類比 複製一段模板碼來改 get_template_part() 共用片段

另外一個需要注意的點是當區塊版面建立後就無法變更同步模式,所以在建立的當下就要決定好,否則事後就只能用再製的方式來重新建立區塊版面。

第二部到這裡吿一段落,這幾篇我們介紹了 Block Theme 的每個零件,都對照回你熟悉的傳統佈景主題,從範本階層 single.html 對應 single.phptheme.json 對應 functions.php、動態區塊對應 ACF、區塊版面對 get_template_part()。你會發現 Block Theme 沒有推翻你的舊知識,只是把它們換了更適合 AI 時代的形式。

觀念的地基打完了,我們將正式進入第三部:打開 Everything-WP 這套工具箱,用 AI 一步一步把這些觀念變成真正跑得起來的主題與外掛。

文章目錄:https://oberonlai.blog/category/2026-ithome/


上一篇
全域樣式與樣式變化:一鍵切換網站配色與版面
下一篇
認識 Everything-WP:我的 AI 開發 WordPress 工具箱
系列文
從一句話到一個網站:用 Vibe Coding 開發 WordPress Block Theme 的 30 天14
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言