使用HTMX为WordPress增效：如何在不使用复杂框架的情况下增强平台功能

虽然有许多可接受的语言可以用来编码，但网络开发正在逐渐形成几种可靠的技术。对于 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 有许多优雅的方法来实现这一点：

Contacts

...
Name
Email

Add A Contact


Name


Email

表单使用 hx-post 和 hx-target 属性来扩展其目标。您还可以使用 HTMX 属性，在出错或其他使用刷新的验证尝试后保留表单输入条目：

Submit

在此，您可以将二进制文件的输入内容放在主表单元素之外，并使用 hx-swap 和 hx-target 属性。

动态加载

这种动态刷新和加载方法也适用于更常见的任务。以无限滚动为例：

Agent Smith
void29@null.org
55F49448C0

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 锚点标记：

HTMX 使用 “natural” 和 “non-natural” 来定义动作。例如，submit 将触发一个表单，这是一个自然元素事件。对于非自然元素事件，则使用 hx-trigger 属性。这些触发器可能是 HTMX 中较为复杂的部分之一，但仍然简单易懂。
例如，您可以使用触发器来监控输入字段：
…
hx-post="?action=live_search"
hx-target="#search-results"
hx-trigger="input changed delay:500ms, search"
hx-indicator=".htmx-indicator">
…
更改输入字段中的任何内容都会触发页面上其他地方的更新。另一个例子是，您可能希望根据非典型操作（如光标进入屏幕的某个部分）一次性触发一个事件：

[Here Mouse, Mouse!]


这可能会激励你创建弹出式窗口或其他模式框等应用程序。不过，在看到这些应用之前，您必须先处理 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 '
' . get_the_title() . '
';
echo '
' . get_the_excerpt() . '
';
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 对你来说是一对诱人的组合吗？请在下面的评论区告诉我们您的想法！