DE{CODE}：前端：構建面向未來的電子商務網站

默認的 WordPress 塊編輯器標準化了我們集成佈局和主題的方式，並在您的網站前端解鎖了新功能。 這使得維護、更改和更新站點變得更加容易，同時減少膨脹、更便攜和加載速度更快。 但是 Block Editor 是否適合您的代理機構和您的電子商務網站？ 什麼時候是採取行動的合適時機？ 在這個內容豐富的 DE{CODE} 會議中聽取 WP Engine 首席軟件工程師 Mike McAlister 的講話，找出答案！

會議幻燈片

全文抄本

邁克·麥卡利斯特：大家好。 我叫 Mike McAlister，是 WP Engine 的首席軟件工程師。 我在 Team Genesis 工作，我們的任務是構建 WordPress 的未來，並致力於研究 WordPress 的所有前沿技術。 你可以在所有平台上找到我@MikeMcAlister。 是的，關注我了解更多此類內容。

正如您所見，今天的話題是關於構建面向未來的電子商務網站。 我們有點處在 WordPress 的新懸崖上。 每天都在展示新的範例。 很難駕馭它。 這就是我們今天要看的，在 WordPress 新時代前進的利弊。

所以正如我之前所說，我已經這樣做了很長時間。 我以 WordPress 為生。 十多年來，我一直在構建 WordPress 產品、WordPress 業務、最前沿的東西和各種各樣的東西。 我有一段時間的主題業務稱為 Array Themes，這是一個漂亮的 WordPress 主題小集合，供設計師、攝影師、作品集等使用。

然後我開始嘗試使用 WordPress 塊編輯器。 這就是 Atomic Blocks 的由來。 這真的是同類插件中的第一個，有點像塊編輯器的入門。 我用它來幫助向其他人展示如何學習積木和什麼是可能的，以及你需要這樣做的代碼種類。 所以那真是一次大開眼界的經歷。

然後當我加入 WP Engine 時，我開始研究 Genesis 產品套件，我們將 Atomic Blocks 和 Array Themes 中的很多塊技術帶入了 Genesis 框架。 因此，它為 Genesis Pro 的新一代主題構建提供了動力。 我還通過我的 Liftoff 課程幫助教授 WordPress 創作者如何將這些主題和插件轉化為產品和產品業務。

這就是關於我的一點。 在我們開始之前，讓我們快速回顧一下，對吧，因為你聽說過塊編輯器，你可能會使用它，但有些人還沒有機會深入研究，或者可能沒有不確定它的全部功能。 所以塊編輯器，你可能還記得，大約三年前，也許更久，被引入了 WordPress。

這可能是 WordPress 有史以來最大的變化。 這是巨大的。 它把我們從遍布 WordPress 的許多不同的元框和那種每個人都習慣的陳舊佈局轉變為一種更生動的主動內容構建體驗，現在我們正在用小塊構建我們的網站內容和按鈕和圖像。 這些東西都很容易移動到不同的佈局中。 這只是一種更強大的設計體驗。

但這只是等式的一部分，對吧？ 這就像能夠構建內容區域是一回事。 一段時間以來，在某種程度上，我們已經能夠使用短代碼來做到這一點。 但是現在我們有了塊編輯器。 但完整的願景是能夠使用塊和模式以及所有這些新工具來構建您的完整網站。

其中的一部分最近在 WordPress 的過去幾個版本中發布了，但今年夏天，我們將獲得更全面的塊站點編輯體驗。 所以我今天想談談其中的一些，因為，再次，有了塊的範例，現在我們將擁有這個令人難以置信的新範例和完整的網站編輯。 我真的希望你開始使用它，因為它是如此強大和令人興奮。 這對每個人來說都是巨大的。

所以我一直都有這個問題，什麼時候進入塊編輯器是合適的，對吧？ 人們猶豫不決。 他們不太確定。 我會說大約兩年前是最好的時間，但你知道，現在也是一個不錯的時間。 有了開源和這類社區項目，人們越早開始採用它們，它們就會變得越好，對吧？

我們越早開始使用它來構建並暴露問題、不足和陷阱，我們越早解決這些問題，它就會變得越強大。 所以我提倡儘早進入並構建那種東西。 這就是為什麼我很早就開始使用 Atomic Blocks 的原因。 它可能是第一個塊插件。 但我們都從那次經歷中學到了很多東西。 所以還有時間繼續進行塊編輯器和完整的站點編輯。 我們會在這裡看到原因。

所以，我總是聽到這些東西，塊編輯器的感覺，它很昂貴。 如果你是一個機構，我知道它的成本是多少。 我過去曾與代理機構合作過，改變工作流程的成本很高。 您已經把東西整理得井井有條，要將其換成全新的解決方案，成本很高。 有時我們沒有時間在經濟上進行這種轉變。

我也聽說它不穩定。 人們說，好吧，它還沒有完全完成。 它準備好生產了嗎？ 我們做了很多電子商務的事情，而且錢都在網上，所以我們真的不能承受事情的失敗。 我明白了。 然後另一件大事是 JavaScript。 我們從 PHP 框架發展到現在 WordPress 中有一個巨大的 JavaScript 引擎。 因此，這又是代價高昂的，因為現在你必須學習 JavaScript，你必須培訓你的開發人員。 這也是耗費時間和金錢的。

但這些事情的現實是，它實際上是完全不同的。 當然，它很昂貴，但隨著時間的推移它只會變得更加昂貴。 你拖延的時間越長，你就越依賴於以舊方式做事的解決方案，過渡就會變得更加困難，並且從這些第三方插件中過渡出來可能對您沒有任何好處，我們將在談論性能時探討這一點。

另外，不管它是否穩定，它現在實際上是相當穩定的。 我們有一個強大的構建塊 API。 很多財富 500 強公司、機構，還有很多知名人士使用完整的網站編輯內容構建並投入生產。 所以它就在那裡。 再一次，我們將談論進入那裡並親自弄清楚它有多強大。

然後是 JavaScript，如果你是一名開發人員，我假設你們中的很多人都是，你就會知道 JavaScript 現在比以往任何時候都更強大。 現在的 WordPress 也是如此。 實際上，借助 JavaScript 引擎和 WordPress 的強大功能，這為您打開了很多機會。

它可以被看作是一個積極的因素，因為所有的功能，而且你現在可以接觸到一個你以前可能無法接觸到的新的開發者群體。 JavaScript 社區中的很多人以前可能忽略了 WordPress。 那麼現在，你猜怎麼著？ 我的意思是，這對很多人來說是一個巨大的工作機會。 所以我認為在這裡使用 JavaScript 也有很多優點。

綜上所述，您知道，WordPress，它哪兒也去不了。 我的意思是，它正在大規模增長。 它幾乎佔 45%，為 45% 的互聯網提供支持。 而且每年都還在非常健康地生長。 它每年增長約 Shopify 市場規模。 作為參考，那是相當大的。

就像我之前說的，我們拖延的時間越長，採用一些新技術並弄清楚它如何適應我們的工作流程或我們的代理機構或我們的自由職業者，就會越痛苦。 你最終會想要過渡，只是因為它會非常強大，如果不這樣做，你會錯過很多東西。 所以我說現在投資。 為自己的長期增長、電子商務的長期增長做好準備。 是的，轉到塊編輯器。

有很多理由採用這項新技術——更多的控制、更好的性能和節省資金。 我不知道有哪個自由職業者或機構會對這些事情不感興趣。 這是發展業務的基石，對吧？ 因此，讓我們跳入其中的一些。

是的，如果您只知道塊編輯器的強大功能。 這是我認為人們有點明白的事情。 就像它是新的，它更強大或其他什麼。 但這是其中一件事，就像你真的必須進入那裡，從發展的角度理解什麼是可能的，你可以利用的東西，你現在可以做的事情，你以前永遠做不到。 這是我們在 WordPress 中一直想要的東西，但還沒有機會擁有。 所以我們在這裡，就像一個絕佳的機會。

控制。 這是很多機構需要的東西，對吧？ 當您的客戶有特定需求、品牌需求，或者您需要設置防護欄時，控制並能夠對整個事情進行真正微調、精細的控制是最重要的。 因此，對於開發人員來說，當涉及到代碼庫時，現在您在 WordPress 中擁有一個 JavaScript 驅動的引擎，因此有更多的選擇。

無頭是另一件正在變得巨大的事情。 由於能夠將您的內容和表示層分開，WordPress 現在為您提供了這些機會。 事實上，WP Engine 正在開發 Atlas，這是他們的 Headless WordPress 解決方案。 如果你還沒有檢查出來，你應該。 太酷了。 這又像是開發人員夢寐以求的事情，能夠將 WordPress 用於此類事情。

同樣，對於開發人員，您可以選擇自己的 JavaScript 語言。 儘管塊是用 React 編寫的，但您可以編寫 Vue，也可以編寫 Angular。 如果你願意，你可以寫 Vanilla。 這真的取決於你，因為它都被編譯並發布了，最後這並不重要。 除此之外，您還可以使用相同的 JavaScript 工作流程。 您可以使用以前沒有的集成 CI/CD 東西，自動化構建工具。 通過在 WordPress 中利用這個新的 JavaScript 未來，所有這一切都是可能的。

再一次，我提到了這一點，之前提到過這一點，但那裡的 JavaScript 開發人員數量龐大。 這是巨大的。 因此，我們越早開始採用其中一些技術並將這些人帶入 WordPress 領域，生態系統就會變得越強大，解決方案、產品和插件就變得越有價值。 當我們開始將這些人才引入 WordPress 時，這些事情都會出現。

我在能夠塑造和塑造 WordPress 之前提到過。 這對於能夠創建自定義應用程序，甚至為您的客戶啟動自定義站點來說意義重大。 現在，修改管理員變得容易多了。 假設您想添加一個工具欄來公開您的一些電子商務工具或數據。 現在非常容易。 他們有一些選項可以很容易地插入這些不同的工具欄和整個界面。 令人印象深刻。

同樣，你可以走另一條路。 您可以鎖定 UI。 假設您想更多地控制體驗。 你現在完全可以做到這一點。 由於它由 JavaScript 提供支持，因此您可以更好地控制 UI 交互等。 因此，您可以設置的護欄要好得多，也容易得多。

就體驗而言，我們都遇到過第三方插件更新的情況，它改變了一些東西，突然間你放在這裡的按鈕現在不見了或者不見了。 好吧，通過束縛自己並能夠自己控制體驗，您可以防止這些不幸事件的發生。 您的客戶看不到這些問題的發生，因為您可以更好地控制體驗。

在控制你的命運方面，這是我將不斷回到關於第三方插件的內容。 插件很棒，但它們可能有害，您可能會建立對它們的不健康依賴。 它會在很多方面限制你的成長。 能夠自己直接連接到 WordPress 並擁有這種控制權，並且知道您放入的內容已經過測試和維護，並且可以隨時更新，這很重要，對吧？ 這比可能依賴第三方進行修復要可靠得多。

最後，便攜性。 這就是一切，對吧？ 我們不能將我們的內容或網站鎖定在專有解決方案中。 這是非常昂貴的，昂貴的。 這很危險。 而我們選擇了WordPress，這樣我們就不會出現那種情況，對吧？ 所以這很重要。

表現。 這是我們一直在處理的事情，但現在它比以往任何時候都更加重要，因為我們無法承受沒有出色表現的後果。 谷歌不會善待我們。 你們以前都看過這句話，頁面加載延遲一秒會導致 7% 的轉化率損失、頁面瀏覽量減少以及客戶滿意度下降。

我不知道這個星球上有誰會對此表示滿意，尤其是在電子商務和您的客戶方面。 因此，如果您有加載無關文件和您甚至不使用的東西的插件，並且它會花費您金錢，那麼您必須非常認真地看待這一點。 您必須採取行動並控制那裡的情況。

再一次，不要誤會我的意思，我喜歡插件。 我一直在使用它們。 但是這些功能強大的插件可以在數百萬個網站上運行。 當您必須製作適用於數百萬網站的插件時，您必須添加對每個人都沒有幫助的東西。 您必須添加額外的腳本和額外的樣式來適應不同的瀏覽器。 通常，這些東西都會為您加載。 很少有微調控制能夠關閉這些東西。 所以你得到了整個插件的大部分，你不一定需要它。

現在，如果你是一個敏銳的開發人員，你可以進入那裡並解開一些東西以加快速度，但我仍然認為在這一點上你可以花時間自己寫一些東西，尤其是隨著新的人才庫來到 WordPress，控制那裡。 您可以更精細地控制構建。 你可以做 tree shaking、minifying，所有這些現在都是可能的。

所以我認為我們越早考慮我們希望與第三方插件建立什麼樣的關係，特別是在頁面構建器方面，你知道，既然我們要模式和所有這些很棒的東西工具，您不一定需要頁面構建器。 而且這些插件中有很多並沒有真正計劃過渡到塊編輯器。 所以你必須做出決定。 你知道嗎，你是選擇這個可能幫助你現在構建的插件，還是開始採用 WordPress，它會讓你面向未來，為你提供你需要的工具和你需要的控制？ 所以那裡有一些重大決定。 我完全明白了。

在頁面性能和 SEO 方面，我們都知道頁面速度和 Core Web Vitals，它們現在變得非常重要。 這是我們追求的範例。 你想要那些綠色圓圈。 再次，使用這些 WordPress 插件中的一些可能很難達到這些效果，因為它們正在加載各種資產。 除非你進入那裡並且你真的在微調和解開東西，否則你將要處理這個問題。

WordPress 有了新一波的開發人員，我們都意識到我們需要的東西是我們以前沒有的，比如能夠說你有一個頁面，上面有一堆塊。 好吧，您不一定要為所有塊加載整個腳本和样式。 您只想獲取頁面上加載的樣式。 對不起，您頁面上加載的塊。 好吧，現在我們有函數可以做到這一點。

你可以在底部看到這個 Should Load Separate Core Block Assets 函數。 好吧，這只會掃描您的頁面，查看您的頁面上有哪些塊，並且只會吐出那些樣式和腳本。 所以你可以看到我們正在朝著更多的方向發展，比如，性能微小的文件未來，我們只加載我們需要的東西。 這會變得更好。 同樣，一旦我們進入那裡並開始構建，WordPress 本身就會越早採用這些功能，我們就會將它們作為核心。 然後我們不必有插件，因為核心已經採用了它們。

很多人都在研究這種表演工作。 你可以在這裡看到我有一個列表。 這只是從事這項偉大工作的一小部分人。 跟著他們。 關注他們關注的人。 注意他們的轉發，因為進入這個 WordPress 時代有很多腦力，每天都有很多聰明人想出聰明的解決方案。 所以，是的，跟隨其中一些人。

最後，我想談談通過這項技術節省和賺錢的問題，因為我們再次談論長期增長，以及與 WordPress 一起增長的長期機會。 並且有很多利用這種技術創收的新機會，你可以想出各種提供新服務和新產品的方式。 我們也會稍微討論一下。

當談到頁面設計和頁面構建器插件以及類似的東西時，我提到現在我們可以用模式替換它們。 好吧，模式基本上就是頁面佈局，WordPress 正在實施的頁面佈局部分，因此您可以構建漂亮的頁面。 好吧，能夠使用模式作為每個項目的起點，這樣你就可以構建一個模式集合，你可以為每個客戶項目使用這些模式，然後你可以為客戶定制它們，你可以創建一個完整的入門模式庫您可以將其用於每個項目，因此您不必每次都重新發明輪子。 你在節省時間。 你在存那筆錢。

另一項新技術是 theme.JSON。 這幾乎就像是一種全球性的網站樣式設置方式，這是我們以前沒有的。 因此，能夠加載您的模式，然後對您的按鈕或鏈接或標題顏色的樣式進行全局更改，以真正根據您的客戶需求或您的品牌進行微調，這些都是可以的如您所知，之前花了很多時間在編輯器和定制器之間來回穿梭，並試圖把事情做好。

然後，當您移動站點時，您必須再次執行此操作，因為 WordPress 不一定會記住這些東西。 這些現在都可以節省大量時間和金錢。 所以你越早採用這些東西，比如 theme.JSON、全局樣式，很快就會有排版控制，你就越早開始省錢和賺錢。

削減你的插件是我一直在談論的事情，但我認為我們越早開始查看可能並質疑我們在網站上安裝的東西，我們是否需要那些，你可能不需要緩存插件了。 有很多主機在他們的級別上實現了緩存。 而且，如果您能夠發布精簡資源和更小的構建，那麼我們可能已經達到了可能不需要大型緩存插件的地步。

正如我提到的，其中一些頁面構建器也是如此。 我們現在可以將頁面構建體驗卸載到 WordPress 嗎？ 我們可以開始使用帶有 theme.JSON 文件的模式並構建我們自己的設計集嗎？ 我想我們可以。 我想我們快到了。 這並不是說某些項目或類似項目的頁面構建器沒有用例。 我認為有。

但同樣，我認為當我們談論長期增長、WordPress 的未來、您的業務和 WordPress 的未來時，我看到了一個更簡單的未來，一個您可以更好地控制的未來。 我認為我們現在看到了它的開始。 當然，目前很難看到，但這就是我們所處的位置。 所以，是的，這是您創建您想要的、您需要的、屬於您的、為您量身定制的工具集的機會。 它會幫助你移動得更快，更快。

最後，這是我也一直在寫的很多東西。 你知道，正如你所知，WordPress 正在經歷這一轉變。 隨之而來的是對新解決方案的需求，對吧？ 即使是最常見的插件，比如每個網站上都有的表單插件，好吧，現在我們需要它的塊版本。

我們需要更好的 JavaScript 支持的版本，我們可以在編輯器中自定義和更改。 市場一直很緩慢地趕上了這一點。 我不知道是因為缺乏 JavaScript 開發人員，還是——有很多原因，但關鍵是市場現在非常開放。 所以以前的插件就像過去 10 年的頂級插件一樣，您可以將您為客戶和站點所做的這些事情變成產品。

事實上，我已經看到它已經完成了。 我開始使用 Atomic Blocks 來做到這一點。 我想替換短代碼之類的東西，並開始製作積木來做到這一點。 僅僅因為它是為數不多的這樣做的人之一，它很快就變得非常流行。 因此，有很多機會可以通過貨幣化和找出新的利基市場進行挖掘。

大家知道，尤其是電子商務，有很多難題需要解決。 而客戶，他們為這些東西支付了額外費用，因為我們正在解決他們無法自己解決的真正棘手的問題，尤其是節省時間和金錢的解決方案。 所以我無法充分說明 WordPress 現在有多少機會。 前所未有的是，市場已經準備好迎接這些新的解決方案，這些新的更直觀、更好的 UI 和更緊湊的構建。

客戶已經為這些東西做好了準備，他們會為此付錢。 是的，再一次，在這裡，從來沒有比現在更多的機會，特別是對於電子商務的東西。 我看到越來越多的人在尋找解決方案。 最擅長的人應該為塊編輯器製作這些東西。 我們需要釋放長期增長，這是實現這一目標的一種方式，將您的工作轉化為產品。

好的，綜上所述，從哪裡開始呢？ 開始學習這些東西是一項艱鉅的任務。 我的工作方式以及我認為很多人可能的工作方式是，通過構建一些東西更容易學習。 因此，無論是構建新事物還是採用您過去構建的事物之一，客戶項目或您自己的個人網站，請嘗試採用它，如果它是通過頁面構建插件或其他方式完成的，請嘗試接受它並在塊編輯器中構建它。

我的意思是，沒有任何藉口，只是進入那裡並開始使用它。 製作你的第一個積木。 將標題或功能部分變成一種模式。 弄清楚設置側邊欄與內容區域和塊之間的關係以及綁定設置的不同方式。 這裡有各種各樣的探索途徑。 修改用戶界面，進入並向其中一個工具欄添加自定義按鈕。 將它與您的一個塊中的某些設置相關聯。

這些都是現在很容易做到的事情。 我在這裡提供了一些鏈接。 有指向文檔的鏈接，塊編輯器文檔。 但還有一個存儲庫，即 WordPress GitHub——對不起，Gutenberg 存儲庫，他們在其中提供了構建特定內容的示例。 所以他們可能會說這就是你構建區塊的方式。 下面介紹如何通過 API 提取數據。 他們在為開發人員提供非常詳細的示例方面做得非常好。

然後一旦你構建了它，就完成啟動它的過程，或者甚至模擬啟動它，因為在你構建了一些東西之後你會發現一些東西，這是一回事。 但是有點讓它上線並經歷將它放在生產服務器上並設置您的站點以啟動它的過程，我們都知道在那一小段時間裡也會彈出一些東西，對嗎？ 因此，請完成啟動它的過程。 做記錄。

然後我想那時候我開始意識到這件事已經準備好了，對吧？ 這東西很給力這東西準備好了。 同樣，它肯定會有一些怪癖，就像有任何軟件一樣。 而且我們在開源社區中，所以關於它的美妙之處在於您可以回饋您發現的東西和發現的小怪癖。

您可以簡單地報告它，這將引起別人的注意並修復它，或者您可以修復它並提供修復。 希望它能被合併。所以回到我之前所說的，我的意思是，無論你現在還是以後採用它，都取決於它的穩定性，你越早開始使用它，它就會變得越穩定，並且報告這件事。 我認為這是整個事情中非常有價值的部分，我們有這個機會，而且在很大程度上由我們控制讓它變得更好。 所以我希望你這樣做。

所以無論如何，是的，從哪裡開始？ 從這裡開始。 開始建造一些東西。 進到那裡去。 做幾個積木。 我想你會看到的。

就是這樣。 你知道，再一次，我只想鼓勵你走出去，做點什麼。 看看所有的機會。 並與我分享。 按我的方式發送。 在 Twitter @MikeMcAlister 上找到我，向我展示您構建的內容或向我提出任何問題。 好的，非常感謝您的寶貴時間。