雖然有許多可接受的語言可以用來編碼，但網路開發正在逐漸形成幾種可靠的技術。對於 WordPress 來說尤其如此。
儘管使用者對動態和互動式網站的期望仍然很高，但 JavaScript 在該平臺上仍處於成熟期。框架可以彌補這一差距，但一些更流行的框架的複雜性可能會阻礙你的開發。進入 HTMX。這個輕量級庫承諾在建立現代網路體驗時提供可用性和簡化性。
在本文中，我們將探討 HTMX 如何整合到您自己的 WordPress 開發工作流程中。在整個過程中，您將學習如何使用這種強大而易用的方式來構建動態內容和互動性。
我們將討論 HTMX 是什麼、為什麼它越來越受歡迎以及它如何與 WordPress 相結合。您還將獲得將 HTMX 與 WordPress 整合和使用的實用指南。
什麼是HTMX
HTMX Logo
簡而言之，HTMX 是一個 JavaScript 庫，可以擴充套件標準超文字標記語言（HTML），而無需編寫虛構或框架 JavaScript。通過這些擴充套件，您還可以訪問其他技術：
- 非同步 JavaScript 和 XML（AJAX）。HTMX 使用 AJAX 向伺服器傳送 “非同步” 請求。這樣，您就可以進行部分頁面更新，而無需重新載入整個頁面。
- WebSockets 您可以建立 WebSocket 連線，實現瀏覽器與伺服器之間的實時雙向通訊。
- 伺服器傳送事件（SSE）。這項技術可讓伺服器向瀏覽器推送資料。在那裡，你可以使用 HTMX 進行實時頁面更新。
- CSS 過渡。您可以整合 CSS 過渡技術，從而在網站上實現流暢的動畫更新。
HTMX 的核心是簡化您建立動態、互動式 Web 應用程式的過程。其關鍵功能是如何從 HTML 元素髮出GET、POST、PUT、PATCH 和DELETE HTTP 請求。這意味著您可以像處理移動應用程式一樣處理流暢的部分頁面更新。總的來說，HTMX 是一個功能強大的工具包，可幫助您建立動態網頁體驗，而無需大量 JavaScript 程式碼。
為什麼我們都在談論 HTMX
HTMX 最近引起了熱議，在過去五年中，該庫的搜尋量呈爆炸式增長。
谷歌趨勢圖顯示 HTMX 的搜尋量在五年內呈上升趨勢。
這種人氣激增的部分原因是社交媒體和開發人員論壇的知名度。不過，HTMX 有幾個因素使其成為一個有吸引力的開發選項。
- 簡單。由於 HTMX 使用熟悉的 HTML 語法來幫助您建立動態、互動式 Web 應用程式，因此實施起來非常簡單，幾乎沒有典型 JavaScript 框架的複雜性。
- 效能。HTMX 最大限度地減少了 JavaScript 的用量，因此載入速度更快，效能比其他框架更好，尤其是在移動裝置上。
- 伺服器端渲染。如果您想改善初始頁面載入時間和搜尋引擎優化 (SEO)，伺服器端渲染是一個不錯的選擇。HTMX 將此納入其功能集。
- 漸進增強。這意味著在不破壞禁用 JavaScript 的使用者的功能的情況下為網站新增互動性。HTMX 遵循這些原則，因此具有可訪問性優勢。
此外，與一些大型框架不同，HTMX 不需要複雜的構建過程或工具鏈。再加上學習曲線更淺，將該庫整合到專案中就更容易了。
這些優勢反過來又促進了對 HTMX 的討論和採用。如果您正在尋找一種更直接的解決方案來建立互動式網路體驗，那麼這個庫可能是您的不二之選。
WordPress與JavaScript的關係
WordPress 與 JavaScript 的淵源可以追溯到 2015 年的 State of the Word 大會，當時馬特-穆倫維格（Matt Mullenweg）以一句 “深入學習JavaScript” 作為結束語。
WordPress 開發人員的典型途徑是研究網站對互動式動態元件的需求。在大多數情況下，jQuery 一直是 WordPress 的首選 JavaScript 框架。就連超人氣的《哈佛公報》網站也是基於 jQuery 構建的：
《哈佛公報》網站使用 WordPress 和 jQuery 執行。
因此，WordPress 預設會呼叫 jQuery。此外，許多核心功能、外掛和主題都廣泛使用了 jQuery。這種方法是一致的，並得到了廣泛的支援。
在 WordPress 區塊編輯器中顯示區塊側邊欄。
然而，隨著網路開發的發展，WordPress 對 JavaScript 的處理方式也在不斷變化。在引入區塊編輯器的同時，WordPress 也轉向使用 React 框架來構建使用者介面，尤其是在 WordPress 儀表板中。
使用 WordPress 當前 JavaScript 實現的利弊
這意味著在 WordPress 的核心程式碼中支援多種框架。這其中既有優點，也有缺點。首先是優點：
- React 和 jQuery 具有廣泛的相容性。前者是一個強大而流行的框架。對於後者，它與 WordPress 有著長期的聯絡。
- 由於 React 和 jQuery 的流行，許多開發人員都熟悉這兩個框架。更重要的是，您可以找到更多資源來學習和解決這兩種框架的問題。
- WordPress 通過
wp_ajax為 AJAX 提供內建支援。
不過，這些優點也有負面影響：
- 依賴 jQuery 會影響網站的效能，而且有些應用可能根本不需要這個框架。
- 由於相容性和安全性的原因，WordPress 並沒有實現 JavaScript 的所有 “現代” 特性和功能。如果您想建立一些特殊的內容，這可能會成為一個問題。
- 在 WordPress 中增加了 React 功能（如區塊和站點編輯器）後，您的學習曲線會比以前更大。
如果您具備推薦框架的開發知識或有時間學習它們，WordPress 當前的 JavaScript 架構是合適的。如果沒有，您可能需要一種解決方案，它不像典型的框架那樣複雜，但仍能在前端提供現代化的互動體驗。這就是 HTMX 需要考慮的地方。
為什麼 HTMX 更適合某些 WordPress 開發任務？
在 WordPress 開發方面，HTMX 具有一些令人信服的優勢。它可以在 jQuery 的簡潔性和 React 的現代性、高效能之間提供一箇中間地帶。
我們已經討論過其中的一些方面，下面讓我們簡要回顧一下：
- 與 jQuery 和 React 相比，HTMX 的 “重量” 會對效能產生很大影響。
- 大多數 WordPress 開發人員認為自己最熟悉的是 HTML 和 PHP，而不是 JavaScript。HTMX 就像一種標記語言，在使用過程中更容易上手。
- 由於採用了伺服器端渲染，PHP 和 HTMX 也能很好地協同工作，這也會對效能產生積極影響。
- 儘管 HTMX 是一個 “較新” 的庫，但您可以更輕鬆地整合 HTMX 並掌握其工作方式。這將有利於您的工作流程。
對於 WordPress 的開發，我們也喜歡它能讓您輕鬆地為網站設計新功能原型。您可以在現有的 HTML 程式碼中快速建立複雜的新功能。在此基礎上，您可以根據需要靈活地新增 React 元件或少量 jQuery。
HTMX 的漸進增強原則也很有吸引力。可訪問性應該是設計策略的核心，而 HTMX 可以讓你在構建互動性的同時，不破壞那些選擇在瀏覽器中禁用 JavaScript 的使用者的體驗。
最後，HTMX 的一個顯著優勢是它不需要任何自定義或特殊的伺服器端設定。您可以在任何主機上使用 HTMX 標記。
考慮到我們提供的高質量託管服務，使用 HTMX 的網站應能快速執行。這將影響您的搜尋引擎優化指標、流量、開發時間、故障排除工作流程以及整個開發鏈。
HTMX 的典型用例
我們在上一節中預告過，HTMX 不會成為您用來直接替代任何更熟悉的 JavaScript 框架的庫。取而代之的是，它將與現有的框架一起發揮最大作用，在必要時幫助承擔負載。
這意味著您將使用 HTMX 來完成 jQuery 和 React 可能無法勝任的某些任務。在深入探討如何在 WordPress 中實施 HTMX 之前，我們先來介紹一下該庫可以增強 WordPress 功能的三種常見應用場景。
部分頁面過載
HTMX 的主要用例是如何以最小的代價實現部分頁面過載。這對許多開發人員來說可能是個大問題，尤其是對於快速模擬和原型來說。但是，HTMX 可以提供生產質量的結果。
例如，它可以幫助您在網站上實現實時搜尋功能：
使用 HTMX 的實時動態搜尋介面。
HTMX 示例庫還介紹了在頁面內其他內容區域進行實時更新的方法。例如，他們的示例使用了一個帶有可用聯絡人表的聯絡人表單，一旦使用者提交新的聯絡人，該表單就會重新整理。HTMX 有許多優雅的方法來實現這一點：
<div id="table-and-form"> <h2>Contacts</h2> <table class="table"> <thead> <tr> <th>Name</th> <th>Email</th> <th></th> </tr> </thead> <tbody id="contacts-table"> ... </tbody> </table> <h2>Add A Contact</h2> <form hx-post="/contacts" hx-target="#table-and-form"> <label> Name <input name="name" type="text"> </label> <label> Email <input name="email" type="email"> </label> </form> </div>
表單使用 hx-post 和 hx-target 屬性來擴充套件其目標。您還可以使用 HTMX 屬性，在出錯或其他使用重新整理的驗證嘗試後保留表單輸入條目：
<input form="binaryForm" type="file" name="binaryFile"> <form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm"> <button type="submit">Submit</button> </form>
在此，您可以將二進位制檔案的輸入內容放在主表單元素之外，並使用 hx-swap 和 hx-target 屬性。
動態載入
這種動態重新整理和載入方法也適用於更常見的任務。以無限滾動為例：
<tr hx-get="/contacts/?page=2" hx-trigger="revealed" hx-swap="afterend"> <td>Agent Smith</td> <td>void29@null.org</td> <td>55F49448C0</td> </tr>
hx-swap 屬性充當 hx-trigger 屬性的 “listener”。一旦使用者到達列表末尾，HTMX 就會無限載入第二頁聯絡人。
您也可以將相同的方法應用於懶載入功能：
使用 HTMX 實現懶載入。
這同樣是使用 hx-get 和 hx-trigger 屬性啟動 htmx-settling 過渡，使用緩慢淡入的方式載入圖表。
資料展示
HTMX 非常適合使用互動式或其他動態元素在螢幕上展示資訊，這一點不足為奇。
例如，您可以實現所有內容過濾型別，如值選擇。在這種情況下，一個列表中的選項會根據另一個列表中的選項進行填充：
使用 HTMX 為網站元素分配值選擇。
您甚至可以輕鬆設定 模式對話方塊 或介面選項卡。這也展示了 HTMX 如何與 Bootstrap 等其他庫和框架一起工作：
使用 HTMX 開啟模式對話方塊。
這種靈活性還延伸到了標籤的實現。有兩種方法可以做到這一點：一種是結合普通 JavaScript 和 HTMX，另一種是使用 “超文字作為應用狀態引擎”（HATEOAS）原理：
使用 HTMX 的標籤介面 GIF。
還有很多方法可以將 HTMX 用於前端網站元素，而其核心則在伺服器端。在下一節中，我們將為您提供在 WordPress 中建立自己的願景的工具。
如何將 HTMX 整合到 WordPress 中
如果您想將 HTMX 新增到您的 WordPress 網站，好訊息是這很簡單快捷。接下來，我們將介紹這項工作的三個步驟。我們不會介紹為 WordPress 開發功能的整個過程和程式碼，但我們會介紹您需要遵循的所有關鍵點。
此外，如果您已經為 WordPress 進行過開發，那麼大部分流程，尤其是第一步，應該是很典型的。
1. 在您的 PHP 程式碼中強制 HTMX
與 WordPress 的其他指令碼一樣，您必須在主題或外掛的程式碼中包含 HTMX 庫。
wp_enqueue_script('htmx-script', 'https://unpkg.com/htmx.org@2.0.0/dist/htmx.min.js', array(), '2.0.0', true);
HTMX 快速入門指南從內容分發網路 (CDN) 呼叫庫。您應決定這是否適合您的專案。
注：HTMX 快速入門指南從內容分發網路（CDN）呼叫庫。您應決定這是否適合您的專案。
請確保使用最新版本的 HTMX，並注意快速入門指南是從 CDN 呼叫庫的，這可能不適合您的專案。
不過，一個客觀的好主意是在一個函式中封裝這個 enqueue，同時在 WordPress 中 enqueue 和註冊一個Block。當然，這取決於您的專案是否需要使用區塊編輯器。
列舉 HTMX 的最後一部分是使用 add_action 呼叫整個函式。稍後在處理 AJAX 請求時，您將需要再次使用鉤子和過濾器。
2. 在 WordPress 模板檔案中新增 HTMX 元素
從我們的使用案例中，你會發現 HTMX 需要在 HTML 中使用適當的標記來處理和觸發 AJAX 請求。該庫使用帶 hx- 字首的典型 HTTP 請求屬性（GET、POST、PUSH、PATCH 和 DELETE）：
hx-post
WordPress 的 AJAX 請求使用 admin-ajax.php 端點，您應該記住這一點！使用 HTMX 建立的典型元素會發出 AJAX 請求，將其傳送到目標元素，並可能處理觸發器。
通過 hx-target 屬性，您可以指定請求結果的去向。這可能是另一個頁面、一個特定的 div 或其他內容。可以把它想象成 HTML 錨點標記：
<input type="search"
name="search" placeholder="Search..."
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
…
HTMX 使用 “natural” 和 “non-natural” 來定義動作。例如，submit 將觸發一個表單，這是一個自然元素事件。對於非自然元素事件，則使用 hx-trigger 屬性。這些觸發器可能是 HTMX 中較為複雜的部分之一，但仍然簡單易懂。
例如，您可以使用觸發器來監控輸入欄位：
…
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
hx-trigger="input changed delay:500ms, search"
hx-indicator=".htmx-indicator">
…
更改輸入欄位中的任何內容都會觸發頁面上其他地方的更新。另一個例子是，您可能希望根據非典型操作（如游標進入螢幕的某個部分）一次性觸發一個事件：
<div hx-post="/mouse_entered" hx-trigger="mouseenter once"> [Here Mouse, Mouse!] </div>
這可能會激勵你建立彈出式視窗或其他模式框等應用程式。不過，在看到這些應用之前，您必須先處理 AJAX 請求。
3. 處理 AJAX 請求
最後，您需要在伺服器端處理 AJAX 請求。對於 WordPress 來說，將所有這些都儲存在一個單獨的檔案中是一種有益的做法。您可以隨心所欲地稱呼它，但 ajax-functions.php 已經足夠清晰明瞭。
使用 HTMX 的這一部分需要你發揮你的 PHP 技能。處理 AJAX 請求將是您的特定專案所獨有的。這是將模板檔案中命名的屬性連結到伺服器端處理的地方。
當然，無論使用 HTMX、JavaScript 還是其他程式碼，你都會這樣做。下面是一些虛擬碼，展示了這可能是什麼樣子：
function my_search_action() {
$search_term = sanitize_text_field( $_POST['search'] );
$args = array(
's' => $search_term,
'post_type' => 'post',
'posts_per_page' => 5
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post();
echo '<h2>' . get_the_title() . '</h2>';
echo '<p>' . get_the_excerpt() . '</p>';
endwhile;
else:
echo 'No results found.';
endif;
wp_reset_postdata();
wp_die();
}
即便如此，這可能與你自己專案的 AJAX 處理無關，甚至看起來也不像。您在構建 Block 模板、使用 PHP 擴充套件外掛等方面所使用的技能，同樣可以幫助您建立自己的 AJAX 請求處理程式和函式。
在 WordPress 中使用 HTMX 的技巧
雖然使用 HTMX 是在 WordPress 中實現動態內容的最簡單方法之一，但仍需要仔細管理和考慮。還有一些方法可以改善您的開發體驗。
第一個技巧與 HTMX 的 “成熟度” 有關。目前，HTMX 還是該平臺的一個新庫，因此它的整合度不如 jQuery 等。
HTMX 有很好的文件，但將該庫與WordPress結合的資源卻不多。這就意味著，在沒有現成社羣的安全網的情況下，你需要做大量的工作才能讓程式執行起來。
我們可以提供的一個重要建議是，暫時將您的功能構建到外掛中。在檢查錯誤和其他整合錯誤的同時，這可以為您提供結構和更簡便的管理。
當我們談到 WordPress 時，請了解 admin-ajax.php 檔案如何與生態系統的其他部分連線，因為許多互動都會涉及到它。
程式碼編輯器中的 admin-ajax.php 檔案。
雖然 HTMX 效能出色，但應確保 AJAX 的使用量足夠低，以免影響網站的載入速度或搜尋引擎優化。除錯請求也應成為工作流程的主要部分，尤其是瀏覽器開發工具中的XMLHttpRequest (XHR) 指標。
WordPress.org 網站的 Fetch/XHR 請求。
這是請求和響應資料的記錄，您可以用它來除錯 AJAX 請求和應用程式程式設計介面（API）呼叫。鑑於 HTMX 尚未與 WordPress 緊密整合，除錯工作可能比除錯其他 JavaScript 框架更為重要。
小結
對於想要建立動態、互動式網站元素而又不想被複雜的 JavaScript 框架佔用時間的 WordPress 開發人員來說，HTMX 提供了一個令人興奮的簡介。它允許您在 HTML 中構建，並提供了 jQuery 和 React 的超薄替代品，同時還能為您提供現代的互動性。
在實踐中，您將與其他框架一起使用 HTMX，因為它並不適合所有任務。即便如此，HTMX 的實現還是很簡單的，它為您提供了一種快速構建網站互動元素原型的方法，甚至可以成為您的生產版本。
HTMX 和 WordPress 對你來說是一對誘人的組合嗎？請在下面的評論區告訴我們您的想法！
評論留言