傳統(tǒng)WordPress主題也能像靜態(tài)網(wǎng)站或無頭Web應(yīng)用一樣高效運(yùn)行。絕大多數(shù)WordPress網(wǎng)站都是使用傳統(tǒng)的WordPress主題構(gòu)建的。其中許多網(wǎng)站甚至擁有良好的緩存層和依賴項(xiàng)優(yōu)化，使其運(yùn)行速度相當(dāng)快。但作為開發(fā)者，我們已經(jīng)掌握了為網(wǎng)站創(chuàng)造更好結(jié)果的方法。使用無頭WordPress使許多網(wǎng)站實(shí)現(xiàn)了更快的加載速度、更好的用戶交互和頁面之間無縫的過渡。

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

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

傳統(tǒng)WordPress網(wǎng)站

傳統(tǒng)上，WordPress網(wǎng)站使用PHP來渲染頁面上呈現(xiàn)的HTML標(biāo)記。每次點(diǎn)擊鏈接時(shí)，瀏覽器都會(huì)向服務(wù)器發(fā)送另一個(gè)請(qǐng)求，PHP會(huì)渲染被點(diǎn)擊的網(wǎng)站的HTML標(biāo)記。

這是大多數(shù)網(wǎng)站使用的方法。它最易於維護(hù)，技術(shù)複雜性最低，並且使用正確的服務(wù)器端緩存工具，其性能也相當(dāng)不錯(cuò)。問題是，因?yàn)樗且粋€(gè)傳統(tǒng)網(wǎng)站，所以它感覺像一個(gè)傳統(tǒng)網(wǎng)站。在這種類型的網(wǎng)站中，過渡、效果和其他時(shí)尚的現(xiàn)代功能往往更難構(gòu)建和維護(hù)。

優(yōu)點(diǎn)：

1. 網(wǎng)站易於維護(hù)。
2. 技術(shù)相對(duì)簡單。
3. 與WordPress插件具有良好的兼容性。

缺點(diǎn)：

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

無頭WordPress網(wǎng)站

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

無論你怎麼說，大多數(shù)無頭WordPress網(wǎng)站都需要一名開發(fā)人員來進(jìn)行任何重大更改。想要安裝表單插件？抱歉，您可能需要開發(fā)人員來設(shè)置它。想要安裝新的SEO插件？不行，需要開發(fā)人員來更改應(yīng)用程序。想要使用那個(gè)花哨的區(qū)塊？太糟糕了——您首先需要一個(gè)開發(fā)人員。

優(yōu)點(diǎn)：

1. 網(wǎng)站本身會(huì)感覺現(xiàn)代且快速。
2. 它易於與WordPress之外的其他RESTful服務(wù)集成。
3. 整個(gè)網(wǎng)站都是用JavaScript構(gòu)建的，這使得構(gòu)建複雜的網(wǎng)站更容易。

缺點(diǎn)：

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

請(qǐng)參閱“WordPress和Jamstack”，以更深入地比較WordPress和靜態(tài)託管之間的差異。

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

我找不到任何符合此描述的內(nèi)容，所以我構(gòu)建了一個(gè)。從那時(shí)起，我已經(jīng)構(gòu)建了幾個(gè)使用這種方法的網(wǎng)站，並構(gòu)建了必要的JavaScript庫，使其他人更容易創(chuàng)建他們自己的近乎無頭WordPress主題。

介紹近乎無頭WordPress

近乎無頭是一種WordPress的Web開發(fā)方法，它為您提供了無頭方法帶來的許多類似應(yīng)用程序的優(yōu)勢，以及使用傳統(tǒng)WordPress主題帶來的開發(fā)便利性。它通過一個(gè)小型JavaScript應(yīng)用程序來實(shí)現(xiàn)這一點(diǎn)，該應(yīng)用程序?qū)⑻幚砺酚蓙K像無頭應(yīng)用程序一樣渲染您的網(wǎng)站，但有一個(gè)回退機(jī)制，可以使用正常的WordPress請(qǐng)求加載完全相同的頁面。您可以選擇使用回退方法加載哪些頁面，並且可以在JavaScript或PHP中註入邏輯來確定是否應(yīng)像這樣加載頁面。

您可以在我構(gòu)建的演示網(wǎng)站上看到它的實(shí)際效果，該網(wǎng)站展示了這種方法可以實(shí)現(xiàn)的功能。

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

優(yōu)點(diǎn)：

1. 設(shè)置後，這很容易維護(hù)。
2. 託管與典型的WordPress主題一樣容易。
3. 網(wǎng)站感覺與無頭網(wǎng)站一樣現(xiàn)代和快速。

缺點(diǎn)：

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

工作原理

要成為近乎無頭，它需要能夠執(zhí)行多項(xiàng)操作，包括：

1. 使用WordPress請(qǐng)求加載頁面，
2. 使用JavaScript加載頁面，
3. 允許頁面相同，無論它們?nèi)绾武秩荆?/li>
4. 提供一種方法來知道何時(shí)使用JavaScript或PHP加載頁面，以及
5. 確保所有路由頁面的100%一致性，無論它是使用JavaScript還是PHP渲染的。

這允許網(wǎng)站利用漸進(jìn)增強(qiáng)。由於頁面可以使用或不使用JavaScript查看，因此您可以根據(jù)所做的請(qǐng)求使用最合適的版本。有一個(gè)可信的機(jī)器人正在抓取您的網(wǎng)站？向他們發(fā)送非JavaScript版本以確保兼容性。有一個(gè)結(jié)賬頁面沒有按預(yù)期工作？暫時(shí)強(qiáng)制它在沒有應(yīng)用程序的情況下加載，以後再修復(fù)它。

為了完成這些項(xiàng)目，我發(fā)布了一個(gè)名為Nicholas的開源庫，其中包括一個(gè)預(yù)製樣板。

保持DRY

在構(gòu)建近乎無頭應(yīng)用程序時(shí)，我最想克服的最大問題是保持PHP和JavaScript中頁面渲染方式的一致性。我不想在兩個(gè)不同的地方構(gòu)建和維護(hù)我的標(biāo)記——我希望盡可能多地使用單個(gè)源代碼。這立即限制了我可以實(shí)際使用的JavaScript庫（對(duì)不起，React?。＝?jīng)過一些研究和大量實(shí)驗(yàn)，我最終使用了AlpineJS。這個(gè)庫使我的代碼保持了合理的DRY。有些部分絕對(duì)必須為每個(gè)部分重寫（例如循環(huán)），但大多數(shù)重要的標(biāo)記塊可以重複使用。

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

 <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模板，因此實(shí)際循環(huán)內(nèi)的所有代碼都是DRY：

 <code>$title = $template->get_param( 'title', '' ); // 獲取傳遞到此模板的標(biāo)題，回退到空字符串。 $content = $template->get_param( 'content', '' ); // 獲取傳遞到此模板的內(nèi)容，回退到空字符串。 ?></code> = $title ?>

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

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

檢測頁面何時(shí)應(yīng)以兼容模式運(yùn)行

“兼容模式”允許您強(qiáng)制任何請(qǐng)求在沒有運(yùn)行網(wǎng)站無頭版本的JavaScript的情況下加載。當(dāng)頁面設(shè)置為使用兼容模式加載時(shí)，頁面將僅使用PHP加載，並且應(yīng)用程序腳本永遠(yuǎn)不會(huì)排隊(duì)。這允許“問題頁面”在無需重寫任何內(nèi)容的情況下運(yùn)行，而這些頁面在使用應(yīng)用程序時(shí)無法按預(yù)期工作。

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

除此之外，您還可以手動(dòng)添加任何URL以強(qiáng)制其在Nicholas設(shè)置中以兼容模式加載。

這些是一個(gè)很好的開始，但我發(fā)現(xiàn)我通?？梢愿鶕?jù)存儲(chǔ)在帖子中的塊自動(dòng)檢測頁面何時(shí)需要以兼容模式加載。例如，假設(shè)您在網(wǎng)站上安裝了Ninja Forms，並且您想使用它們提供的驗(yàn)證JavaScript，而不是重新創(chuàng)建自己的JavaScript。在這種情況下，您必須強(qiáng)制在任何包含Ninja Form的頁面上使用兼容模式。您可以手動(dòng)逐一添加每個(gè)URL，也可以使用查詢來獲取頁面上具有Ninja Forms塊的所有內(nèi)容。例如：

 <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>

這會(huì)自動(dòng)將任何包含Ninja Forms塊的頁面添加到將使用兼容模式加載的URL列表中。這只是使用WP_Query參數(shù)，因此您可以在這里傳遞任何想要的內(nèi)容來確定應(yīng)將哪些內(nèi)容添加到列表中。

擴(kuò)展應(yīng)用程序

在幕後，Nicholas使用一個(gè)輕量級(jí)路由器，可以使用中間件模式進(jìn)行擴(kuò)展，就像Express應(yīng)用程序處理中間件的方式一樣。當(dāng)點(diǎn)擊頁面被路由時(shí)，系統(tǒng)會(huì)運(yùn)行每個(gè)中間件項(xiàng)，最終路由頁面。默認(rèn)情況下，路由器不執(zhí)行任何操作；但是，它附帶了一些預(yù)製中間件，允許您根據(jù)需要組裝路由器。

一個(gè)基本的例子如下所示：

 <code>// 導(dǎo)入WordPress特定的中間件import { updateAdminBar, validateAdminPage, validateCompatibilityMode } from 'nicholas-wp/middlewares' // 導(dǎo)入通用中間件import { addRouteActions, handleClickMiddleware, setupRouter, validateMiddleware } from "nicholas-router"; // 按此順序執(zhí)行這些操作，當(dāng)頁面被路由時(shí)。 addRouteActions( // 首先，驗(yàn)證URL validateMiddleware, // 驗(yàn)證此頁面不是管理頁面validateAdminPage, // 驗(yàn)證此頁面不需要兼容模式validateCompatibilityMode, // 然后，我們更新Alpine存儲(chǔ)updateStore, // 如果啟用，則可能獲取評(píng)論fetchComments, // 更新歷史記錄updateHistory, // 可能更新管理欄updateAdminBar ) // 設(shè)置路由器。這也使用中間件模式。 setupRouter( // 為點(diǎn)擊設(shè)置事件監(jiān)聽器handleClickMiddleware )</code>

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

下一步

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

以上是如何構(gòu)建幾乎無頭的WordPress網(wǎng)站的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！