如何構建幾乎無頭的WordPress網站

傳統WordPress主題也能像靜態網站或無頭Web應用一樣高效運行。絕大多數WordPress網站都是使用傳統的WordPress主題構建的。其中許多網站甚至擁有良好的緩存層和依賴項優化，使其運行速度相當快。但作為開發者，我們已經掌握了為網站創造更好結果的方法。使用無頭WordPress使許多網站實現了更快的加載速度、更好的用戶交互和頁面之間無縫的過渡。

問題在於：維護。讓我向您展示另一種可能性！

讓我們首先定義我所說的“傳統”WordPress、“無頭”WordPress以及“近乎無頭”WordPress。

傳統WordPress網站

傳統上，WordPress網站使用PHP來渲染頁面上呈現的HTML標記。每次點擊鏈接時，瀏覽器都會向服務器發送另一個請求，PHP會渲染被點擊的網站的HTML標記。

這是大多數網站使用的方法。它最易於維護，技術複雜性最低，並且使用正確的服務器端緩存工具，其性能也相當不錯。問題是，因為它是一個傳統網站，所以它感覺像一個傳統網站。在這種類型的網站中，過渡、效果和其他時尚的現代功能往往更難構建和維護。

優點：

1. 網站易於維護。
2. 技術相對簡單。
3. 與WordPress插件具有良好的兼容性。

缺點：

1. 隨著社會期望在瀏覽器中獲得類似應用程序的體驗，您的網站可能會顯得有些過時。
2. 由於網站沒有使用JavaScript框架來控製網站的行為，因此JavaScript往往更難編寫和維護。
3. 傳統網站的運行速度往往比無頭和近乎無頭選項慢。

無頭WordPress網站

無頭WordPress網站使用現代JavaScript和某種服務器端RESTful服務，例如WordPress REST API或GraphQL。它不是在PHP中構建和渲染HTML，而是服務器發送最少的HTML和一個大型JavaScript文件，該文件可以處理網站上任何頁面的渲染。這種方法可以更快地加載頁面，並為創建頁面之間真正酷炫的過渡和其他有趣的功能提供了機會。

無論你怎麼說，大多數無頭WordPress網站都需要一名開發人員來進行任何重大更改。想要安裝表單插件？抱歉，您可能需要開發人員來設置它。想要安裝新的SEO插件？不行，需要開發人員來更改應用程序。想要使用那個花哨的區塊？太糟糕了——您首先需要一個開發人員。

優點：

1. 網站本身會感覺現代且快速。
2. 它易於與WordPress之外的其他RESTful服務集成。
3. 整個網站都是用JavaScript構建的，這使得構建複雜的網站更容易。

缺點：

1. 您必須重新發明WordPress插件為您開箱即用提供的許多功能。
2. 此設置難以維護。
3. 與其他選項相比，託管複雜且成本可能很高。

請參閱“WordPress和Jamstack”，以更深入地比較WordPress和靜態託管之間的差異。

我喜歡無頭WordPress可以創造的結果。我不喜歡維護工作。我想要一個Web應用程序，它允許我擁有快速的加載速度、頁面之間的過渡以及網站的整體類似應用程序的感覺。但我也希望能夠自由地使用使WordPress如此流行的插件生態系統。我想要一些無頭的東西。近乎無頭。

我找不到任何符合此描述的內容，所以我構建了一個。從那時起，我已經構建了幾個使用這種方法的網站，並構建了必要的JavaScript庫，使其他人更容易創建他們自己的近乎無頭WordPress主題。

介紹近乎無頭WordPress

近乎無頭是一種WordPress的Web開發方法，它為您提供了無頭方法帶來的許多類似應用程序的優勢，以及使用傳統WordPress主題帶來的開發便利性。它通過一個小型JavaScript應用程序來實現這一點，該應用程序將處理路由並像無頭應用程序一樣渲染您的網站，但有一個回退機制，可以使用正常的WordPress請求加載完全相同的頁面。您可以選擇使用回退方法加載哪些頁面，並且可以在JavaScript或PHP中註入邏輯來確定是否應像這樣加載頁面。

您可以在我構建的演示網站上看到它的實際效果，該網站展示了這種方法可以實現的功能。

例如，一個實現此方法的網站使用名為LifterLMS的學習管理系統在線銷售WordPress課程。此插件具有內置的電子商務功能，並設置了託管課程內容並將其置於付費牆後的必要界面。此網站使用了大量LifterLMS的內置功能——其中很大一部分是結賬購物車。我沒有重新構建整個頁面以在我的應用程序中工作，而是簡單地將其設置為使用回退方法加載。因此，此頁面就像任何舊的WordPress主題一樣工作，並且因此完全按預期工作——所有這些都無需我重新構建任何內容。

優點：

1. 設置後，這很容易維護。
2. 託管與典型的WordPress主題一樣容易。
3. 網站感覺與無頭網站一樣現代和快速。

缺點：

1. 您必須始終考慮兩種不同的方法來渲染您的網站。
2. 此方法有效的JavaScript庫選擇有限。
3. 此應用程序與WordPress緊密綁定，因此使用第三方REST API比無頭更困難。

工作原理

要成為近乎無頭，它需要能夠執行多項操作，包括：

1. 使用WordPress請求加載頁面，
2. 使用JavaScript加載頁面，
3. 允許頁面相同，無論它們如何渲染，
4. 提供一種方法來知道何時使用JavaScript或PHP加載頁面，以及
5. 確保所有路由頁面的100%一致性，無論它是使用JavaScript還是PHP渲染的。

這允許網站利用漸進增強。由於頁面可以使用或不使用JavaScript查看，因此您可以根據所做的請求使用最合適的版本。有一個可信的機器人正在抓取您的網站？向他們發送非JavaScript版本以確保兼容性。有一個結賬頁面沒有按預期工作？暫時強制它在沒有應用程序的情況下加載，以後再修復它。

為了完成這些項目，我發布了一個名為Nicholas的開源庫，其中包括一個預製樣板。

保持DRY

在構建近乎無頭應用程序時，我最想克服的最大問題是保持PHP和JavaScript中頁面渲染方式的一致性。我不想在兩個不同的地方構建和維護我的標記——我希望盡可能多地使用單個源代碼。這立即限制了我可以實際使用的JavaScript庫（對不起，React！）。經過一些研究和大量實驗，我最終使用了AlpineJS。這個庫使我的代碼保持了合理的DRY。有些部分絕對必須為每個部分重寫（例如循環），但大多數重要的標記塊可以重複使用。

使用PHP渲染的單個帖子模板可能如下所示：

 <code><?php if ( have_posts() ) { while ( have_posts() ) { the_post(); if ( is_singular() ) { echo nicholas()-?>templates()->get_template( 'index', 'post', [ 'content' => Nicholas::get_buffer( 'the_content' ), 'title' => Nicholas::get_buffer( 'the_title' ), ] ); } } } ?></code>

使用Alpine的JavaScript渲染的相同帖子模板：

<code><template :key="index" x-for="(post, index) in $store.posts"> = nicholas()->templates()->get_template( 'index', 'post' ) ?>
</template></code>

它們都使用相同的PHP模板，因此實際循環內的所有代碼都是DRY：

 <code>$title = $template->get_param( 'title', '' ); // 获取传递到此模板的标题，回退到空字符串。 $content = $template->get_param( 'content', '' ); // 获取传递到此模板的内容，回退到空字符串。 ?></code> = $title ?>

  <div x-html="content">= $content ?></div>

相關：這種Alpine.js方法在精神上類似於Jonathan Land在“如何在WordPress主題中構建Vue組件”中介紹的Vue.js方法。

檢測頁面何時應以兼容模式運行

“兼容模式”允許您強制任何請求在沒有運行網站無頭版本的JavaScript的情況下加載。當頁面設置為使用兼容模式加載時，頁面將僅使用PHP加載，並且應用程序腳本永遠不會排隊。這允許“問題頁面”在無需重寫任何內容的情況下運行，而這些頁面在使用應用程序時無法按預期工作。

您可以通過多種不同的方式強制頁面以兼容模式運行——有些需要代碼，有些則不需要。 Nicholas向任何帖子類型添加了一個切換開關，可以強制帖子以兼容模式加載。

除此之外，您還可以手動添加任何URL以強制其在Nicholas設置中以兼容模式加載。

這些是一個很好的開始，但我發現我通常可以根據存儲在帖子中的塊自動檢測頁面何時需要以兼容模式加載。例如，假設您在網站上安裝了Ninja Forms，並且您想使用它們提供的驗證JavaScript，而不是重新創建自己的JavaScript。在這種情況下，您必須強制在任何包含Ninja Form的頁面上使用兼容模式。您可以手動逐一添加每個URL，也可以使用查詢來獲取頁面上具有Ninja Forms塊的所有內容。例如：

 <code>add_filter( 'nicholas/compatibility_mode_urls', function ( $urls ) { // 过滤Ninja Forms块$filtered_urls = Nicholas::get_urls_for_query( [ 'post_type' => 'any', 's' => 'wp:ninja-forms/form', // 查找Ninja Forms块] ); return array_merge( $urls, $filtered_urls ); } );</code>

這會自動將任何包含Ninja Forms塊的頁面添加到將使用兼容模式加載的URL列表中。這只是使用WP_Query參數，因此您可以在這里傳遞任何想要的內容來確定應將哪些內容添加到列表中。

擴展應用程序

在幕後，Nicholas使用一個輕量級路由器，可以使用中間件模式進行擴展，就像Express應用程序處理中間件的方式一樣。當點擊頁面被路由時，系統會運行每個中間件項，最終路由頁面。默認情況下，路由器不執行任何操作；但是，它附帶了一些預製中間件，允許您根據需要組裝路由器。

一個基本的例子如下所示：

 <code>// 导入WordPress特定的中间件import { updateAdminBar, validateAdminPage, validateCompatibilityMode } from 'nicholas-wp/middlewares' // 导入通用中间件import { addRouteActions, handleClickMiddleware, setupRouter, validateMiddleware } from "nicholas-router"; // 按此顺序执行这些操作，当页面被路由时。 addRouteActions( // 首先，验证URL validateMiddleware, // 验证此页面不是管理页面validateAdminPage, // 验证此页面不需要兼容模式validateCompatibilityMode, // 然后，我们更新Alpine存储updateStore, // 如果启用，则可能获取评论fetchComments, // 更新历史记录updateHistory, // 可能更新管理栏updateAdminBar ) // 设置路由器。这也使用中间件模式。 setupRouter( // 为点击设置事件监听器handleClickMiddleware )</code>

從這裡，您可以擴展頁面路由時發生的情況。也許您想掃描頁面以突出顯示代碼，或者您想更改標籤的內容以匹配新路由的頁面。甚至可以引入緩存層。無論您需要做什麼，添加所需的操作都只需使用addRouteAction或setupRouter即可。

下一步

這是我對實現近乎無頭方法所用的一些關鍵組件的簡要概述。如果您有興趣深入了解，我建議您參加我在WP Dev Academy的課程。本課程是逐步指導您如何使用現代工具構建近乎無頭WordPress網站的指南。我還建議您查看我的近乎無頭樣板，它可以幫助您開始自己的項目。

以上是如何構建幾乎無頭的WordPress網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！