FSE 區塊操作實戰,模板編輯到群組鎖定完整教學

WordPress 6.x 把全站編輯(FSE)從實驗性功能推進到正式預設工具,對使用區塊佈景主題的站長來說,學習門檻比過去的客製化器(Customizer)低了不少。但許多人第一次打開網站編輯器(Site Editor),面對滿屏的區塊面板和游離的工具列,仍需要一段時間才能建立操作直覺。

這篇文章聚焦 FSE 環境下最常用的幾組區塊操作,涵蓋模板編輯、區塊插入與群組鎖定,目標是幫站長在最短時間內掌握介面邏輯,把心力放回內容本身。

進入網站編輯器的兩個入口

想開啟 FSE,從後台左側導覽點「外觀」,再選「編輯器」即可。WordPress 6.5 之後,預設會直接進入「設計」總覽畫面,頂部有「樣式」、「頁面」、「模板」、「樣式書」等分頁。對剛切換到區塊佈景主題的站長而言,最值得先熟悉的是「模板」這一層。

另一條入口是在文章或頁面的區塊編輯器裡,點擊右上角的「詳細資訊」圖示,選「查看所有模板」。這條路徑適合在內容寫到一半時,臨時跳去調整當前文章套用的模板,改完回來不會打亂寫作流程。

兩個入口進去後,左側面板列出的結構與操作選項基本一致,差別只在進入來源,不影響實際功能。

模板的編輯邏輯與哪裡不能輕易更動

FSE 裡的模板(Template)定義了整類頁面的版型——首頁、單篇文章、分類彙整、404 頁面各有獨立的模板。在模板層級所做的修改,會套用到所有使用該模板的頁面,不只影響眼前那一頁。

進入模板編輯後,畫面左上角的「區塊清單」圖示(三條橫線)是閱讀結構的最快方式。點開後,整份模板的區塊層級一目了然,也可以在這裡直接選取深層嵌套的區塊,省去在畫面上層層點選的時間。

有一個操作習慣值得從一開始就養成:動模板前先確認目前是在「模板層級」還是「頁面層級」。確認方式是看頂部工具列中間的麵包屑導覽,顯示的是「模板名稱」就表示在模板層,顯示的是文章或頁面標題就是在內容層。兩層的視覺介面很相近,混淆後容易把模板的固定元素誤改成只影響單頁的區塊內容。

網站編輯器常用的區塊插入方式

在模板或頁面編輯模式下,插入新區塊有幾種途徑可以搭配使用,依情境選擇效率最高的那一條。

區塊選取之後可用的操作範圍,集中顯示在右側面板的「區塊」分頁裡;若右側面板未出現,點頂部工具列右上角的「設定」圖示(齒輪)即可叫出。

插入區塊的常用途徑包括:

  • 藍色「+」按鈕:游標移到現有區塊的邊緣時浮現,直接點擊開啟搜尋面板,輸入關鍵字即可找到目標區塊。適合快速補插單一區塊。
  • 斜線指令(Slash Command):在空白段落區塊內輸入 /,後接區塊名稱的中英文關鍵字,例如 /image/圖片,清單出現後按 Enter 確認。適合在寫作過程中不離開鍵盤的情境。
  • 區塊嵌入器(Inserter):點頂部工具列最左側的「+」按鈕,展開完整的區塊分類面板。適合需要瀏覽、比對不熟悉的區塊時使用。
  • 複製並貼上現有區塊:選取現有區塊後按 Ctrl+C,移到目標位置後 Ctrl+V,複製結果保留原本的設定值。適合同頁需要多個結構相似的區塊。

四條路徑各有專長,搭配使用遠比只依賴一種更有效率。

群組區塊與鎖定,防止模板被意外修改

群組(Group)是 FSE 裡最重要的結構容器,理解它的運作方式,等於掌握了模板維護的核心手法。

把相關的區塊放進同一個群組,好處是移動位置時整組一起移,不必逐塊處理;套用背景色或間距時,群組層級的設定會涵蓋所有子區塊,不必逐一調整。群組也是「鎖定」功能的作用範圍——在右側面板點「進階」,再點「鎖定」,可以設定該群組或其中個別區塊是否允許移動、是否允許刪除。

鎖定功能在多人協作的站台尤其實用。導覽列(Navigation)、頁首(Header)、頁尾(Footer)這些全站共用的模板區塊,鎖定後即使撰稿人員誤觸也不會異動,省去事後修復的工夫。鎖定設定只對目前登入角色層級以下的使用者有效,管理員(Administrator)始終可以解鎖。

WordPress 6.4 引入「同步樣式覆寫(Synced Pattern Overrides)」之後,還有另一種更細緻的保護機制可用。把一組區塊存成「同步樣式(Synced Pattern)」,可以在允許文字內容被覆寫的同時,鎖住結構與排版不被更動。這個機制比整組鎖定更有彈性,適合「版型固定但內容需要按頁客製」的場景,像是服務介紹卡片、活動資訊條幅這類重複使用的版塊。

樣式面板的幾個操作細節

FSE 的樣式面板(Styles)集中管理全站的字型、配色、區塊間距,入口是後台「外觀 > 編輯器」進去後頂部工具列的「樣式(圓形半黑半白圖示)」。

進到樣式面板後,有幾個操作細節容易被忽略。調整「排版」底下的字型時,改的是全站預設值;若只想改某個別區塊的字型,要在那個區塊的右側面板單獨設定,而非從樣式面板調整。配色部分同理,全站調色盤的設定決定了右側面板「顏色」區塊可選的選項,但不會強制覆蓋已在個別區塊設好的值。

另一個常見的誤區是把「樣式」和 theme.json 混淆。樣式面板的修改存在資料庫,theme.json 的設定則位於佈景主題的程式碼層。兩者的優先順序是,個別區塊覆寫高於樣式面板設定,樣式面板設定又高於 theme.json 預設值。只要記住這條優先鏈,遇到「改了樣式但沒生效」的狀況,就能順著這個方向逐層排查。

如果想把樣式面板的客製化設定清空、回到佈景主題原始狀態,在樣式面板右上角的三點選單裡有「重設為佈景主題預設值」這個選項。這個動作無法撤銷,操作前建議先在「樣式書(Style Book)」截圖備存目前的配置。

掌握這幾組操作之後,FSE 的日常維護工作——修模板、插區塊、鎖結構、調樣式——基本上就能以正確的手法處理,不再是每次都要摸索介面邏輯的過程。

相關文章
標籤: 區塊主題, 全站編輯器, FSE, 區塊編輯, 模板編輯