WordPress塊主題創建和全棧編輯

已發表: 2022-10-27
目錄
  1. WordPress 全站編輯 (FSE) 是……?
  2. FSE 如何幫助您?
  3. WordPress 環境再次發展
  4. 焦點轉移:從用戶到建設者
  5. 那麼為什麼構建全站點主題很重要?
    • 解決方案
  6. 如何從邏輯上理解這一切?
  7. 您正在查看用於集成和構建塊主題的開發人員課程

如果您最近一直在關注 WordPress 論壇和新聞,那麼您肯定聽說過全站點編輯 (FSE),或者至少看到過對它的引用,例如塊主題創建。 即使您不知道它是什麼,您也可能聽說過它,甚至可能想知道它可能對您意味著什麼。

無論您是經常使用 WordPress 還是開發人員,都有好消息告訴您。 真正的關鍵是你不應該害怕它,一切都會對你有好處,為你簡化這個過程。

我們有什麼依據? 先到先得。 在我們深入了解我們在標題中涵蓋的內容之前,讓我們首先了解一下 WordPress 完整的網站編輯。

wordpress-block-themes-creation-and-full-stack-editing-article.jpg

WordPress 全站編輯 (FSE) 是……?

本質上,全站點編輯避免了塊的想法。 以前,塊可用於編輯網站的內容區域。 現在,當您使用全站點編輯時,您站點的每個部分都將被視為一個塊。

由於這一重大改進,用戶現在可以在單個平台上與頁面和全局元素進行交互。 此外,它還添加了新的主題配置文件和開發工具。

將 WordPress 更新到最新版本後,您必須啟用 FSE 主題,例如二十二十二。 之後,您只能使用 Gutenberg 塊來構建整個網站。


FSE 如何幫助您?

得益於完整的網站編輯,現在構建和開發 WordPress 網站比以往任何時候都容易。 全局元素和任何頁面更新都可以使用同一個編輯器進行。

以及全局元素,它們是什麼? 分配後,可以在整個網站中使用全局元素、容器和列。

這種創新技術允許您編輯網頁或任何特定頁面,從而節省時間。 您無需在編輯器之間切換即可了解正在發生的事情,因為您可以在編輯時實時看到它們。 結果? 當您同時在頁面和全局級別上操作時,您的網站設計會得到改善。

WordPress 6.0 版本默認沒有啟用 FSE。 因此,為了在使用 6.0 之前的 WordPress 版本時使用全站點編輯功能,您必須在激活 FSE 主題之前先更新 WordPress。 您網站的儀表板是您處理所有這些的地方。

programmers-relaxing-graphics.jpg

WordPress 環境再次發展

WordPress 的這種類型的變化發生在上一時期。 大約三年前,我們都熟悉古騰堡(很難記住,因為最近幾年中的一個,如果不是更多,突然消失了)。 您現在可以將其稱為塊編輯器。

然而,當它最初併入 WordPress 核心時,它被賦予了代號 Gutenberg。 改變是困難的。 因此,大多數人的反應都有些怪異。 嗯,幾乎每個人。 幾年後的今天,古騰堡被認為是相當有用的,經常令人愉快的使用,並且不斷發展。 正因為如此,我們有信心這種轉變會成功。 但變化比以前更顯著。


焦點轉移:從用戶到建設者

首次引入這種塊編輯器時,開發人員改變了他們製作素材的方式。 對於那些製作博客文章的人來說,它不像那些創建網站和開發網頁的人那樣具有破壞性。 切換到塊對用戶來說是有利的,隨之而來的是許多令人興奮的功能,例如能夠定義一個材料塊,然後將它動態地放置在網站上的任何地方(和任何地方)。 現在任何人和每個人都可以在不使用任何代碼的情況下做到這一點。

但這種變化有點明顯。 通過全站點編輯更改的不僅僅是您修改站點的方式。 它與您網站的基本框架有關。 這裡不僅定義了您的頁眉或頁腳。 它涉及主題的組成部分。 換句話說,FSE 最終要造福於用戶,但就目前而言,它更像是強調為構建者改進事物——無論是創建網頁的人還是創建主題的人。

無論您是使用頁面構建器,即完成在最好的會員網站構建器中使用易於使用的平台啟動網站的項目,還是構建它們,你們中的許多人都已經習慣了這一階段的生活。 您的頁面可以按照您喜歡的方式設計。 但後來,您會意識到性能問題。 谷歌降低了你的排名,並說你的 DOM 太大了(不管那是什麼)。 由於我們都知道性能為王,現在是了解更多關於 FSE 以及它如何改變您創建的網站的最佳時機。

full-stack-engineer-working-graphics.jpg

那麼為什麼構建全站點主題很重要?

Beaver Builder 出現在 Elementor 之前,記得嗎? 你們中的許多人自己或在為商業客戶創建大量網站的公司中使用它。 但是,他們需要另一種產品 Beaver Themer。 否則,當他們需要修改網頁(或帖子)的頁眉和頁腳時,您必須為他們提供支持自定義(和動態)頁眉和頁腳的主題的幫助。

當 Blocksy、Kadence 和 Astra 等主題開始開發這些功能時,這令人興奮。 但這也導致了一些鎖定。 你知道接下來會發生什麼:客戶在他們的網站上安裝插件後,他們發現它與主題或頁面構建器不兼容。

突然間,每個人都在指指點點。 主題公司聲稱不是他們。 根據頁面構建者的說法,也不是他們。 你猜怎麼著? 遊戲中的新玩家,託管公司,聲稱不是他們。 最初建造該網站的建築商(承包商和代理商)最終受到指責。

當用戶開始抱怨這些頁面加載速度有多慢時,同樣的事情也發生了,這要歸功於這些頁面構建器生成的代碼。 代理商和自由職業者受到批評。

解決方案

這種支持全站點自定義的阻止主題的更改代表了網站創建方式的根本轉變。 隨著這一變化,頁面和整個網站上的每個元素都是一個塊:內容、菜單、側邊欄、頁眉和頁腳。 每個區塊。 因此,主題可以更輕鬆。

主題仍然需要完成一些任務,例如統一整個站點的塊的通用樣式或修復印刷錯誤。 開發人員可以在新的 theme.json 文件中配置所有這些。 但它不僅用於建立參數。 這也是開發人員改變客戶使用編輯器方式的一種方式。

此外,主題中的 UI 元素並不多。 很容易想像,您已經習慣的下一次迭代——使用自定義構建器——將由現在的 JSON 配置器驅動。

簡而言之,這是未來一代的主題,也是您最終能夠限制用戶使用這些新主題完成的任務的方式。


如何從邏輯上理解這一切?

即使看起來令人興奮,更大的困難是確定你們將如何解決這個問題。 沒有人願意開發一個非常簡單的新穎概念。 沒有人願意開發一個激怒用戶的全新主題。

您想要“久經考驗”的舒適感和“新”的力量。 而且問題多於解決方案……

thank-you-for-reading-the-wordpress-block-themes-creation-and-full-stack-editing-article.jpg

您正在查看用於集成和構建塊主題的開發人員課程

想像一下,參加一門課程,該課程詳細解釋了您必須了解的有關構建塊主題和 FSE 的所有內容。 除其他外,我們指的是以下 14 項:

  • 了解全站點編輯以了解它如何影響主題開發。
  • 創建準系統索引模板,然後使用塊從數據庫中檢索帖子。
  • 無需編寫一行代碼,即可實現整個博客主頁模板。
  • 應添加主題的頁眉和頁腳。
  • 了解全站點編輯如何處理導航菜單。
  • 了解如何使用 theme.json 文件預先安排塊編輯器首選項。
  • 了解如何使用內置模式控件創建多功能佈局。
  • 使用 theme.json,應用通用排版和配色方案。
  • 使用間距控件管理填充和邊距。
  • 了解如何設置塊編輯器,使其設置符合主題。
  • 添加字體選擇、漸變、調色板和其他可定制選項。
  • 要限制您的客戶與基本設計的差異,請了解如何從塊中消除不需要的自定義選擇。
  • 了解如何使用模式來幫助您和您的客戶更快地構建頁面。
  • 利用模板元素防止在不同模板中再次使用塊組件。

這是一個令人印象深刻的教訓清單。 好消息是,培訓不僅僅專注於傳授知識。 我們鼓勵您在本次培訓中弄髒手指和指甲。 實踐使它完美。

嘿,你不需要想像它,這是個好消息。 程序已創建。 一切就緒。 雖然這不是帖子的預期主題,但我們還是會披露它,因為我們在為文章收集信息時遇到了它。 Frank Klein 是一位知名並受到 WordPress 專業人士推崇的開發人員,他創建了這門課程。

所以,伙計們,祝你在構建塊主題和做 FSE 方面好運!