创建一个带有前景的无头WordPress网站

基于React的框架的Frontity简化了快速无头WordPress网站的创建。将其视为WordPress的Next.js。尽管无头WordPress可能现在是一个利基市场，但Frontity的展示突显了其日益普及，以CNBC Africa和Forbes Africa等著名网站为特色。它的文档和教程主要集中在无头博客上。

本指南详细介绍了创建基本的前线站点并自定义其默认火星主题（在后续文章中）。我们将使用Frontity框架掩盖设置无头WordPress网站。

目录

• 先决条件和要求
• 了解界限
• 界面站点安装：
  • 步骤1：项目创建
  • 步骤2：选择火星主题
  • 步骤3：项目安装
  • 步骤4：目录更改和服务器重新启动
• WordPress网站设置：
  • 实现漂亮的永久链接
• 将界限连接到WordPress：
  • 步骤1：菜单更新
  • 步骤2：项目文件夹结构
  • 步骤3：样式修改
• 部署到Vercel：
  • 步骤1：构建生产版本
  • 步骤2：Vercel帐户创建
  • 步骤3：创建vercel.json
  • 步骤4：部署
• 结论
• 资源

这不是专家指南，而是实用的演练。有关全面的详细信息，请咨询Frontity的官方文件。

先决条件和要求

建议熟悉React和ES6 JavaScript。其他要求（详细介绍了前线文档）：

• HTML和CSS的能力
• 命令行经验
• node.js服务器
• 代码编辑器

了解界限

界限是专门为WordPress设计的React框架。它具有自己的州经理和CSS样式解决方案。它以两种模式运行：

• 解耦模式： Frontity从WordPress REST API获取数据，将最终的HTML作为同构React应用程序提供。主要领域指向前线，以及WordPress的子域。
• 嵌入式模式：前线主题取代了WordPress主题。一个插件向HTML的Frontity Server提出了内部HTTP请求。主要域指向WordPress。

Frontity的内置AMP功能优化了页面速度。

额叶站点安装

这涉及建立一个界限项目和一个WordPress站点（作为数据源）。

首先，确保安装node.js和npm：

节点 -  version
npm- version
NPM安装NPM@最新-G＃升级NPM（如果需要）

步骤1：创建一个界项目

使用前线CLI：

 NPX界限创造了我的额度

步骤2：选择火星主题

界限提供了两个主题；选择mars-theme 。

步骤3：跨性项目安装

Frontity Server安装项目及其依赖关系。

步骤4：更改目录并重新启动开发服务器

导航到项目目录并启动服务器：

 CD My-Frontity
NPX前线开发＃或纱线前景开发

访问http://localhost:3000 。

WordPress网站安装

设置WordPress站点（本地或现有）。确保可以访问WordPress REST API（例如， http://mytestsite.local/wp-json ）。

启用漂亮的永久链接

在设置>永久链接中激活漂亮的永久链接（帖子名）。

连接前线与WordPress

更新frontity.settings.js ：

 // Frontity.settings.js
const设置= {
  ...，，
  软件包：[
    ...，，
    {
      名称：“@Frontity/wp-source”，
      状态： {
        来源： {
          API：“ http：//your-wordpress-site.com/wp-json” //用您的URL替换
        }
      }
    }
  这是给出的
}

重新启动服务器。

步骤1：更新菜单

按照火星主题的结构，将您的菜单项添加到frontity.settings.js 。

步骤2：项目文件夹结构

了解项目的结构： node_modules ， package.json ， frontity.settings.js ， packages/mars-theme 。

步骤3：修改样式

界限使用情感进行造型。根据主题组件中需要修改样式。

部署到Vercel

步骤1：创建生产版本

NPX界限构建

步骤2：Vercel帐户创建

创建一个Vercel帐户并登录：

 NPX Vercel登录

步骤3：创建vercel.json

创建vercel.json ：

 {
  “版本”：2，
  “构建”：[
    {
      “ src”：“ package.json”，
      “使用”：“@Frontity/现在”
    }
  这是给出的
}

步骤4：部署

NPX Vercel

结论

Frontity为构建无头WordPress站点提供了用户友好的方法。

资源

• 界限文档
• 前线博客
• 相关的YouTube教程（搜索“界教程”）

以上是创建一个带有前景的无头WordPress网站的详细内容。更多信息请关注PHP中文网其他相关文章！