DE{CODE}：現代主題和 WordPress 的未來：使用完整站點編輯及其他

WordPress 5.9 在核心中引入了全站編輯，標誌著我們使用 WordPress 構建網站的方式發生了重大轉變。 在此 DE{CODE} 會議中，加入 WP Engine 開發倡導者 Nick Diego 解壓縮這些更改，以及您可以利用它們構建更好網站的一些方法 - 現代 WordPress 方式。

會議幻燈片

全文抄本

NICK DIEGO ：您好，歡迎來到“在 WordPress 中使用完整站點編輯和現代主題的未來”。 我叫 Nick Diego，是 WP Engine 的一名開發人員。 關於我的一點點——所以我在 2012 年開始使用 WordPress。我最初是一名插件開發人員，從那以後我已經過渡到使用塊主題做很多事情。 我實際上是在 2021 年 11 月加入 WP Engine，所以這對我來說是一種新的工作。 我對塊和模式以及所有全站點編輯充滿熱情，這就是為什麼我今天能做這個演講感到非常興奮。

那麼什麼是全站編輯呢？ 在過去的幾年裡，我們已經聽說過很多。 因此，它實際上是“一組功能，將塊的熟悉體驗和可擴展性帶到您網站的所有部分，而不僅僅是帖子和頁面。” 所以它實際上是一個功能傘，包括站點編輯器、全局樣式、主題塊、模板，當然還有塊主題。

所以在我們今天的談話中，我們將討論一些不同的事情。 我們將從基礎開始。 我想確保我們都在同一頁面上，尤其是從術語的角度來看。 然後我們將討論塊主題的剖析，然後是全局樣式，包括 theme.json 文件的內部設置。 最後，我將分享我對現代主題的想法以及它的外觀。

因此，在今天的演示中，我們將使用一系列不同的示例，這些示例將來自 2022 年主題，該主題早在 2022 年 1 月就包含在 WordPress 5.9 中。這是一個由 Core 開發的塊主題WordPress 團隊，這是一個很好的起點，它在插件存儲庫中可用，因此沒有更好的主題可以用作示例。

因此，當我們今天開始時，我們將從基礎開始。 沒有什麼比塊更基本的了。 因此，如果您過去幾年一直在使用 WordPress，您可能對塊非常熟悉。 它們是 WordPress 中的基本內容單元。 它可以是一段文字到圖片庫。 它幾乎可以採用任何形式。 全站點編輯背後的想法是，很快或現在，您網站上的所有內容都將成為障礙。 我們將詳細討論它是如何工作的。

現在這裡我們有一個當前在 WordPress 中的一堆不同塊的示例。 左邊兩列你應該很熟悉了。 我們有段落、標題和封面塊——等等。 在今年發布的 5.9 中，我們現在有了所謂的主題塊。 這些塊包含傳統上您無法直接從 WordPress 中編輯的內容。

這些包括您的站點徽標、查詢循環、帖子摘錄、帖子作者等內容。 這些都是您需要深入研究基於 PHP 的模板文件並直接編寫代碼或使用第三方插件來幫助您編輯這些區域的所有類型的內容。 而這些都來了或者已經來了WordPress，允許用戶直接編輯，而且都是以塊的形式出現。

接下來，我們要談談模式。 模式是全站編輯體驗的基石。 模式本身就是一個完整的對話，但如果您不熟悉模式，我們將讓您先睹為快。 同樣，模式只是形成特定佈局的預定義塊集合。 模式可以是具有某種樣式的單個塊。 它可以是多個塊。

模式允許用戶通過單擊將整個設計直接插入他們的站點，而不必手動構建設計，一次一個塊，這可以真正加快站點的開發。 如果您還記得的話，它也非常有用——您看到了這個漂亮的網站演示，其中包含所有這些內容。 然後你安裝了主題，就像，好吧，我如何獲得該演示？ 模式可以為您解決這個問題，因為主題作者可以提供一大堆頁面佈局或單獨的設計，只需單擊一下，用戶就可以插入並獲取他們在選擇主題時看到並被吸引的演示。

因此，讓我們快速瀏覽一下此處的模式。 我們只有一個簡單的標題、一些文本和一些按鈕。 這可以再次通過單擊插入頁面，我們在這裡看到它由三個不同的塊組成，一個標題塊、一個段落塊和一個按鈕塊。

現在又是今年發布的 5.9，我們看到了 Pattern Explorer 的引入。 因此，我之前提到的 2022 主題，我們在所有示例中使用的主題，被稱為孵化場主題——很多鳥。 您可以在 Pattern Explorer 中看到，我們有主題作者構建的一堆不同的設計。

因此，作為用戶，我可以將其中任何一個直接插入網站，並且我得到與主題作者設計主題相同的美感，所以它的揚聲器系列，一些並排的鳥 - 無論你喜歡什麼。 和模式，以及與主題一起提供的模式，對於全站點編輯體驗非常重要。

接下來，我們有編輯器。 我們不能不談論編輯器。 如果您一直在使用 WordPress，您可能對此非常熟悉。 但我確實想提一下這一點，因為編輯器在過去有過許多不同的名字——Block Editor、Gutenberg、The Gutenberg Editor。 出於本次討論的目的，我們將呼叫編輯器。 這是它的正式名稱，這就是你在這裡看到的。 同樣，這是在 2018 年底的 WordPress 5.0 中引入的。

因此，在編輯器中，您只需單擊插入器，即可插入您的塊和模式。 現在，我想顯示屏幕，因為接下來我們需要討論站點編輯器。 最終，站點編輯器的站點前綴可能會消失，我們將只有編輯器。 但站點編輯器是一種內聚體驗，允許您直接在各種模板、模板部分、樣式選項等之間進行編輯和導航。

所以基本上，站點編輯器採用了我們在過去幾年中已經習慣的標準編輯器，並將其提升到一個新的水平，允許用戶編輯您網站的其他區域，這些區域現在都由塊提供支持。 所以 WordPress 5.9 引入了全站點編輯，隨之而來的還有站點編輯器。 在將於 5 月發布的 6.0 中，我們將看到很多增強功能，這非常令人興奮。

因此，如果您使用的是像 2022 這樣的塊主題，您將能夠訪問網站編輯器。 有兩種不同的方式，頂部側邊欄然後在外觀部分下方。 現在，站點編輯器，再次，因為它是的一部分——它非常強大，它只對管理員可用。 所以別擔心，編輯們，他們將無法訪問站點編輯器。 您必須是管理員才能訪問站點編輯器。

一旦我們進入這裡，它看起來與標準編輯器非常相似，但您會注意到有些不同。 在這裡的頂部，我們有主頁。 這告訴我們，我們實際上是在編輯 home.HTML 模板，我們有幾個不同的頁面區域可以單獨編輯。 正如您在這裡看到的，我們有頁眉和頁腳。

所以這是你以前永遠做不到的事情。 您永遠無法編輯 home.PHP，但現在直接從界面編輯 HTML 模板，而不是沒有其他第三方擴展。

如果我們點擊進入頁面和列表視圖，我們可以看到我們有一個查詢循環。 同樣，那些熟悉的構建主題可能非常、非常、非常熟悉在主題模板中構建循環，但在這裡我們可以使用查詢循環對塊進行所有操作。 我們還可以看到其他一些主題塊，例如帖子標題、特色圖片、帖子摘錄和發布日期。 這些都可以由用戶從界面移動和修改，無需任何編碼。

現在，如果您單擊一個小的 WordPress 圖標或站點圖標，我們可以得到這個側邊欄。 然後我們可以看到我們可以訪問我們所有的模板和模板部分。 現在，我確實想指出流程——所有這些屏幕都在全面開發中。 全站點編輯仍處於測試階段，並且將會有很多改進和改進。 所以我們今天看到的可能在六個月後看起來不一樣，但這是一個美妙的開始。

因此，如果我們轉到模板，我們可以看到 2022 中包含的所有模板。您應該會看到一些熟悉的模板，例如 Page 和 Index 以及 Home 和 404。然後如果我們轉到我們的模板部分，我們可以看到一些自定義的主題作者包含的模板部分。 所以我們有幾個不同的頁眉和頁腳。

現在，所有這些都可以由用戶編輯。 所以，如果我們在這裡看到這個小點，我們可以看到這個標題模板部分已經被我編輯過了。 現在，當您編輯模板部件或模板時，這些更改會保存到數據庫中。 他們實際上並沒有修改您主題中的模板，這很好，因為您可以隨時恢復到主題模板或模板部分。

但是同樣，如果我們點擊這裡，我們可以開始編輯那個標題模板部分，你會看到所有這些都是由塊組成的。 因此，這與您在編輯帖子或頁面時在編輯器中使用的體驗相同。 您現在可以在站點編輯器中為所有模板和模板部分執行此操作。

所以這是對站點編輯器及其工作原理的快速瀏覽，但現在我想談談塊主題的剖析，這是全站點編輯的主要基本組成部分。 那麼塊主題的剖析是如何工作的呢？ 好吧，它實際上分為幾個不同的類別。 所以我們有塊主題。 他們完全接受全站點編輯。 主題模板完全由塊組成。 模板和模板部件是 HTML 而不是 PHP。

然後我想指出塊主題可以非常簡單。 它需要做的只是包含一個 style.CSS 文件和一個 index.html 文件，以及一個 index.PHP 文件。 這個 PHP 文件是傳統 WordPress 主題開發的殘餘，將來可能會消失。

最後，大多數塊主題都包含一個 theme.JSON 文件。 我們將單獨討論這個。 這是一個關於全局設置和样式的非常重要的話題。 那麼讓我們看一下主題文件結構。 所以這是 2022，2022 內部文件結構的簡化版本。我們可以在這裡看到那些所需的文件。

然後我們也注意到有一些文件夾，分別是Templates和Template Parts。 在這些文件夾中的每一個中，您都有每個模板和模板部件的所有 HTML 文件。 在這裡看不到的東西，實際上真的很令人興奮，所以我想把它偷偷放進去，Gutenberg，Gutenberg 插件，所有這些未來開發的全站編輯都在這裡完成，實際上最近引入了一個名為 Patterns 的新文件夾。 所以你實際上可以把你的模式文件放在 Pattern 文件夾中，WordPress 會為你註冊它們。 只是先睹為快。 我強烈建議您查看 Gutenberg 和所有新功能。

但回到這裡的幻燈片。 我們有模板和模板部件。 您可以看到每個文件的單獨 HTML 文件。 現在，為了進一步了解它是如何工作的，我們將看一下 404.HTML 文件。 這是您站點中的文件或頁面，您永遠無法直接編輯，除非您深入研究代碼或使用允許您編輯此模板的第三方資源。

所以回到站點編輯器，我們可以看到我們的 404 頁面就在這裡。 如果我們點擊它，用戶現在可以編輯該模板的不同組件。 但是，讓我們看一下構成此模板的實際 HTML 代碼，即主題中實際的代碼。

所以在這裡，我們可以看到我們有 404.HTML 文件，它有一堆標記。 從頂部和底部開始，我們看到我們有模板零件塊的規範。 它正在做的是引用我們註冊的模板部分並將它們拉入模板。 所以如果我們跳回到這裡，我們可以看到我們有一個 footer.HTML 部分和一個 header.HTML 部分。 這就是這裡所引用的內容。

所以這是一個獨特的塊，允許您拉入由其他塊組成的模板。 現在，當然，您可以只包含構成頁眉的所有塊和構成頁腳的所有塊，但是通過引用模板部分，您可以在一個地方完成所有操作，然後應用相同的模板部分跨所有模板，類似於您在使用 PHP 的傳統 WordPress 中執行的操作。

現在，當我們進一步看時，我們有一些標記，只是一些主要標記，然後我們有一個 div。 我不打算深入探討這個問題。 這裡發生了一些有趣的事情，即這裡的佈局，是的，它正在做一些佈局設置，但這只是頁面的一般標記，即 404 模式。

現在，我提到了模式。 這個主題中的 404 實際上被捆綁成一個模式。 所以組成404內容的所有塊都處於一個模式中。 然後我們有一個模式塊，它實際上引用該模式，然後拉入這些塊。 現在，當然，您可以再次在此處包含構成 404 頁面的所有塊，但是通過將它們放入一個模式然後引用它們，它只會讓管理變得更容易一些。

因此，當我們返回站點編輯器時，我們已經有了我們的內容，並且可以看到不同的部分。 所以頂部是被拉入的標題模板部分。然後，很明顯，主要部分是被拉入的 404 模式。現在，因為這些都是塊，我們需要做的就是像往常一樣編輯它們. 我們可以把它加粗。 我們可以改變顏色。 我們可以刪除塊、添加塊——等等。

非常簡單，我們根本不需要編輯任何代碼。 我們需要了解代碼是如何工作的，但我們不需要接觸任何代碼。 然後當我們滿意時，我們只需單擊“保存”。 同樣，這些更改會保存到數據庫中，因此您實際上並沒有修改主題文件。 因此，如果我們要恢復更改，我們將回到主題提供的任何內容。

站點編輯器的一大優點——同樣，它仍在開發中——是您可以添加新的模板部分。 同樣，這個主題添加了一堆不同的頁眉和頁腳，但是如果我們想添加更多呢？ 也許我們想要一個側邊欄。 也許我們想要不同的內容部分。 我們可以直接在站點編輯器中執行此操作。

再一次，這個流程將得到改進——更多的特性，更多的功能。 但它目前可以正常使用，您可以在此處添加所有內容。 需要注意的一件事是您還不能在站點編輯器中添加模板。 您可以在 WordPress 編輯器的不同界面中使用，但還不能在站點編輯器中使用。 但那將會到來。

所以最後一部分是我們談到了進行所有這些更改。 好吧，如果您可以將所有更改導出為一個實際即將到來的主題，那麼看看這將如何影響主題開發真的很有趣。 因此，使用最新版本的 Gutenberg，您現在可以導出所有更改以及原始主題。

它們被合併，您可以將其導出為全新的主題，並將所有更改應用於主題內的文件。 所以你可以想像 2022 年。你上傳它。 您進行所有更改。 您可以修改一些模板，然後導出完整的主題。 它對未來的主題開發有一些非常有趣的影響。

現在我們需要談談全局設置和样式。 這是 theme.JSON 文件。 這對 WordPress 來說是全新的，既令人興奮又棘手。 因此，如果我們回顧 2022 年的主題，我們可以看到該文件位於頂部。 當我們進入 theme.JSON 文件時，它實際上有五個部分，其中一個只是版本號。

我將簡要介紹自定義模板和模板部件。 因此，如果您有一個自定義模板，一個完全自定義的模板，WordPress 自然無法識別的模板，您可以在這裡註冊。 這也是您註冊所有這些模板部分（如頁眉和頁腳）的地方。 任何傳統模板，如 Index、Page、Post——那些 WordPress 普遍認可的模板——你不需要放在這裡，只需自定義的，當然還有你自己的模板部分。

但是 theme.JSON 的核心是您的設置和样式部分。 因此，如果我們首先查看設置，這裡會發生很多事情。 再一次，這是非常刪節的。 但頂部是全局設置。 這些設置會影響站點編輯器和整個站點的編輯器。 這些包括邊框、顏色和排版等內容。 您可以在此處設置主題的調色板、主題的排版設置、字體等等。

然後我們還有塊級設置，例如，您可以在其中為整個站點設置一個調色板，然後設置一個較小的調色板，以及完全不同的調色板，例如，為段落塊或按鈕塊。 因此它提供了巨大的靈活性，但設置是用戶在編輯器或塊中可以使用的功能。

因此，如果我們再次查看顏色，我們已經在此處定義了調色板。 我們有前景色、背景色，然後是原色、黑色、白色和一種森林綠色。 然後如果我們進入編輯器，我們可以看到當我們的顏色選擇器彈出時，我們已經定義了這些顏色供用戶選擇。

現在，讓我們進入風格。 所以樣式基本上就像你的 CSS。 所以傳統上，您會將所有 CSS 添加到 styles.CSS 文件或其他設置中。 但是 theme.JSON 的樣式部分允許您在塊級別以及整個主題中的全局級別設置樣式。 將這些視為默認設置，對吧，因為編輯器——重點是用戶可以進入那裡並開始修改和進行更改，並按照他們喜歡使用塊的方式設計他們的網站。

但是需要有一個默認值，這些在 theme.JSON 的樣式部分中設置是默認值。 再說一次，我們有全局樣式，有點像我們的全局顏色、全局排版，然後我們還可以在塊級別設置樣式。 所以關於全局樣式的事情就是我們設置主題背景顏色的地方。 在這裡我們可以設置標題的字體大小、鏈接、文本和標題的不同排版選項，以及所有類似的東西。 在塊級別，我們可以做同樣的事情，但專門針對塊。

現在，我們剛剛談到的關於設置部分的巧妙之處之一是，每當您創建設置時，WordPress 都會定義一個變量。 因此，當我們查看該調色板時，我們定義了背景、前景和主要顏色。 WordPress 實際上將生成一個映射到該十六進制代碼的變量，無論為主要、前景、背景設置的十六進制代碼是什麼。

在樣式中，我們可以使用這些變量來定義全局樣式和塊級樣式。 這樣做的好處是，如果用戶曾經更改過任何背景顏色，那麼它將流過 theme.JSON 中的樣式規範。 現在，如果我們看一下塊部分，這裡有我們的按鈕塊，我們從主題設計師那裡得到了它。

我希望我的按鈕具有默認的綠色和一些白色文本。 您可以看到，在按鈕塊的顏色部分，我們將背景色定義為原色，即森林綠，而我們的文本是背景色，即白色。 所以我們可以在整個 theme.JSON 中使用這些變量來為我們的塊和站點本身定義樣式。

現在，這與我之前提到的全局樣式有關。 所以回到站點編輯器，如果我們點擊頂部的這個雙音小圓圈，我們將打開我們的全局樣式面板。 現在，這裡發生了很多事情，所以我將快速演示一下它是如何工作的。 但請注意，我鼓勵您下載 2022 主題或其他塊主題並真正探索全球風格。

如果我們跳到這裡查看顏色，單擊它，現在我們可以看到調色板在那裡，主題提供的調色板，以及一些不同的元素，例如我們的背景、文本和鏈接. 現在，在我們正在查看的這個面板上，我們正​​在編輯站點的全局元素。 例如，我們談到了網站的背景。 現在，它是白色的。 所以如果我點擊背景，我可以進入這裡，我可以看到它被選為白色。 這是我們在 theme.JSON 中設置的顏色。

但是，如果我真的喜歡這種桃色怎麼辦？ 好吧，只需單擊一下，我就可以單擊，然後就可以了。 我們網站的背景顏色現在是桃色。 因此，這為用戶提供了前所未有的控制權，可以完全修改他們的網站以滿足他們的需要。 但同樣，theme.JSON 提供默認設置，作為主題開發人員，您提供用戶，然後他們可以從那裡獲取它。

所以這是對全站點編輯以及站點編輯器和塊主題的非常簡短的概述。 但我想花點時間談談我對現代主題的未來的看法。 因此，當我們考慮現代主題時，我相信現代主題將強調設計而不是開發。 現在，您可能會想，嗯，設計主題總是關於設計的。

但是如果你回想一下傳統的主題開發，就會發現有很多實際的編碼需要完成。 所有模板文件都是 PHP，這需要大量的 WordPress 知識以及 PHP 開發才能正確完成。 好吧，這有點改變。 我們看到，現在有了編輯器，您可以直接在站點編輯器和傳統編輯器的 UI 中設計主題。

這將成為我們設計主題的主要方式。 所以我是 WP Engine 的開發者倡導者，在我們的團隊中，我們正在構建一個名為 Frost 的實驗性主題。 當我們製作新圖案或想要修改模板時，我們不會進入文件並調整文件。 我們將進入站點編輯器或進入編輯器並修改該模式，或構建模式或構建模板。 然後我們對它感到滿意，然後我們將其導出，然後將其放入主題中。

所以我們實際上並沒有編碼。 我們實際上是在視覺上做所有事情。 這樣做的好處是我們知道用戶，將要使用主題的人，他們也將在那裡調整模式或調整模板。 因此，在構建主題時，我們正在執行與用戶使用主題相同的過程，我認為這有點神奇。

這將導致主題開發的低代碼甚至無代碼方法。 現在，當然，我們正在參加開發者大會，對吧？ 所以我們談論的是無代碼和低代碼。 但我的最後一點是，我們將討論我認為發展的方向。 但我認為這真的很令人興奮，因為這將帶來新一代用戶，他們想要構建自己的主題，定制自己的主題，但他們可能不知道 PHP，也許他們不知道 JavaScript .

他們現在可以在站點編輯器中完成這一切，我認為這是 WordPress 的精神，使出版民主化。 而且我認為全站點編輯確實在朝著這個方向努力。 在過去兩年或去年，坦率地說，我們已經看到了全站點編輯的這種進步。 它變得非常令人興奮。 所以我堅信全站編輯是傳統 WordPress 的未來。

現在，它可能並不適合所有人。 我想說得很清楚。 而且仍然需要很多發展。 因此，當我們談論使用 WordPress 的不同類型的人時，我們涵蓋了從標準用戶到代理機構的所有內容。 代理機構可能希望為其客戶提供一個非常乾淨、非常結構化的界面，以便在他們的網站上使用和工作。 這可能不是全站編輯。 我覺得沒關係。

但正如我們在經濟中看到的那樣，我們有 Squarespace、Wix、Element 或其他頁面構建器。 網絡社區中有大量用戶需要一種工具來允許他們並授權他們編輯和設計自己的網站。 而且我認為 WordPress 確實缺乏 WordPress，尤其是 Core。 我認為這是全站編輯的目標，也是全站編輯的承諾。

有很多事情要做。 還有很多事情要做。 還有很多事情我們需要弄清楚，比如響應式控件以及我們如何限制 UI 的不同組件，以便某些用戶不會搞亂設計或修改他們不應該修改的東西。 所以還有很多事情要弄清楚。

但我認為真正令人興奮的領域之一是開發全站點編輯。 現在我們有了這個允許用戶設計自己的主題或設計自己的網站的工具，我們需要開始考慮如何將其提升到一個新的水平。 作為開發人員，我們如何在此基礎上進行構建？ 如果我們回想傳統的 WordPress，請使用小部件屏幕——一般來說是小部件。 WordPress 提供了非常基礎的小部件和功能，開發人員開始構建各種擴展。

我認為同樣的想法需要應用於全站點編輯。 現在，很少有（如果有的話）擴展和插件能夠真正利用完整的站點編輯並將其提升到一個新的水平。 WordPress 將繼續迭代全站點編輯，它會達到一定程度。 但它永遠不會做每個人想要的一切，我認為現在是時候認真對待全站點編輯並開始思考我們作為開發人員可以在此基礎上構建並真正將這種體驗帶到下一個的方式等級。

所以我挑戰大家走出去，探索古騰堡，試用 2022 主題，並安裝它，開始學習區塊開發。 利基塊有令人難以置信的機會。 並嘗試構建自己的主題。 嘗試使用 2022。嘗試修改它。 嘗試構建您的基本主題。 這真的很有趣，而且這些東西有很大的潛力。

所以我想就此打住，感謝大家的出席。 在我走之前，我想談談一些我認為非常重要的資源，尤其是在這個演示文稿中，如果你是全站點編輯的新手並且你想了解更多。 再說一次，你當然可以跟我來。 我一直在發推文。

但是有一些資源。 所以第一個是弗羅斯特。 我之前提到過這一點。 所以這是 WP Engine 開發人員關係正在構建的主題。 而且是實驗品。 我不應該說產品。 這是一個實驗，我們試圖用它來教育社區如何構建塊主題。 我們一路學習。 在此過程中，我們進行了大量更改和更新，試圖與 WordPress 保持同步，但它是一個很好的資源。 同樣，2022 年的主題——一個開始和學習的好地方。

接下來，我要插件 Learn WordPress。 這是 learn.wordpress.org。 wordpress.org 的培訓團隊正在做大量工作來嘗試教育並將這些概念帶給公眾。 因此，如果您有興趣並想了解更多信息，這是一個很棒的地方。 我們在那裡有研討會和各種不同的內容，包括社交學習空間。 這些每週舉行一次，我們討論不同的主題，深入探討如何編寫塊代碼以及如何構建塊主題等等。

然後，當然，如果您對開發感興趣，請始終從塊編輯器手冊開始。 這就是我開始的地方，而且有很多很棒的資源。 最後，古騰堡。 如果您不熟悉 Gutenberg，我鼓勵您熟悉 Gutenberg，尤其是如果您對 WordPress 開發感興趣的話。 這是一個深入研究、探索如何構建全站點編輯、如何構建不同塊以及如何將其應用到您自己的工作流程的好地方。

非常感謝您的出席。 我希望您能從本次演示中學到很多，並鼓勵您繼續探索全站點編輯。 非常感謝。