WordPress的深入介紹-css教學-PHP中文網

自2018年首次亮相以來，WordPress Block編輯器（Gutenberg）已徹底改變了網站的創建。雖然可用於支持其CSS的任何主題，但Block主題代表著重大進步。這些主題利用塊編輯器進行完整的站點構建，將主題的角色從內容控制轉移到設計指導。這種方法稱為全站點編輯（FSE），使用戶能夠使用塊構建整個站點。

讓我們探索這種變革性的技術。

最初，我在GitHub上基於實驗的主題引起了人們的關注，我最近開始積極探索它們，甚至在個人項目上實施一個。 WordPress 5.9（“Joséphine”）標誌著一個關鍵的時刻，將完整的編輯帶到了最前沿。雖然以前存在迭代功能，但此版本是改變遊戲規則的。本文分享了我的動手學習經驗和個人觀察。

免責聲明：我不是一個主題專家，而是經驗豐富的WordPress用戶。我的目的不是批評WordPress 5.9，而是根據與Block編輯者的實踐經驗提供開放的學習者的觀點。

關鍵術語

在研究塊主題之前，讓我們澄清基本術語：

塊編輯器

這是指WordPress編輯器，由於其基於塊的結構而恰當地命名。每個元素（文本，圖像，視頻等）都是一個塊，啟用模塊化頁面佈局。這與“經典”編輯器的預定義佈局方法形成鮮明對比。塊編輯器在單個接口中集成了內容和佈局編輯。

塊主題

如WordPress文檔所定義的那樣，塊主題使用塊來構建所有站點模板（標題，頁腳，側邊欄等），從而將塊編輯器的範圍擴展到了帖子內容之外。與依靠PHP模板的經典主題不同，封鎖主題利用基於塊的HTML模板，該模板是通過網站編輯器和theme.json來安排的。

網站編輯器

站點編輯器（通常稱為全站點編輯或FSE）是創建和管理基於塊模板的中心工具。它允許編輯內聚界面中的各種模板，模板零件和样式選項。這用基於視覺，基於塊的方法取代了傳統的基於PHP模板的主題開發。

官方的WordPress詞彙表提供了進一步的定義。

帶有經典主題的塊編輯器

塊編輯器與經典主題和阻止主題一起使用。經典編輯器（通過經典編輯插件）仍然可用，可提供向後兼容性。最初是通過Gutenberg插件逐步引入塊編輯器，然後集成到WordPress Core中，為FSE鋪平了道路。

了解阻止主題

自2020年初以來，實驗塊主題一直在開發中。GITHUB主題實驗存儲庫展示了各種方法。二十一個是一個重要的步驟，整合了塊樣式和圖案。現在，許多主題都包括塊編輯器圖案和样式。

塊主題文件結構

塊主題與經典主題有很大不同。儘管經典主題依靠PHP和JavaScript進行標記，但阻止主題利用了Core的標記和基本樣式。一個簡單的塊主題可能包括index.php ， style.css ， theme.json ， templates/index.html和可重複使用組件的parts文件夾。