使用WordPress作为无头CMS

Content management systems (CMSs) are very useful, allowing you to create, edit and manage your content as needed.

内容管理系统(CMS)非常有用，可让您根据需要创建，编辑和管理内容。

But as powerful as they might be, traditional CMSs such as WordPress don’t meet everyone’s requirements. In some cases, a higher amount of flexibility is desired. You may, for example, want to integrate your CMS with a different coding methodology and not use the front end so often. In such cases, WordPress may still be the answer, since we can change the way we use it. We can use it as what’s called a headless CMS.

但是，像WordPress这样的传统CMS尽管功能强大，但并不能满足所有人的要求。 在某些情况下，需要更高的灵活性。 例如，您可能想将CMS与其他编码方法集成在一起，而又不想经常使用前端。 在这种情况下，WordPress可能仍然是答案，因为我们可以更改使用方式。 我们可以将其用作无头CMS 。

In this article, we’ll be discussing how to use WordPress as a headless CMS. But before getting into that, let’s first fully clarify what a headless CMS is and what it can do for us.

在本文中，我们将讨论如何将WordPress用作无头CMS。 但是在开始讨论之前，我们首先要充分说明什么是无头CMS，以及它可以为我们做什么。

定义了无头CMS (A Headless CMS Defined)

In the simplest of terms, a headless CMS is one that has no front end. As such, it includes just the API and the back end that is required to store and manage content, organize data and handle the workflow. There’s no front end display of the said content. Naturally, this means any front-end templates tend to become unnecessary in a headless CMS.

用最简单的术语来说，无头CMS是没有前端的CMS。 因此，它仅包含API和存储和管理内容，组织数据并处理工作流所需的后端。 该内容没有前端显示。 自然地，这意味着在无头CMS中，任何前端模板都变得不必要。

Thus, in stark comparison to a traditional CMS, a headless CMS offers just a content management back end and API. Since there’s an absence of a front end, a headless CMS can’t be used for content “publishing” in the true sense of the term. On the other hand, traditional CMSs such as WordPress often model their entire existence around the content publishing features. This is, by and large, the biggest difference between a headless CMS and a traditional one.

因此，与传统CMS形成鲜明对比的是，无头CMS仅提供内容管理后端和API。 由于没有前端，因此无字形CMS不能真正意义上用于内容“发布”。 另一方面，传统的CMS(例如WordPress)通常围绕内容发布功能对它们的整个存在进行建模。 总的来说，这是无头CMS与传统CMS之间的最大区别。

Now, naturally getting rid of the front end can pose a decent set of challenges for the everyday user. The biggest drawback is that in the absence of a true front end, there’s hardly any proper method to figure out how content or output may look when rendered.

现在，自然地摆脱前端可能会给日常用户带来一系列挑战。 最大的缺点是，在没有真正的前端的情况下，几乎没有任何合适的方法来确定内容或输出在呈现时的外观。

Furthermore, in the absence of proper security measures, a headless CMS can pose some serious security issues. This is because, on the back end, it’s necessary to ensure that different user roles have only the right amount of privileges in order to prevent unwanted access to sensitive data.

此外，如果没有适当的安全措施，无头CMS可能会带来一些严重的安全问题。 这是因为，在后端，必须确保不同的用户角色仅具有适当数量的特权，以防止对敏感数据的不必要访问。

With that said, what are the major advantages associated with headless CMSs? More importantly, when should you consider using one?

如此说来，无头CMS的主要优势是什么？ 更重要的是，您何时应该考虑使用它？

无头CMS的优势 (Advantages of Headless CMSs)

Perhaps the biggest and most obvious advantage associated with headless CMS architecture is the fact that it offers great flexibility and control to developers. You can control virtually every aspect of development, handle how data is managed, how content is stored in the back end and even decide on the best possible front-end solution for your needs.

与无头CMS架构相关的最大，最明显的优势也许是它为开发人员提供了极大的灵活性和控制力。 您几乎可以控制开发的各个方面，处理如何管理数据，如何在后端存储内容，甚至可以决定满足您需求的最佳前端解决方案。

With such flexibility, coupled with the fact that every headless CMS comes with its own API for managing calls to and from the back end, you can save a good deal of development time. It’s easier to reuse existing modules, push updates and bug fixes and perform other similar tasks when working with a headless CMS.

有了这种灵活性，再加上每个无头CMS都有其自己的API，该API可以管理往返于后端的调用，因此您可以节省大量的开发时间。 使用无头CMS时，更容易重用现有模块，推送更新和错误修复以及执行其他类似任务。

Additionally, it’s worth noting that applications and websites built atop a headless CMS architecture tend to be easier to scale. A high level of scalability is an obvious advantage. The back end is already separated from the front end, so the downtime for the end users is minimized.

此外，值得注意的是，在无头CMS架构之上构建的应用程序和网站往往更易于扩展。 高级别的可伸缩性是一个明显的优势。 后端已经与前端分离，因此最终用户的停机时间得以最小化。

Beyond that, a headless CMS is generally compatible with most platforms, as the front end in itself is missing and can be integrated as per the user’s needs. Since there’s no content publishing solution native to a headless CMS, chances of DDoS attacks are reduced as well.

除此之外，无头CMS通常与大多数平台兼容，因为缺少前端本身，并且可以根据用户需求进行集成。 由于没有无头CMS固有的内容发布解决方案，因此也减少了DDoS攻击的机会。

为什么您可能将WordPress用作无头CMS (Why You Might Use WordPress as a Headless CMS)

We’ve seen the various advantages that headless CMSs bring to the table.

我们已经看到了无头CMS带来的各种优势。

In general, a headless CMS is preferable in cases where a traditional CMS may not fit in, or be too restrictive in nature. Take, for example, the case of mobile development. You can easily use API calls in a headless CMS to deliver content to an iOS or Android platform. Similarly, you can make use of JavaScript frameworks in your apps and rely on headless CMS architecture for pushing content to various platforms.

通常，无头CMS在传统CMS可能不适合或本质上限制性太强的情况下更为可取。 以移动开发为例。 您可以轻松地在无头CMS中使用API​​调用，以将内容传递到iOS或Android平台。 同样，您可以在应用程序中使用JavaScript框架，并依靠无头CMS架构将内容推送到各种平台。

Obviously, for smaller and simplified projects, a traditional CMS is still the way to go. However, for cases where you need greater control over the back end, and wish to employ API calls to push your content to various platforms, or even wish to integrate a custom front-end mechanism totally independent of the back end (or just do not wish to have a front-end solution at all), a headless CMS is an ideal fit.

显然，对于较小的简化项目，传统的CMS仍然是要走的路。 但是，如果您需要对后端进行更好的控制，并且希望使用API​​调用将您的内容推送到各种平台，或者甚至希望集成完全独立于后端的自定义前端机制(或者不这样做)，希望完全有一个前端解决方案)，无头CMS非常适合。

In terms of using WordPress as a headless CMS, it already has REST API built in, which means we have the API part sorted. Furthermore, we can make use of the familiar WordPress back end to manage the content.

就将WordPress用作无头CMS而言，它已经内置了REST API，这意味着我们已经对API部分进行了排序。 此外，我们可以利用熟悉的WordPress后端来管理内容。

Obviously, this means with just a few basic steps, we can have our own headless CMS in the form of WordPress. Considering the fact that WordPress is highly popular, using it as a headless CMS also implies that our CMS can perform well on a varied range of hardware and software combinations and also be under regular maintenance and security updates.

显然，这意味着只需几个基本步骤，我们就可以使用WordPress形式的无头CMS。 考虑到WordPress非常受欢迎的事实，将其用作无头CMS也意味着我们的CMS可以在各种硬件和软件组合上表现良好，并且可以进行定期维护和安全更新。

While there are various headless CMS platforms and options out there, and many of them are really amazing in their own right, WordPress still has one very common aspect in its favor. It has been around for a good while now, and requires just a simple MySQL and PHP stack to run. You can cut down on overhead costs and cloud storage bills by making use of WordPress over other headless CMSs that may otherwise have a bulkier set of requirements.

尽管有各种各样的无头CMS平台和选项，其中许多本身确实很棒，但WordPress仍然具有一个非常普遍的方面。 它已经存在了很长一段时间，只需要一个简单MySQL和PHP堆栈即可运行。 您可以通过在其他无头CMS上使用WordPress来减少管理费用和云存储费用，否则这些CMS可能会有更多的要求。

使用WordPress作为无头CMS (Using WordPress as a Headless CMS)

WordPress has three major parts:

WordPress具有三个主要部分：

• the database, where the content is stored
  存储内容的数据库
• the admin panel to manage the content (API)
  管理面板来管理内容(API)
• the HTML view, or front end, to display the content.
  HTML视图或前端以显示内容。

Naturally, as a headless CMS, the last option is of little use to us. When using WordPress as a headless CMS, content is treated merely as data.

自然，作为无头CMS，最后一个选择对我们没有多大用处。 当使用WordPress作为无头CMS时，内容仅被视为数据。

第一步：设置WordPress (Step One: Setting up WordPress)

It’s important that you use a fresh installation of WordPress. Considering the fact that there are various tutorials out there on how to install WordPress, and the official documentation too is rather detailed on this step, we will be skipping the installation details here.

使用全新安装的WordPress非常重要。 考虑到事实上有很多关于如何安装WordPress的教​​程，并且官方文档在这一步上也相当详细，因此我们将在此处跳过安装细节。

Furthermore, most web hosting providers nowadays offer one-click install feature for WordPress. Just bear in mind: change the database and table prefixes from the default wp_ values to something else, and use strong passwords!

此外，当今大多数网络托管提供商都为WordPress提供一键安装功能。 请记住：将数据库和表前缀从默认wp_值更改为其他值，并使用强密码！

第二步：空白主题 (Step Two: the Blank Theme)

Remember that we mentioned the front end has little role to play in a headless CMS? WordPress has a big ecosystem that’s famous for its amazing themes. But we don’t need any of that. With that said, though, WordPress does need a theme to run, even if the front end isn’t going to be used. A good idea, therefore, is to just use a blank theme.

还记得我们提到的前端在无头CMS中几乎没有作用吗？ WordPress有一个庞大的生态系统，以其惊人的主题而闻名。 但是我们不需要任何。 话虽如此，但即使不使用前端，WordPress确实也需要运行主题。 因此，一个好主意是仅使用空白主题。

When working on WordPress as a headless CMS, all that’s needed is to add an index.php file and a style.css file specifying the theme name, author details, etc. for WordPress to work with.

当使用无头CMS处理WordPress时，所需要做的只是添加index.php文件和style.css文件，指定主题名称，作者详细信息等，以供WordPress使用。

Your theme’s index.php file should redirect users to the static site’s home page, thereby ensuring that the back end is untouched and the front end is done away with. Here’s a sample JS redirect code that you can put in the index.php file (or you can choose to use any code snippet of your own):

您主题的index.php文件应将用户重定向到静态站点的主页，从而确保不影响后端，并消除前端。 这是一个示例JS重定向代码，您可以将其放入index.php文件中(或者您可以选择使用自己的任何代码段)：

<script type="text/javascript">
  window.location = 'http://homepage.com';
</script>

Once the blank theme is ready and uploaded to the themes directory, activate it in WordPress admin. That’s it, we’re one step closer to using WordPress as a headless CMS.

准备好空白主题并将其上传到themes目录后，在WordPress管理员中将其激活。 就是这样，我们距离将WordPress用作无头CMS仅一步之遥。

第三步：处理API请求 (Step Three: Working with API Requests)

Now, as a final step, we just need to make AJAX requests to consume the API calls. We’ve already placed a blank theme in place, so now we can make data requests in order to work with content the way we wish to.

现在，作为最后一步，我们只需要发出AJAX请求即可使用API​​调用。 我们已经放置了一个空白主题，因此现在我们可以发出数据请求，以便按我们希望的方式处理内容。

There are various ways of doing so. The easiest is to probably use the Fetch API that can handle asynchronous data requests. You can learn more about the Fetch API here.

这样做的方法有很多种。 最简单的方法是使用可以处理异步数据请求的Fetch API。 您可以在此处了解有关Fetch API的更多信息。

However, certain older web browsers still don’t play well with the Fetch API, so it’s a good idea to use a polyfill that can create the fetch API function in case the browser doesn’t natively support it.

但是，某些较旧的Web浏览器仍无法在Fetch API上很好地使用 ，因此，最好使用可以创建fetch API函数的polyfill ，以防浏览器本身不支持它。

Here’s what our code may look like:

这是我们的代码可能如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>Using WordPress as Headless CMS</title>
</head>
<body>
  <div id="posts-list"></div>

  <!-- polyfill -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js" charset="utf-8"></script>

  <script type="text/javascript">
    const pContain = document.getElementById('posts-list')
    fetch('http://localhost:8080/wp/wp-json/wp/v2/posts')
// response
      .then(r => r.json())
      .then(posts => {
        posts.map(post => {
          const pDiv = document.createElement('div')
          pDiv.innerHTML = post.title.rendered
          pContain.appendChild(pDiv)
        })
      })
  </script>
</body>
</html>

In the above code, we’re simply working the content via RESTful API calls.

在上面的代码中，我们只是通过RESTful API调用来处理内容。

使用无头WordPress做更多事情 (Doing More with Headless WordPress)

For most practical purposes, you may need to add additional content fields when working with WordPress as a headless CMS. In order to do that, using the popular Advanced Custom Fields (ACF) plugin is a good solution.

出于大多数实际目的，在将WordPress作为无头CMS使用时，您可能需要添加其他内容字段。 为此，使用流行的高级自定义字段 (ACF)插件是一个很好的解决方案。

ACF, as any WordPress developer would tell you, lets you easily add custom fields to your content, which you can then call via and API. You can refer to the ACF documentation for plugin-specific guidelines.

就像任何WordPress开发人员都会告诉您的那样，ACF允许您轻松地向内容添加自定义字段，然后可以通过和API对其进行调用。 您可以参考ACF文档以了解特定于插件的指南。

However, note that when you’re calling custom fields via a RESTful API, you may need to employ the ACF to REST API plugin as well so as to properly structure the calls. This plugin can be used to expose ACF endpoints for use with the WordPress REST API.

但是，请注意，当您通过RESTful API调用自定义字段时，可能需要使用ACF到REST API插件，以正确构造调用。 此插件可用于公开ACF端点，以与WordPress REST API一起使用。

A lesser-known and rarely used WordPress plugin also deserves a special mention here — WordPress Headless. This plugin lets you create a headless WordPress CMS within minutes. It removes the front end and ensures that post permalinks go to the editor, not the view (logged in users only). If you’re trying to quickly get started with development and wish to convert a WordPress installation into a headless CMS, WordPress Headless plugin can do just that without you having to set things up yourself. Obviously, the API calls and other development tasks will still need to be handled by you.

鲜为人知且很少使用的WordPress插件在这里也应特别提及-WordPress Headless 。 此插件可让您在几分钟内创建无头WordPress CMS。 它删除了前端，并确保发布的永久链接进入编辑器，而不是视图(仅登录用户)。 如果您试图快速开始开发并希望将WordPress安装转换为无头CMS，则WordPress无头插件可以做到这一点，而无需您自己进行设置。 显然，API调用和其他开发任务仍将由您处理。

结论 (Conclusion)

When using WordPress as a headless CMS, the general usage scenario involves cases in which you might need to work with content management, such as teams handling their own data in the back end, etc. Should you ever wish to display content on the front end as a dedicated page, or have search engines properly index your site’s content, you’ll have to re-convert WordPress back to a traditional CMS.

当将WordPress用作无头CMS时，一般使用情况涉及您可能需要与内容管理一起使用的情况，例如团队在后端处理自己的数据等。如果您希望在前端显示内容作为专用页面，或者让搜索引擎正确索引您网站的内容，则必须将WordPress重新转换回传统CMS。

For all other headless-usage purposes, this particular model works rather efficiently and you can further tweak it by means of custom fields and other data structures so as to get the desired results.

对于所有其他无头使用目的，此特定模型相当有效，您可以通过自定义字段和其他数据结构对其进行进一步调整，以获得所需的结果。

翻译自: https://www.sitepoint.com/wordpress-headless-cms/