自2018年首次亮相以來(lái)，WordPress Block編輯器（Gutenberg）已徹底改變了網(wǎng)站的創(chuàng)建。雖然可用於支持其CSS的任何主題，但Block主題代表著重大進(jìn)步。這些主題利用塊編輯器進(jìn)行完整的站點(diǎn)構(gòu)建，將主題的角色從內(nèi)容控制轉(zhuǎn)移到設(shè)計(jì)指導(dǎo)。這種方法稱(chēng)為全站點(diǎn)編輯（FSE），使用戶(hù)能夠使用塊構(gòu)建整個(gè)站點(diǎn)。

讓我們探索這種變革性的技術(shù)。

目錄

• 介紹
• 關(guān)鍵術(shù)語(yǔ)
• 帶有經(jīng)典主題的塊編輯器
• 了解阻止主題
• 基礎(chǔ)主題
• 全球風(fēng)格和theme.json
• 塊主題開(kāi)發(fā)策略
• 現(xiàn)實(shí)世界塊主題示例
• 創(chuàng)建障礙兒童主題
• 個(gè)人思考
• 資源

介紹

儘管用戶(hù)在很大程度上可以看到塊編輯器的演變，但其在GitHub上的基礎(chǔ)開(kāi)發(fā)一直在不斷發(fā)展。我自己的旅程涉及使用經(jīng)典編輯和塊編輯器，甚至在返回核心平臺(tái)之前，甚至涉足帶有蓋茨比和前線(xiàn)的無(wú)頭Wordpress。

最初，我在GitHub上基於實(shí)驗(yàn)的主題引起了人們的關(guān)注，我最近開(kāi)始積極探索它們，甚至在個(gè)人項(xiàng)目上實(shí)施一個(gè)。 WordPress 5.9（“Joséphine”）標(biāo)誌著一個(gè)關(guān)鍵的時(shí)刻，將完整的編輯帶到了最前沿。雖然以前存在迭代功能，但此版本是改變遊戲規(guī)則的。本文分享了我的動(dòng)手學(xué)習(xí)經(jīng)驗(yàn)和個(gè)人觀察。

免責(zé)聲明：我不是一個(gè)主題專(zhuān)家，而是經(jīng)驗(yàn)豐富的WordPress用戶(hù)。我的目的不是批評(píng)WordPress 5.9，而是根據(jù)與Block編輯者的實(shí)踐經(jīng)驗(yàn)提供開(kāi)放的學(xué)習(xí)者的觀點(diǎn)。

關(guān)鍵術(shù)語(yǔ)

在研究塊主題之前，讓我們澄清基本術(shù)語(yǔ)：

塊編輯器

這是指WordPress編輯器，由於其基於塊的結(jié)構(gòu)而恰當(dāng)?shù)孛?。每個(gè)元素（文本，圖像，視頻等）都是一個(gè)塊，啟用模塊化頁(yè)面佈局。這與“經(jīng)典”編輯器的預(yù)定義佈局方法形成鮮明對(duì)比。塊編輯器在單個(gè)接口中集成了內(nèi)容和佈局編輯。

塊主題

如WordPress文檔所定義的那樣，塊主題使用塊來(lái)構(gòu)建所有站點(diǎn)模板（標(biāo)題，頁(yè)腳，側(cè)邊欄等），從而將塊編輯器的範(fàn)圍擴(kuò)展到了帖子內(nèi)容之外。與依靠PHP模板的經(jīng)典主題不同，封鎖主題利用基於塊的HTML模板，該模板是通過(guò)網(wǎng)站編輯器和theme.json來(lái)安排的。

網(wǎng)站編輯器

站點(diǎn)編輯器（通常稱(chēng)為全站點(diǎn)編輯或FSE）是創(chuàng)建和管理基於塊模板的中心工具。它允許編輯內(nèi)聚界面中的各種模板，模板零件和樣式選項(xiàng)。這用基於視覺(jué)，基於塊的方法取代了傳統(tǒng)的基於PHP模板的主題開(kāi)發(fā)。

官方的WordPress詞彙表提供了進(jìn)一步的定義。

帶有經(jīng)典主題的塊編輯器

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

了解阻止主題

自2020年初以來(lái)，實(shí)驗(yàn)塊主題一直在開(kāi)發(fā)中。GITHUB主題實(shí)驗(yàn)存儲(chǔ)庫(kù)展示了各種方法。二十一個(gè)是一個(gè)重要的步驟，整合了塊樣式和圖案?，F(xiàn)在，許多主題都包括塊編輯器圖案和樣式。

塊主題文件結(jié)構(gòu)

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

模板和模板零件

模板是一組塊，通常結(jié)合可重複使用的“模板零件”（例如，標(biāo)頭，頁(yè)腳）。這些組裝以創(chuàng)建頁(yè)面佈局。

基礎(chǔ)主題

網(wǎng)站編輯器是設(shè)計(jì)WordPress網(wǎng)站的主要工具。它替換了許多主題自定義任務(wù)的自定義器。

WordPress網(wǎng)站編輯器接口

通過(guò)外觀→編輯器訪問(wèn)的網(wǎng)站編輯器提供了一個(gè)熟悉的基於塊的接口，但具有擴(kuò)展的可管理站點(diǎn)範(fàn)圍模板的功能。它具有用於站點(diǎn)，模板和模板零件的部分，可實(shí)現(xiàn)全局設(shè)計(jì)調(diào)整?？梢允褂肒ebob菜單輕鬆清除自定義。

創(chuàng)建模板和模板零件

模板是在網(wǎng)站編輯器中創(chuàng)建和管理的，從而消除了對(duì)手動(dòng)PHP文件創(chuàng)建的需求。 Block編輯器手冊(cè)詳細(xì)信息用於創(chuàng)建模板和模板零件的方法，包括手動(dòng)HTML創(chuàng)建以及使用站點(diǎn)編輯器的界面。

全球風(fēng)格和theme.json

在塊主題中，通過(guò)theme.json來(lái)管理樣式。JSON文件，從各種來(lái)源提供了對(duì)樣式的精細(xì)控制。該文件允許主題作者定義默認(rèn)樣式，管理用戶(hù)自定義選項(xiàng)並設(shè)置編輯器默認(rèn)值。它提供了一種集中的樣式方法，可提高可維護(hù)性。

塊主題開(kāi)發(fā)策略

有幾種策略正在出現(xiàn)以進(jìn)行塊主題開(kāi)發(fā)：

通用主題

Blockbase是來(lái)自Automattic的通用主題，是與下劃線(xiàn)主題相似的起點(diǎn)，為兒童主題開(kāi)發(fā)提供了基礎(chǔ)。

默認(rèn)主題（例如，二十一2個(gè)）

二十二十二個(gè)是專(zhuān)為FSE設(shè)計(jì)的主題的一個(gè)很好的例子，展示了塊主題的功能。

混合主題

混合主題融合了傳統(tǒng)和FSE方法，利用theme.json用於造型和可能結(jié)合模板的JSON。

社區(qū)主題

WordPress主題目錄提供了越來(lái)越多的社區(qū)創(chuàng)建的塊主題，展示了各種方法。

現(xiàn)實(shí)世界塊主題示例

許多網(wǎng)站已經(jīng)在使用塊主題，展示了其多功能性。

創(chuàng)建障礙兒童主題

儘管方法仍在不斷發(fā)展，但兒童主題仍然與塊主題相關(guān)。

創(chuàng)建Blockbase主題插件

Automattic的“ Create Blockbase主題”插件簡(jiǎn)化了針對(duì)Blockbase主題的兒童主題創(chuàng)建。

使用替代theme.json 。

交換theme.json文件可以大大改變塊主題的外觀。正在出現(xiàn)工具，以簡(jiǎn)化非編碼器的此過(guò)程。

個(gè)人思考

我的經(jīng)驗(yàn)突出了幾個(gè)關(guān)鍵方面：

解決jamstack的批評(píng)

封鎖主題通過(guò)提供輕巧的，以標(biāo)記為中心的結(jié)構(gòu)來(lái)解決有關(guān)jamstack批評(píng)對(duì)腫的WordPress主題的批評(píng)。

缺少定制器

定制器代碼注入功能的丟失需要適應(yīng)網(wǎng)站編輯器的界面。

簡(jiǎn)化的自定義

與經(jīng)典主題相比，定制塊主題的定制要容易得多，即使對(duì)於非開(kāi)發(fā)者也是如此。

降低進(jìn)入障礙

阻止主題簡(jiǎn)化主題開(kāi)發(fā)，更多地關(guān)注內(nèi)容和模式。

資源

許多資源可用於了解有關(guān)塊主題和FSE的更多信息。這包括來(lái)自各種來(lái)源的官方WordPress文檔，教程和博客文章。

網(wǎng)站編輯器雖然仍在不斷發(fā)展，但卻提供了令人興奮的可能性。我正在積極探索障礙主題，並期待未來(lái)的發(fā)展。分享您的經(jīng)驗(yàn)和反饋！

以上是WordPress的深入介紹的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！