如何构建几乎无头的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', '' ); // 获取传递到此模板的内容，回退到空字符串。

?>
<h1 x-html="title">= $title ?></h1>

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

相关：这种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中文网其他相关文章！