WordPress塊主題介紹

構成典型 WordPress 主題的組件多年來沒有太大變化。 以至於項目聯合創始人 Matt Mullenweg 打趣說，老式的 Kubrick 主題（2005 年發布）仍然適用於現代版本的內容管理系統。

當然，主題開發人員已經加入了自己的添加。 我們已經看到了從復雜設置 UI 到集成頁面構建器的所有內容。 但在它們的核心，主題保持了一致的結構。 也就是說，直到引入塊主題。

塊主題將成為 WordPress 的未來。 它們將改變我們構建和維護網站的方式。 此外，它們與 Gutenberg 塊編輯器的集成比它們的“經典”對應物更緊密。

想知道所有的大驚小怪是什麼？ 今天，我們將向您介紹 WordPress 塊主題的基礎知識。 在此過程中，我們將探索它們如何與傳統主題進行比較和對比。 讓我們開始吧！

為什麼要阻止主題？

在其存在的最初幾年中，塊編輯器主要是一種設置樣式和構建內容的方法。 當與經典主題相結合時，這意味著頁面和帖子可以根據您的內心需求製作。

在進行影響整個主題的更改時，WordPress Customizer 仍然是首選資源。 此工具提供對主題作者提供的設計和佈局設置的訪問。 如果它不在定制器中，您可能必須深入研究代碼。

但是，塊編輯器的主要原則之一是在 WordPress 儀表板中創建更統一的界面。 我們已經看到小部件屏幕移動到基於塊的 UI 時會發生這種情況。 定制器根本不適合這個模具。

引入完整站點編輯 (FSE) 是此過程的下一步。 它不僅僅是設計我們的頁面和帖子。 現在，主題設計的各個方面（頁眉、頁腳、頁面模板等）都可以直接在 WordPress 中進行管理。

塊主題充當此功能的門戶。 因此，它們在構建時專門考慮了塊。

WordPress 塊主題的內部工作原理

經典主題和塊主題之間沒有太多相似之處。 但兩者都有一套指導他們化妝的基本規則。 如果您要下載塊主題並瀏覽其文件結構，則可能會出現一些關鍵對比。

模板文件是 HTML，而不是 PHP

在經典主題中，您會找到名稱為index.php和header.php的模板文件。 塊主題取消了 PHP，而是帶有.html文件擴展名。

在內部，模板文件包含 HTML 和塊標記的組合。 例如，讓我們看一下 WordPress 官方文檔中的這個模板：

 <!-- wp:site-title /--> <!-- wp:image {"sizeSlug":"large"} --> <figure class="wp-block-image size-large"> <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:heading --> <h2>Footer</h2> <!-- /wp:heading --> </div> <!-- /wp:group -->

塊標記看起來很像 HTML 註釋。 但它包括將特定塊調用到模板中的語法。 WordPress 完整站點編輯網站有一個方便的參考，其中包括每個默認塊的標記。

如果這種類型的代碼看起來很熟悉，那麼您可能已經在 Gutenberg 的代碼編輯器視圖中看到過類似的東西。

文件夾的使用

經典主題能夠在文件夾中存儲模板，但這不是必需的。 塊主題需要幾個子文件夾：

/parts
包含可重複使用的項目，例如頁眉、頁腳和側邊欄。

/templates
包含各種類型內容的模板。 頁面、帖子檔案和單數帖子等項目是常見的示例。 請注意，它們的命名約定遵循 WordPress 模板層次結構——與經典主題的另一個相似之處。

這種安排的積​​極副作用之一是主題將得到更好的組織。 擁有標準化的文件夾結構意味著搜索特定文件所花費的時間更少。

Theme.json 樣式

theme.json文件用於將默認設置分配給塊編輯器。 這意味著，除其他外，可以設置默認調色板、排版和間距。 設置可以在站點範圍內或應用於特定塊。

由於theme.json會根據其配置自動生成適當的 CSS，因此您可能不需要太多填充主題的style.css文件。 在這種情況下，樣式表用於定義一些基礎知識，而其他一切都依賴於這個新奇的文件。

創建和編輯模板

WordPress 長期以來一直提供直接在儀表板中編輯主題模板文件的能力。 這通常是不鼓勵的，因為即使是一個小的編碼錯誤也可能導致網站無法訪問。 更不用說更新主題時更改被覆蓋的可能性（因此，使用子主題的部分原因）。 一些開發人員完全關閉了該功能，以避免哪怕是很小的災難機會。

但是塊主題都是關於儀表板內的編輯。 主題中包含的模板可以通過塊編輯器進行調整，也可以創建新的自定義模板。

如您所料，在這種情況下代碼是完全可選的。 一切都可以通過新的站點編輯器進行編輯（外觀>編輯器-需要 WordPress 5.9 或更高版本），當激活塊主題時，它會替換舊版定制器。 而且，就像頁面或帖子一樣，站點編輯器使用熟悉的塊編輯器 UI。

這還不是全部。 您在 WordPress 中所做的任何更改都可以導出。 這將使您能夠在多個網站上使用您的自定義塊主題。

這降低了那些想要定制甚至創建主題的人的進入門檻。 現在，設計的基本眼光和塊的工作知識可以導致自定義網站。

要記住的事情

在您潛入並切換所有網站以使用塊主題之前，您應該知道一些事情。

首先，區塊主題是一項新興技術。 並非所有功能都已最終確定，需要解決一些最佳實踐。 另外，我們才剛剛開始了解這些主題在生產環境中是如何工作的。 隨著事情的發展，預計會有一些變化。

如果您為客戶構建網站並希望保持一些未來的靈活性，那麼混合主題可能會引起您的興趣。 它們允許使用 FSE 功能，同時仍保持經典主題的 PHP 結構。 您甚至可以改造現有主題以使用此功能。

最後，區塊主題並不意味著經典主題的終結——至少在可預見的未來不會。 這樣一來，就不必立即過渡到這種新的主題化方式。 例如，可以在本地環境中試驗塊，同時在生產中仍然依賴您最喜歡的經典主題。

塊主題資源

如果您想了解有關 WordPress 塊主題的更多信息，可以使用一些出色的資源。 以下是我們的一些最愛：

• 通過 WordPress 阻止主題文檔
• Automattic 的 Blockbase 主題
• 卡羅琳娜·尼馬克 (Carolina Nymark) 的全站編輯
• Rich Tabor 的古騰堡 WordPress 塊模板終極指南
• WordPress Block 主題革命正在悄然興起 Justin Tadlock
• WordPress的WordPress主題實驗