WordPress divi主题

WordPress 用户的 React JS:基本介绍

by | May 18, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

15 多年来,WordPress 一直是最流行和最完整的 CMS 解决方案,可让您构建从单页产品组合到成熟电子商务平台的任何内容。 WordPress 将 PHP 用于其所有后端基础设施,例如更新、API、身份验证、数据库层和大部分前端。 然而,与其他流行的框架一样,WordPress 最近也被迫发展。

google广告开户

鉴于 JavaScript 应用程序在 Web 以及桌面和本机移动应用程序中不断增长的潜力和力量,WP REST API 试图弥合 WordPress 的 PHP 核心的遗留问题和 JavaScript 的兴起之间的差距。 我相信这是 WordPress 迈出的一大步,原因有两个:

  1. 现有的 WP 网站可以使用 React/Vue 或其他前端库来创建更好的 UI 体验。
  2. 相反,Web 开发人员可以获得行业标准的无头 CMS,可以轻松地与他们选择的堆栈集成。

这对每个人来说都是双赢的局面。 在本文中,我们将集中精力为 WordPress 后端构建 React 前端。 但首先,让我们看一下 WordPress REST API。

WordPress REST API 基础

WP REST API 的开发始于几年前,最初被设计为一个独立的功能插件。 代号为“Clifford”的 WordPress v4.4 将 REST API 的实际基础架构引入了 WordPress 的核心。 实际端点出现在 WordPress v4.7 中,代号为“Vaughan”。 WP API 让您可以将 WordPress 用作易于使用、稳定且对 JSON 友好的无头 CMS。

JSON

如果您要将 WordPress 与 JavaScript 堆栈集成,JSON 是首选格式。 JSON 与 XML 类似,因为它使我们能够使用非常易读的语法有效地传输数据。

JSON 实际上是一个字符串,它包含 JavaScript 对象的基于文本的表示形式。 它将数据存储在一组键值对中。 一个 WP 帖子的简单 JSON 示例如下所示:

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

使用 WP REST API 的完整 JSON 响应通常包含有关帖子的其他信息,例如元数据。 您拥有为应用程序创建前端主题或插件所需的一切。

终点

WordPress 端点对公众来说非常容易访问。 如果您运行的是最新版本的 WordPress,则只需简单地追加 /wp-json/wp/v2 到 URL 的末尾。 例如,您可以访问基本端点 127.0.0.1/wp-json/wp/v2 如果您在本地主机中设置了 WordPress 实例。 如果要美化输出,可以使用 JSON 查看器扩展,使 JSON 在浏览器上看起来很漂亮。

屏幕上显示的数据本质上是 JSON 格式的内容和元信息。 您在这里所做的是定义一个路由并要求您的浏览器为您获取数据。

我们所说的路线是什么意思? 路由是映射到特定方法的 URL。 WordPress 核心读取路由并理解每个“/”代表需要遵循的特定路径或参数。

WordPress divi主题

例如,端点可以是 ‘/wp-json/wp/v2/posts/1’,您在其中请求 id 等于 1 的帖子。WordPress API 很有用,因为它们非常广泛。 这转化为从您的网站获取任何数据并将其转换为端点的能力。 WordPress 中几乎所有的核心功能都受支持,所有即将推出的功能也将受支持。 以下是编写本教程时支持的 WordPress API 列表:

资源 基本路线
帖子 /wp/v2/帖子
发布修订 /wp/v2/修订
类别 /wp/v2/类别
标签 /wp/v2/标签
页面 /wp/v2/pages
评论 /wp/v2/评论
分类法 /wp/v2/分类法
媒体 /wp/v2/媒体
用户 /wp/v2/用户
帖子类型 /wp/v2/类型
发布状态 /wp/v2/状态
设置 /wp/v2/设置

主题开发人员以及插件开发人员可以为其应用程序创建自定义端点。 如果您想查看所有可用的不同端点,可以下载 Postman 之类的应用程序。 这将为您提供一个专门用于探索 API 的 GUI。 此外,您可以直接对第三方应用程序进行 API 调用,而无需依赖插件。

让我们举个例子。 上传文件并维护其多个版本是任何现代 Web 应用程序不可或缺的要求。 在媒体文件的情况下尤其如此。 在 WordPress 中,有大量可用的插件可以为您做到这一点; 但是,您可能需要调用 WordPress 服务器才能使用它们。

使用 WP API,媒体处理逻辑可以从 WordPress 中抽象出来。 您可以直接从前端进行所有第三方 API 调用,这在关注点分离方面非常有用。 您可以使用 Cloudinary 之类的库来动态处理图像和其他媒体文件,然后将它们上传到云端。 上传后,图像的 URL 可以存储在 WP 后端。 选项是无穷无尽的,您可以以任何您认为合适的方式将这些部分组合在一起。

现在让我们看看如何将 WordPress 后端与 React 连接起来。

React 入门

React 是一个声明式前端库,用于在 Web 上构建用户界面和交互式应用程序。 使用 React,您可以编写更小的独立的可重用代码片段,称为组件。 让我们通过创建一个 React 项目来创建我们的第一个组件。

创建 React 项目最流行的方法是运行 create-react-app。 CRA 为学习 React 提供了一个舒适的环境,如果您是初学者,它是开始构建新的单页应用程序的最佳方式。 它设置您的开发环境,以便您可以使用最新的 JavaScript 功能,例如 ES6 和 webpack。 此外,create-react-app 提供了良好的开发人员体验并优化了您的应用程序以进行生产。

开始反应

您需要在您的机器上安装 Node >= 8.x 和 npm >= 5.2。 要创建项目,请运行以下命令:


npx create-react-app wp-react-demo

fiverr建站WordPress程序员

上面的命令为我们命名的 react 应用程序创建了一个样板模板 wp-react-demo.


cd wp-react-demo
npm start

如果一切顺利,它应该能够在 http://localhost:3000/ 的开发服务器上为新创建的应用程序提供服务。

如果你想看看 create-react-app 生成的目录结构,它看起来是这样的:

.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock

独立站选品工具

公共目录包含启动应用程序所需的所有资产。 src 目录包含我们将要处理的所有 JavaScript 文件,您将在其中花费大量时间。

当您访问 localhost:3000 时,会加载 index.html 文件。 如果你打开 public/index.html 文件,那里什么都没有。 但是你会在中间的某个地方找到这条线:

<div id="root"></div>

这是 React 将组件树渲染到应用程序根目录的起点。

这意味着什么? 前往 src 目录并打开 index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

React 尝试在文档中查找 id 为“root”的元素,然后注入 组件进入根目录。 实际上,App 组件被渲染,这就是旋转的 React 徽标的来源。 您可以通过打开 src/App.js 文件。

高质量外链购买
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

这基本上是组件的样子。 每个组件都会呈现您 UI 的一部分。 您可以在另一个组件中组合一个组件,这就是您获得这样一个组件树结构的方式:

反应组件树

如果您想知道为什么我们能够在 render() 中使用 HTML,这就是 JSX 的魔力。 JSX 是 JavaScript 的语法扩展,允许您在 JavaScript 文件中使用纯 HTML。 您可以在官方文档中阅读更多相关信息。

我将删除所有 HTML 内容,然后将其替换为

像这样的标签:

JasperAI 10000字免费额度试用
<div>
<h2> WordPress Blog </h2>
</div>

React 组件和状态

组件是 React 中的构建块。 每个组件可以有

  1. 通常称为道具的输入(或多个输入)。
  2. 组件本地的状态
  3. 渲染某些东西(例如:render())或处理一些业务逻辑的方法

我们将构建一个组件来检索所有可用的帖子并将它们显示给用户。 为此,我们将首先为类编写一个构造函数并在构造函数中初始化状态:

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

状态是一个 JSON 对象。 我们宣布了一个 标题、日期和内容 构造函数内部的属性。 标题和内容是对象,而日期是数组。

获取数据并更新状态

现在,当组件挂载时,它需要从 API 中获取帖子数据并将其存储在状态中。 帖子数据可在以下 URL 中获得:


http://localhost/wp-json/wp/v2/posts/

WordPress备份工具updrafplus

那么,我们把这个逻辑放在哪里呢? 构造函数听起来像是一个不错的选择,因为它会在创建组件时被调用,但它不是最佳选择。 相反,我们将使用称为生命周期方法的东西。 componentDidMount() 生命周期方法在组件挂载后被调用。

componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here         
       })
       .catch((error) => {
         console.error(error);
       });         
 }

我们正在使用 fetch,它是 JavaScript 中用于进行 API 调用的事实上的标准。 fetch() 的参数是我们要获取的 URL。 Fetch 返回一个 Promise,我们可以通过 .then()s 链对其进行评估。 第一个 then 块将响应转换为 json 格式,以便我们可以将其置于状态中。

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

那么,这里发生了什么? 首先,我们从 responseJson 对象中提取标题、日期和内容字段。 您在此处看到的奇怪语法称为解构赋值语法。 您可能已经知道,WP API 会返回很多我们不需要的信息。 解构赋值语法可以将对象中的值解包到不同的变量中。

接下来,我们使用 this.setState() 来更新组件的状态。 setState() 方法接受一个对象作为参数,该参数将成为更新的状态。

渲染我们的 WordPress 帖子

render 方法返回我们之前讨论过的 JSX。 与纯 HTML 不同,您实际上可以将表达式嵌入 JSX。 例如,如果您需要渲染获取的帖子的标题而不需要其他任何内容,您可以这样做:

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

尝试一下!

同样,您可以通过嵌入来呈现日期 {this.state.date}. 但是,存储在状态中的内容包括实际的 HTML。 由于 HTML 是从服务器返回的,因此可以安全地假设渲染它没有危险。 因此,要呈现内容,您需要危险地设置InnerHTML 属性,如下所示:

<div
    className= "content"
    dangerouslySetInnerHTML={{ __html:...
5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题