首頁 >web前端 >css教學 >WordPress的深入介紹

WordPress的深入介紹

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌原創
2025-03-14 11:33:13695瀏覽

WordPress的深入介紹

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

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

目錄

  • 介紹
  • 關鍵術語
  • 帶有經典主題的塊編輯器
  • 了解阻止主題
  • 基礎主題
  • 全球風格和theme.json
  • 塊主題開發策略
  • 現實世界塊主題示例
  • 創建障礙兒童主題
  • 個人思考
  • 資源

介紹

儘管用戶在很大程度上可以看到塊編輯器的演變,但其在GitHub上的基礎開發一直在不斷發展。我自己的旅程涉及使用經典編輯和塊編輯器,甚至在返回核心平台之前,甚至涉足帶有蓋茨比和前線的無頭Wordpress。

最初,我在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.phpstyle.csstheme.jsontemplates/index.html和可重複使用組件的parts文件夾。

模板和模板零件

模板是一組塊,通常結合可重複使用的“模板零件”(例如,標頭,頁腳)。這些組裝以創建頁面佈局。

基礎主題

網站編輯器是設計WordPress網站的主要工具。它替換了許多主題自定義任務的自定義器。

WordPress網站編輯器接口

通過外觀→編輯器訪問的網站編輯器提供了一個熟悉的基於塊的接口,但具有擴展的可管理站點範圍模板的功能。它具有用於站點模板模板零件的部分,可實現全局設計調整。可以使用Kebob菜單輕鬆清除自定義。

創建模板和模板零件

模板是在網站編輯器中創建和管理的,從而消除了對手動PHP文件創建的需求。 Block編輯器手冊詳細信息用於創建模板和模板零件的方法,包括手動HTML創建以及使用站點編輯器的界面。

全球風格和theme.json

在塊主題中,通過theme.json來管理樣式。JSON文件,從各種來源提供了對樣式的精細控制。該文件允許主題作者定義默認樣式,管理用戶自定義選項並設置編輯器默認值。它提供了一種集中的樣式方法,可提高可維護性。

塊主題開發策略

有幾種策略正在出現以進行塊主題開發:

通用主題

Blockbase是來自Automattic的通用主題,是與下劃線主題相似的起點,為兒童主題開發提供了基礎。

默認主題(例如,二十一2個)

二十二十二個是專為FSE設計的主題的一個很好的例子,展示了塊主題的功能。

混合主題

混合主題融合了傳統和FSE方法,利用theme.json用於造型和可能結合模板的JSON。

社區主題

WordPress主題目錄提供了越來越多的社區創建的塊主題,展示了各種方法。

現實世界塊主題示例

許多網站已經在使用塊主題,展示了其多功能性。

創建障礙兒童主題

儘管方法仍在不斷發展,但兒童主題仍然與塊主題相關。

創建Blockbase主題插件

Automattic的“ Create Blockbase主題”插件簡化了針對Blockbase主題的兒童主題創建。

使用替代theme.json

交換theme.json文件可以大大改變塊主題的外觀。正在出現工具,以簡化非編碼器的此過程。

個人思考

我的經驗突出了幾個關鍵方面:

解決jamstack的批評

封鎖主題通過提供輕巧的,以標記為中心的結構來解決有關jamstack批評對腫的WordPress主題的批評。

缺少定制器

定制器代碼注入功能的丟失需要適應網站編輯器的界面。

簡化的自定義

與經典主題相比,定制塊主題的定制要容易得多,即使對於非開發者也是如此。

降低進入障礙

阻止主題簡化主題開發,更多地關注內容和模式。

資源

許多資源可用於了解有關塊主題和FSE的更多信息。這包括來自各種來源的官方WordPress文檔,教程和博客文章。

網站編輯器雖然仍在不斷發展,但卻提供了令人興奮的可能性。我正在積極探索障礙主題,並期待未來的發展。分享您的經驗和反饋!

以上是WordPress的深入介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn