DE{CODE}：2022 年——WordPress 開發者之年

現在是專注於 WordPress 開發的最佳時機。 WordPress 作為世界上最受歡迎的內容管理系統 (CMS)，甚至是最流行的無頭 CMS，繼續吞噬互聯網。 在 DE{CODE} 2022 的主題演講中，WP Engine 創始人兼首席創新官 Jason Cohen 討論了 WordPress 開發人員面臨的挑戰和機遇，以及 WP Engine 正在致力於讓他們的生活更輕鬆的項目。

查看下面的完整視頻！

會議幻燈片：

全文抄本

JASON COHEN ：大家好，歡迎來到 DE{CODE}，這是 WP Engine 的年度會議，我們在這裡慶祝 WordPress 開發人員。 我叫 Jason Cohen，是 WP Engine 的創始人。 我想以一種信念開始今年的 DE{CODE}，那就是 2022 年是 WordPress 開發者之年。 我將解釋為什麼我相信今年對我們所有人來說都充滿希望和機會，然後我想談談如何在這個市場上加速你的職業生涯。

因此，讓我從一個問題開始，每個軟件開發人員社區都以某些東西而聞名，那麼 WordPress 開發人員以什麼而聞名？ 我想說 WordPress 開發人員以製作出版商喜愛的精美網站而聞名。 所以這就是我的意思，我們都知道有數以百萬計的網站使用 WordPress，但你也有像 Under Armour 這樣的人，這是一個使用 WordPress 並僱用 WordPress 開發人員的跨國服裝品牌。

現在 Under Armour 去年的銷售額達到了 50 億美元，所以他們使用 WordPress 並不是因為它是免費的。 他們有能力購買他們想要的任何軟件。 他們使用 WordPress 是因為它滿足他們的要求，他們僱用 WordPress 開發人員是因為您知道如何滿足這些要求並製作美觀、易於更新的網站。 像這個。

或者國家地理，它是世界上最受尊敬的媒體品牌之一，國家地理需要美觀、易於更新的網站，以及能夠處理豐富媒體體驗的複雜數字資產管理。 所以他們當然會聘請 WordPress 開發人員。 那是您著名的用例。 那技術呢？ 現代科技公司會使用 WordPress 嗎？

是的，Dropbox 的團隊可以根據需要從頭開始構建 CMS，或者他們可以使用任何一直出現的 Site Builder 技術。 但是 Dropbox 選擇與 WordPress 和 WordPress 開發人員合作來處理他們網站中需要吸引人且易於發布的部分。 營銷團隊想要使用與 WordPress 不同的前端技術的用例呢？

所以他們想在 CMS 上使用 WordPress，但在前端使用不同的東西，他們還能使用 WordPress 嗎？ 當然，這就是無頭 WordPress。 所以他們可以像 Android Authority 那樣做出選擇，選擇無頭 WordPress。 所以 Android Authority 仍然使用 WordPress 作為 CMS 來管理作者、內容、媒體以及管理網站後端所需的所有東西，但前端由不同的框架處理。

當一個品牌想要無頭的方法時，比如 Android 權威，他們仍然會打電話給 WordPress 開發人員，因為他們想要一個分離網站的性能和安全性，當然，但他們需要該網站來匹配他們的發布工作流程和他們的所有其他事情在過去的近 20 年裡，我們一直期望 WordPress 一直在為他們的網站提供支持。 WordPress 開發人員知道如何做到這一點。

讓出版商高興是 WordPress 開發人員享有盛譽的做法，甚至 WordPress 的競爭對手也知道這一點。 一些最受關注的初創公司和網絡開發人員一直在談論 WordPress。 當您瀏覽他們的網站時，您看到的一個共同點是總有一個頁面向 WordPress 開發人員推銷。 無論您在哪裡看，每個人都對 WordPress 開發人員感興趣。

這就是為什麼我說 2022 年是 WordPress 開發人員的一年，因為您已經掌握了每個發布者的需求，而且這些需求沒有改變，只是加速了。 就像，每個發布商都需要來自搜索引擎（如 Google）的自然流量，他們當然需要，而且人們一直在談論如何做到這一點。 那是新的嗎？ 不，顯然不是。 基本上相同的文章已經發布了很多年，而 WordPress 開發人員是這方面的專家。

A/B測試怎麼樣？ 或者更好的是，沒有代碼 A/B 測試？ 太棒了。 這很創新，對吧？ 現在你將不得不爭先恐後地學習這些新工具。 好吧，除非你不這樣做，因為你已經這樣做多年了。 就像，這個想法在八年前也獲得了風險投資資金。 就像，這裡沒有變化。 仍然沒有代碼 A/B 測試，你已經知道如何做所有這些。 你已經是這一切的專家了。 那很好。

你們中的許多人還知道 Google 搜索最近發生的變化，使用頁面體驗作為排名因素。 頁面體驗意味著諸如頁面速度之類的東西，您可能還知道這是 Core Web Vitals 更新。 谷歌以前是否做過這樣的更改，您不得不對此做出反應？ 好吧，是的，實際上一直都是，對吧？ 你知道該怎麼做。

是的，這是一個新工具，但是讓網站變快，這很重要並不是什麼新鮮事，谷歌長期以來一直將頁面速度作為排名因素，並且它試圖推斷該網站的訪問者是否會長期滿意. 這些都是你已經精通的東西。所以在某些方面，世界不會改變。 這值得慶祝，因為在以這些方式為出版商提供服務方面，WordPress 開發人員已經走在了前列。 你已經是專家了。

但在 Web 開發的其他方面，我確實看到了真正的變化。 世界瞬息萬變。 這就是為什麼我建議 WordPress 開發人員像架構師一樣思考。 因此，建築師將客戶的要求與藝術相結合。 架構師還將需求和藝術與正確的技術相結合，無論這意味著建築材料還是軟件和基礎設施。

因此，這意味著您需要能夠使用所有可用的技術，這意味著要利用新的創新。 現在這可能會很可怕，因為必須學習新東西可能會造成破壞，但這也是工作的一部分。 當我們決定成為軟件開發人員時，關於軟件的一件事就是它一直在變化。 因此，如果我們要成為優秀的軟件開發人員或優秀的架構師，我們就必須緊跟最新的事物，以便我們為我們擁有的不同工作選擇合適的技術。

所以像 A/B 測試和 SEO 這樣的事情可能變化非常緩慢，從根本上說根本沒有真正改變，但技術在變化，你必須掌握它，這就是我接下來 20 分鐘要討論的內容。 這些東西是什麼？ 那麼，我認為您應該了解甚至採用哪些令人興奮的技術新變化？ 我想讓你瞥見我所看到的我們這個領域有趣變化的溫床。

因此，您應該熟悉的用戶期望的最大轉變稱為自適應數字體驗。 這就像個性化，但更多。 用戶希望網站的外觀和功能能夠適應他們的特定環境和條件，甚至他們的歷史，即使他們沒有登錄。現在，當您提供個性化的自適應數字體驗時，用戶會對他們的網站和事實上，有大量數據表明，當網站具有自適應性時，它們的轉換效果更好，人們在網站上停留的時間更長，他們點擊的鏈接更多等等。

換句話說，作為一家媒體公司，更多的點擊意味著更多的廣告收入。 作為電子商務公司，更多的轉化意味著更多的收入。 作為一家科技公司或任何類型的在線銷售公司，即使不是電子商務，更多的人參與也意味著更多的線索或更多的收入。 因此，在所有情況下，更具適應性的數字體驗，意味著更快樂的客戶，實際上意味著為客戶帶來更多收入。 這就是為什麼它如此重要。

現在對我們來說好消息是網絡的許多進步釋放了提供這些適應性體驗的能力。 所以讓我們解釋一下。 讓我們展示一些例子。 這是如何運作的？ 這是一個真實的例子，一家在線雜誌要求使用 HubSpot 論壇來收集潛在客戶。 為什麼選擇 HubSpot 論壇？ 因此 HubSpot 論壇使用了一種稱為漸進字段的技術。

這意味著在用戶填寫表格後，提供信息可能是為了下載白皮書或以其他方式獲得某些東西，HubSpot 會記住這些信息，以便下次該人想要獲得某些東西時，他們不會再次被要求提供該信息。 這意味著該人更有可能去獲取更多信息，更多地參與該網站而不會被打擾。

這是適應性體驗的一個很好的例子。 但有一個權衡。 使用此第三方腳本（如 HubSpot 論壇和本示例中的其他腳本）會降低網站速度。 事實上，他們的燈塔移動得分僅為 40 分（滿分 100 分），這意味著他們的網站速度很慢，並且意味著他們不會在 SEO 中排名那麼高。 所以你想要這種自適應體驗，但它會導致速度問題。 你怎麼辦？

這就是這種稱為 Partytown 的新技術的用武之地。因此 Partytown 將第三方腳本從瀏覽器的 JavaScript 引擎的主線程中移出，並將其加載到一個單獨的線程中。 因此，這意味著該站點可以更快地進行交互，因此用戶不會被阻止採取行動、進行交互，並且僅通過使用具有相同酷炫自適應功能的 Partytown，燈塔分數就從 40 分提高到 90 分。

所以你可以擁有非常酷但很慢的自適應腳本，並且讓它不慢。 這很酷。 那就是，作為架構師，您應該做的事情才能讓您的客戶網站變得更好。 所以這是一種讓 JavaScript 變快的方法。 另一個重要的表現是媒體，你可能已經知道了，但等等。 因此，任何人，尤其是擁有大量媒體的出版商，都想要漂亮、大而好看的圖像。

但是，如果圖像非常大，那麼它們的下載速度就會很慢，這會降低整個網站的速度，尤其是在手機和移動網絡上。 所以現在有了新的圖像格式，它們看起來和人類一樣，但體積小得多，因此加載速度快得多。 你可能知道其中一些格式，比如你可能聽說過 WebP。 但是你可能不知道 AVIF，AVIF，它比 WebP 還要小，但是肉眼看起來還是一樣的。

因此，只需切換到 AVIF 圖像就可以顯著加快該雜誌網站或任何網站的速度。 有趣的是。 我說，你可能知道這一點。 去年我介紹了 AVIF，當時它剛剛推出幾個月，現在已經一年了，你在使用它嗎？ 不，幾乎沒有人使用它。 據 W3Techs 稱，即使使用 WebP，也只有不到 0.1% 的網站在使用 AVIF，只有不到 4% 的網站在使用它。

因此，從某種意義上說，這些技術已經過時或應該為人所知，但如果您使用它，您仍然處於前沿。 這是加速網站的一種非常簡單的方法，當然，這對用戶和圖像格式的 SEO 都有好處，但人們通常仍然不這樣做。 現在，您可能會發現 WordPress 不支持 AVIF 但它支持 WebP 圖像。

因此，也許 WebP 對您的客戶來說足夠好，使用常規 WordPress，或者這可能是使用無頭 WordPress 的另一個原因，因為這樣自動支持 AVIF 就容易得多。 這取決於您兼顧客戶需求、兼顧技術能力並找出將它們組合在一起的正確方法。 但我認為作為一名架構師，完全忽略這一點並不是一個好的選擇。 我認為您應該在這裡開發一些技術，因為這是幫助您的客戶的一種非常簡單的方法。

那麼讓我們看看前端發生的另一項創新，即台式機和手機上的用戶設置。 現在出現了五年前不存在的這些新的基於 Web 的設置，您客戶網站的訪問者現在希望這些設置得到尊重。 因此，對於像我這樣希望網絡更大一點的人來說，減少運動、字體大小、淺色和深色模式偏好，無論是從一天中的某個時間開始，還是只是用戶在任何時候的偏好，或者可訪問性，確保網站即使對於使用各種方式與網絡交互的人也能正常工作。 也許對於盲人或其他特殊情況有時需要調節。

這對用戶來說很好，我想，但這對您來說是很多工作，因為您必須實施支持所有這些的網站。 這裡還有另一個問題。 當你建立一個自適應的網站時，無論是像這樣的設備功能還是其他東西，取決於用戶的東西，你如何測試它？ 你如何確保它在所有這些不同的情況下都能正常工作？

所以就像我們都習慣的一件事一樣，我想在這一點上，我要拿我的網站，我要測試它的手機大小，然後測試它的 iPad，然後為筆記本電腦測試它，也許再次為超寬屏幕測試，但我已經測試了三四件事。 但是現在——好吧，在每一種情況下，如果字體大小設置得非常大怎麼辦？ 看起來還對嗎？ 你在測試那個嗎？ 淺色模式和深色模式呢？ 這是您必須測試的事物數量的 2 倍。

所以這些東西中的每一個，字體大小，燈光模式，可訪問性，使用不同類型的瀏覽器，所有這些都會增加你必須測試的東西的組合。 所以這有點難。 所以對於某些人來說，這就是他們進行自動化測試的目的。 也許其中一些案例可以通過自動化測試來處理，而不是每次都由人來查看所有內容。

所以這很好，但這不是一個完整的答案，因為自動化測試不會知道暗模式網站是否看起來正常。 這真的是人類必須判斷的事情。 所以這個測試的​​東西仍然是一個謎，我會稍微回到它，因為我將向你展示下一項技術，它在其他方面也有助於解決這個測試難題。

所以接下來我要展示的是一些非常巧妙的東西，我個人非常興奮我們正在使用 CSS 和 HTML，因為我一直希望這樣做。 事實上，我什至親自編寫了代碼來嘗試在 JavaScript 中執行此操作，因為我非常想要它。 現在它原生支持 CSS 和 HTML，這意味著它將隨處可用。 Performant 和所有其他工具都將支持它。 所以我對此感到非常興奮。

那是什麼？ 所以你可能熟悉 CSS 媒體查詢。 因此，這允許您根據整個屏幕的大小提供不同的佈局或外觀。 但是現在自適應佈局有了新的東西，叫做 CSS 容器查詢。 因此，佈局不會因整個屏幕的大小而不同，單個組件可以僅根據其大小或僅根據其周圍的組件以不同方式顯示。

因此，例如，我可能有一個像您在這裡看到的那樣的組件，它有一個更寬的版本和一個更窄的版本。 現在我可能需要手機上的窄版和筆記本電腦上的寬版。 這是我們通常的思考方式。 但是，如果在寬版中我實際上有三列怎麼辦？ 所以在每一列中，我都想要窄麥克風。

現在看到當前的 CSS 不支持那個。 它只是說整個屏幕很寬，所以你很寬，而不是是的，屏幕可能很寬，但你在一列中，所以你仍然需要表現得像在打電話一樣。 這就是容器查詢所做的。 對此超級興奮。 現在，這只是一個更大趨勢的一部分，即轉向考慮網頁，而不是作為一個完整的網頁，而是從組件的角度來考慮它。 一頁的片段。

現在，作為一名 PHP 開發人員，您已經習慣於分離一些東西。 樣式在這裡，功能在那裡，整個頁面佈局在那裡等等。 但轉向組件是一個更大的轉變。 它是說頁面內部的片段應該由這些可重用的獨立組件組成。 Web 的底層技術（如 CSS 和 HTML）正朝著組件方向發展，正如您剛剛看到的這個組件，就像在思考我的尺寸應該基於我自己而不是基於更寬的頁面。

你當然也可以在古騰堡看到這種思維。 所以 WordPress 用戶不再編寫這些長頁面。 他們正在組裝積木。 塊是組件。 您可以以任何您想要的方式重複使用和組裝的單元，無論是文本、標題或圖像等內容片段，還是列和選項卡等佈局以及各種其他內容。

當然，對於完整的站點編輯，這只會更進一步。 現在佈局整個頁面，還有作為組件的塊，這就是我們使用 WordPress 的方式，所以這是一個轉變，作為 WordPress 開發人員，您必須接受這樣的轉變，以免落後。 因為無論你是從 HTML 和 CSS 等底層技術來看它，還是你看看 WordPress 已經去了哪裡，以及它在古騰堡和完整網站編輯方面的發展方向，所有這些都表明你必須考慮組件中的事情，甚至可能開發組件之類的東西。

當您查看更廣泛的前端開發網絡（如無頭網站和 JavaScript 世界）時，情況也是如此，這完全是同一個故事。 所以像這樣的 JavaScript 框架，react、view 和 angular，幾乎每個人都使用其中一個，它們從一開始就是基於組件的。 多年。 您不會將東西放入單獨的文件中，而是將組件放入單獨的文件中並重用它們。

所以這就是無論你使用無頭的 JavaScript 還是使用 WordPress 或者你只寫 HTML 和 CSS raw，你仍然需要考慮組件。 所以它有很多價值。 這有點像面向對象編程如何封裝數據和代碼。 同樣，Web 組件封裝了外觀、行為、數據和代碼，並使它們可重用，這很棒。

另一件事，除了可重用和可組合之外，它們是可單獨測試的。 所以這又回到了我們正在談論的測試方面。 所以你可以拿一個組件，甚至只是一個按鈕，然後你可以在這些不同的上下文中測試它。 當文字變大或變小時，按鈕是什麼樣子的？ 按鈕在不同類型的瀏覽器上是什麼樣子的？ 在淺色模式或深色模式下按鈕看起來像什麼，等等。

當您單獨測試一個按鈕時，測試各種組合會容易得多，更容易修復錯誤等等。 然後你就有了一個漂亮的可重複使用的按鈕，之後你就不必繼續測試了。 因此，通過擁有一組可單獨測試的組件（這更容易），您現在可以編寫第一次就可以工作的頁面。 因此，這又是問題的一部分，嘿，我該如何測試和構建這些在所有這些不同情況下都能正常運行的網站？

所以組件，這是我認為您需要處理網站的架構師的一種方式。 因此，作為 WordPress 開發人員，您已經了解了很多世界。 您了解如何與發布商合作。 您了解如何將他們的要求轉化為現實生活。 您了解如何混合代碼、藝術和需求，並製作出精彩而有效的網站。

訣竅是學習和引入這項新技術，這樣您就可以利用自適應體驗等東西，以及這些東西背後的工具和組件來構建這些東西，而不是落後。 因此，在 DE{CODE}，此處的演示旨在幫助您做到這一點。 所以在 DE{CODE}，我們有一個 headless WordPress 的軌道，你可以了解什麼時候為客戶使用 headless，什麼時候不使用 headless。 我們有研討會幫助您從頭開始使用無頭，非常快，就像在幾分鐘內。 所以如果你對此很好奇，那就去看看吧。

我們也有電子商務和管理 WordPress 和其他主題的突破。 我的建議是，當你度過這一天，當你瀏覽所有這些會議時，你會吸收你能吸收的東西，做筆記等，但你會尋找你說的一兩三件事，好的，那些是我要嘗試的事情。 我要學習那些東西。 我將嘗試將這些東西帶入一個項目中。 我會在這方面做得很好。 也許我什至也回到我現有的客戶那裡說，嘿，讓我們升級您的網站以使用它。

因此，請留意您將要帶走並作為架構師實際付諸實踐的那幾樣東西。 因此，繼續取悅那些發布者，繼續擴展到新的領域，作為一名架構師繼續成長，今年，2022 年，將是您作為 WordPress 開發人員最好的一年。 謝謝。