与 WordPress 一起使用 HTMX 在不使用复杂框架的情况下增强平台功能

虽然变成语言的选择有很多，但是每种语言都适合自己的应用场景，随着技术的发展，Web开发正在逐渐形成几种可靠的技术。对于 WordPress 来说尤其如此。

尽管用户对动态和交互式网站的期望仍然很高，但 JavaScript 在该平台上仍处于成熟期。框架可以弥补这一差距，但一些更流行的框架的复杂性可能会阻碍你的开发。HTMX这个轻量级库承诺在创建现代网络体验时提供可用性和简化性。

在本文中，我们将探讨如何集成HTMX到我们自己的 WordPress 开发工作流程中。在整个过程中，我们将学习如何使用这种强大而易用的方式来构建动态内容和交互性。

我们将讨论 HTMX 是什么、为什么它越来越受欢迎以及它如何与 WordPress 相结合。您还将获得将 HTMX 与 WordPress 集成和使用的实用指南。

HTMX 是什么

简而言之，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 2015“，当时马特-穆伦维格（Matt Mullenweg）以一句 “深入学习 JavaScript “作为结束语。

WordPress 开发人员的典型途径是研究网站对交互式动态组件的需求。在大多数情况下，jQuery一直是 WordPress 的首选 JavaScript 框架。就连人气超高的Harvard Gazette 网站也是基于 jQuery 构建的：

因此，WordPress默认集成了 jQuery。此外，许多核心功能、插件和主题都广泛使用了jQuery。这种方法是一致的，并得到了广泛的支持。

不过，随着 Web 开发的发展，WordPress 对 JavaScript 的处理方式也在不断变化。随着区块编辑器的引入，构建用户界面的方法开始想着使用 React 框架的方向转变，尤其是在 WordPress 仪表板内。

使用 WordPress 当前 JavaScript 实现的优缺点

这意味着在 WordPress 的核心代码中支持多种框架。这其中既有优点，也有缺点。首先是优点：

• React 和 jQuery 具有广泛的兼容性。前者是一个强大而流行的框架。对于后者，它与 WordPress 有着长期的联系。
• 由于 React 和 jQuery 的流行，许多开发人员都熟悉这两个框架。更重要的是，我们可以找到更多资源来学习和解决这两种框架的问题。
• WordPress 通过 wp_ajax 为 AJAX 提供内置支持。

不过，这些优点也有一些缺点：

• 依赖jQuery会影响网站的性能，而且有些应用可能根本不需要这个框架。
• 由于兼容性和安全性的原因，WordPress 并没有实现 JavaScript 的所有 “现代 “特性和功能。如果您想构建一些特殊的功能，这可能会成为一个问题。
• 随着 React 加入 WordPress 的各个区域（如区块和站点编辑器），我们的学习难度将比以往更大。

如果您具备推荐框架的开发知识或有时间学习它们，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 不会成为您用来直接替代任何更熟悉的 JavaScript 框架的库。取而代之的是，它将与现有的框架一起发挥最佳作用，在必要时帮助承担负载。

这意味着您将使用 HTMX 来完成 jQuery 和 React 可能无法胜任的某些任务。在深入了解如何在 WordPress 中实施 HTMX 之前，我们先来介绍一下该库可以增强 WordPress 的三种常见应用场景。

部分页面重载

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" action="">
      <label>
        Name
            <input name="name" type="text">  
      </label>

      <label>
        Email
            <input name="email" type="email">  
      </label>
    <input type="hidden" name="trp-form-language" value="en"/></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>

在这里，我们将binaryForm的输入放在主表单元素之外，并使用hx-swap和hx-target属性。

动态加载

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

<tr hx-get="/contacts/?page=2"
    hx-trigger="revealed"
    hx-swap="afterend">
  <td>Agent Smith</td>
  <td>amos@example.com</td>
  <td>55F49448C0</td>
</tr>

hx-swap属性充当hx-trigger属性的 “监听器”。一旦用户到达列表末尾，HTMX 就会无限加载第二页联系人信息。

您也可以将相同的方法应用于懒加载功能：

这将再次使用hx-get和hx-trigger属性启动 htmx-settling 过渡，使用缓慢淡入的方式加载图表。

数据展示

HTMX 是使用交互式或其他动态元素在屏幕上展示信息的绝佳工具，这一点不足为奇。

例如，您可以实现所有内容过滤类型，如值选择。在这种情况下，一个列表中的选项会根据另一个列表中的选项进行填充：

您甚至可以轻松设置模式对话框或界面选项卡。这也展示了 HTMX 如何与其他库和框架（如 Bootstrap）一起工作：

这种灵活性也延伸到了标签的实现。有两种方法可以做到这一点：一种是结合普通 JavaScript和 HTMX，另一种是使用超文本作为应用状态引擎（HATEOAS）原理：

还有很多方法可以将 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', array(), '2.0.0', true);

确保使用最新版本的 HTMX，并注意快速入门指南是从 CDN 调用库的，这可能不适合您的项目。不过，一个好主意是，在一个函数中封装这个enqueue，同时在 WordPress 中 enqueue 并注册一个区块。当然，这取决于您的项目是否需要使用区块编辑器。

引入 HTMX 的最后一部分是使用add_action调用整个函数。稍后在处理AJAX请求时，您将需要再次使用钩子和过滤器。

2.在 WordPress 模板文件中添加 HTMX 元素

从我们的使用案例中，你会发现 HTMX 需要在 HTML 中使用适当的标记来处理和触发 AJAX 请求。该库使用典型的HTTP 请求属性（GET、POST、PUSH、PATCH 和DELETE），并以hx-作为前缀：

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 使用 “自然 “和 “非自然 “来定义操作。例如，提交将触发一个表单，这是一个自然元素事件。对于非自然元素事件，则使用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 来说，将所有这些都存储在一个单独的文件中是一种有益的做法，你可以随心所欲地调用他们。

使用 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 处理无关，甚至看起来也不像。你在构建区块模板、使用 PHP扩展插件等方面会用到的技能，同样可以帮助你制作自己的 AJAX 请求处理程序和函数。

在 WordPress 中使用 HTMX 的技巧

虽然使用 HTMX 是在 WordPress 中实现动态内容的最简单方法之一，但仍需要仔细管理和考虑。还有一些方法可以改善您的开发体验。

第一个技巧与 HTMX 的 “成熟度 “有关。目前，它还是平台上的一个新库，因此它的集成度还不如 jQuery 等。

HTMX有很好的文档，但将该库与WordPress结合的资源却不多。这就意味着，如果没有现成社区的安全网，你就需要做大量的工作来确保运行。

我们可以提供的一个重要建议是，暂时将您的功能构建到插件中。这可以在您检查错误和其他集成错误时，为您提供结构和更简便的管理。

说到 WordPress，我们需要了解 admin-ajax.php 文件是如何与生态系统的其他部分相连接的，因为许多交互都会涉及到它。

虽然 HTMX 性能很好，但应确保AJAX 的使用量足够低，以免影响网站的加载速度或搜索引擎优化。调试请求也应成为工作流程的主要部分，尤其是浏览器开发工具中的XMLHttpRequest (XHR)指标。

这是请求和响应数据的记录，您可以用它来调试 AJAX 请求和应用程序编程接口（API）调用。鉴于 HTMX 尚未与 WordPress 紧密集成，调试工作可能比调试其他 JavaScript 框架更为重要。

总结

对于想要创建动态、交互式网站元素而又不想被复杂的 JavaScript 框架占用时间的 WordPress 开发人员来说，HTMX提供了一个令人兴奋的选项。它可以让您直接在 HTML 中构建，并能为您提供现代的交互性。

在实践中，我们可以将HTMX与其他框架一起使用，它可能并不适合所有任务，但是他的实现非常简单，为我们提供了一种快速构建网站交互元素原型的方法，有兴趣的朋友可以尝试以下。