如何使用React创建WordPress主题-趣考网

文章目录[隐藏]

前提条件
创建基本的 WordPress 主题结构
将 React 集成到 WordPress 中
Hello, WordPress and React!
- 确定并启用您的主题
为主题开发 React 组件
如何在 React 中处理 WordPress 数据
在 WordPress 项目中使用 React WordPress 主题
小结

这篇实践文章利用 WordPress 的灵活性和 React 强大的用户界面（UI）进行主题开发。它通过引导您完成创建主题所需的步骤，展示了如何将 WordPress 和 React 整合在一起，从而提升您的 WordPress 项目。

前提条件

要学习本文，您应该具备以下条件：

一个 WordPress 网站。
在计算机上安装 Node.js 和 npm（Node 包管理器）或 yarn

创建基本的 WordPress 主题结构

创建基本的 WordPress 主题结构包括设置一系列文件和目录，WordPress 会使用这些文件和目录将主题的样式、功能和布局应用到 WordPress 网站。

在开发环境中，访问您的网站文件夹。导航到 wp-content/themes 目录。

为您的主题创建一个新文件夹。文件夹名称应该是唯一的，并具有描述性，例如，my-basic-theme。

在主题文件夹中，创建这些重要文件并留空：

style.css – 这是主要的样式表文件。它还包含主题的标题信息。
functions.php – 该文件定义了主题要使用的函数、类、操作和过滤器。
index.php – 这是主模板文件。所有主题都需要使用该文件。

如果不使用 React，还必须创建以下文件。但如果使用 React，我们将在稍后为它们创建组件。

header.php – 包含网站的页眉部分。
footer.php – 包含网站的页脚部分。
sidebar.php – 如果主题包含侧边栏，则包含侧边栏部分。

接下来，打开 style.css，在文件顶部添加以下内容：

/*Theme Name: My Basic ThemeTheme URI: http://example.com/my-basic-theme/Author: Your NameAuthor URI: http://example.comDescription: A basic WordPress theme.Version: 1.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: blog, custom-backgroundText Domain: my-basic-theme*/

该代码片段是 WordPress 主题 style.css 文件的标题部分，包含主题名称、作者详细信息、版本和许可证等重要元数据。它可以帮助 WordPress 在仪表盘中识别和显示主题，包括主题描述和分类标签。

将 React 集成到 WordPress 中

将 React 集成到 WordPress 主题中，可以使用 React 基于组件的架构在 WordPress 网站中构建动态的交互式用户界面。要集成 React，您需要使用 @wordpress/scripts 包。

这是一组专为 WordPress 开发定制的可重用脚本。WordPress 提供它是为了简化配置和构建过程，尤其是在 WordPress 主题和插件中集成 React 等现代 JavaScript 工作流时。

该工具包封装了常用任务，使在 WordPress 生态系统中使用 JavaScript 进行开发变得更加容易。

调整主题

有了基本的 WordPress 主题结构，您就可以调整主题了。

在主题目录中，将以下代码粘贴到 functions.php 文件中：

<?phpfunction my_react_theme_scripts() {wp_enqueue_script(\'my-react-theme-app\', get_template_directory_uri() . \'/build/index.js\', array(\'wp-element\'), \'1.0.0\', true);wp_enqueue_style(\'my-react-theme-style\', get_stylesheet_uri());}add_action(\'wp_enqueue_scripts\', \'my_react_theme_scripts\');

functions.php 文件将 React 与您的 WordPress 主题集成在一起。它使用 wp_enqueue_script 和 wp_enqueue_style 函数为主题添加 JavaScript 和层叠样式表（CSS）文件。

wp_enqueue_script WordPress 函数需要几个参数：

处理名（”my-react-theme-app“），用于唯一标识脚本
脚本文件的路径
依赖关系数组 array(\'wp-element\')，表示脚本依赖于 WordPress 的 React 封装器（\'wp-element\'）。
版本号（ \'1.0.0\' ）
位置 true，表示脚本应加载到 HTML 文档的页脚，以提高页面加载性能。
wp_enqueue_style 函数接收以下参数：
句柄名称 \"my-react-theme-style\" ，用于唯一标识样式表
源 get_stylesheet_uri()，用于返回主题主样式表（style.css）的 URL，确保应用主题样式
add_action 元素，用于将自定义函数 \"my_react_theme_scripts\" 与特定动作（\"wp_enqueue_scripts\"）挂钩。这样可以确保在 WordPress 准备呈现页面时正确加载 JavaScript 和 CSS。

这段代码可确保 React 应用程序的 JavaScript 编译文件（位于 /build/index.js 中）和主题的主样式表与主题一起加载。

/build directory 通常是使用 create-react-app 或 webpack 等工具编译 React 应用程序时产生的，这些工具会将 React 代码捆绑成可用于生产的、经过精简的 JavaScript 文件。

这种设置对于将 React 功能集成到 WordPress 主题中至关重要，可以在 WordPress 网站中实现动态的、类似应用程序的用户体验。

接下来，更新 index.php 文件的内容：

<html ><meta charset=\"\"><body >

index.php 文件中的代码定义了 WordPress 主题的基本 HTML 结构，包括供 WordPress 插入必要页眉（wp_head）和页脚（wp_footer）的钩子，以及一个带有 ID app 的 div，其中安装了 React 应用程序。

使用 @wordpress/scripts 设置 React

打开终端，进入主题目录：

cd wp-content/themes/my-basic-theme

初始化一个新的 Node.js 项目：

npm init -y

安装@wordpress/scripts 和 @wordpress/element：

npm install @wordpress/scripts @wordpress/element --save-dev

请注意，这一步可能需要几分钟。

修改 package.json 文件，加入 start 和 build 脚本：

\"scripts\": {\"start\": \"wp-scripts start\",\"build\": \"wp-scripts build\"},

\'@wordpress/scripts\' 用于启动一个用于开发目的的热重载开发服务器（start），并将 React 应用程序编译成用于生产的静态资产（build）。

创建 React 项目

为主题中的 React 源文件创建一个名为 src 的新目录。

在 src 文件夹中创建两个新文件：index.js 和 App.js。

将以下代码放入 index.js：

import { render } from \'@wordpress/element\';import App from \'./App\';render(, document.getElementById(\'app\'))

上面的代码从 @wordpress/element 和 App 组件导入了 render 函数。然后，将 App 组件挂载到文档对象模型 (DOM)。

接下来，将此代码粘贴到 App.js 文件中：

import { Component } from \'@wordpress/element\';export default class App extends Component {render() {return ( Hello, WordPress and React!
{/* Your React components will go here */}
);}}

确定并启用您的主题

启用主题：

使用 npm start 运行开发服务器。

在 WordPress 控制面板中激活新主题，方法是导航到 “外观“>”主题“，找到主题并单击 “启用“。

确保 React 项目的构建过程配置正确，以输出到正确的主题目录，从而允许 WordPress 渲染 React 组件。

访问 WordPress 网站的前端查看实时变化。

主页上会显示新创建的基于 React 的 WordPress 主题，并带有 “Hello, WordPress and React” 的信息。

准备好部署主题后，运行：npm run build。这条命令会将 React 应用程序编译成静态资产，并将其放在主题文件夹内的构建目录中。

为主题开发 React 组件

接下来，采用基于组件的方法，在 WordPress 主题中使用特定组件（如页眉）扩展基本的 React 设置。

创建页眉组件

在主题的 src 目录中，为标题组件创建一个新文件。为文件命名，如 Header.js，并添加以下代码：

import { Component } from \'@wordpress/element\';class Header extends Component {render() {const { toggleTheme, darkTheme } = this.props;const headerStyle = {backgroundColor: darkTheme ? \'#333\' : \'#EEE\',color: darkTheme ? \'white\' : \'#333\',padding: \'10px 20px\',display: \'flex\',justifyContent: \'space-between\',alignItems: \'center\',};return (My WP Theme
);}}export default Header;

这段代码使用 \"@wordpress/element\" 定义了一个标题组件，可根据 darkTheme prop 动态调整页眉样式。它包含一个按钮，可通过调用作为道具传递的 toggleTheme 方法在浅色和深色主题之间切换。

创建页脚组件

在主题的 src 目录中，为页脚组件创建一个新文件。给它取一个名字，例如 Footer.js，然后添加以下代码：

import { Component } from \'@wordpress/element\';class Footer extends Component {render() {const { darkTheme } = this.props;const footerStyle = {backgroundColor: darkTheme ? \'#333\' : \'#EEE\',color: darkTheme ? \'white\' : \'#333\',padding: \'20px\',textAlign: \'center\',};return ( style={footerStyle}>© {new Date().getFullYear()} My WP Theme
);}}export default Footer;

此代码定义了一个页脚组件，该组件可根据 darkTheme prop 渲染具有动态样式的页脚，并显示当前年份。

更新 App.js 文件

要使用新的页眉和页脚，请用以下代码替换 App.js 文件的内容：

import { Component } from \'@wordpress/element\';import Header from \'./Header\';import Footer from \'./Footer\';export default class App extends Component {state = {darkTheme: true,};toggleTheme = () => {this.setState(prevState => ({darkTheme: !prevState.darkTheme,}));};render() {const { darkTheme } = this.state;return (               
);}}

开发构建过程会监控更改并重新编译代码，该过程应仍处于激活状态。因此，你的最后一个版本的模板应该与此相似：

显示基于 React 的 WordPress 主题（包括页眉和页脚）的主页。

如何在 React 中处理 WordPress 数据

在 React 应用程序中集成 WordPress 内容可在 WordPress 的强大内容管理功能和 React 的动态用户界面设计之间架起一座无缝的桥梁。WordPress REST API 可以实现这一点。

要访问 WordPress REST API，请通过更新固定链接设置来启用它。在 WordPress 管理仪表板上，导航到设置 > 固定链接。选择 “文章名” 选项或 “朴素” 以外的任何选项，然后保存更改。

在主题 src 目录下新建一个名为 Posts.js 的文件，并添加以下代码：

import { Component } from \'@wordpress/element\';class Posts extends Component {state = {posts: [],isLoading: true,error: null,};componentDidMount() {fetch(\'http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts\').then(response => {if (!response.ok) {throw new Error(\'Something went wrong\');}return response.json();}).then(posts => this.setState({ posts, isLoading: false })).catch(error => this.setState({ error, isLoading: false }));}render() {const { posts, isLoading, error } = this.state;if (error) {return Error: {error.message}
;}if (isLoading) {return Loading...
;}return ({posts.map(post => (
))}
);}}export default Posts;

根据 WP 部署名称（即您安装 WP 的文件夹）的不同， fetch(\'http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts\') URL 可能略有不同。或者，您也可以从 DevKinsta 面板获取网站主机名，然后添加后缀 /wp-json/wp/v2/posts。

Posts 组件是这种集成的一个典型例子，它演示了使用 WordPress REST API 获取和管理 WordPress 数据（特别是文章）的过程。

通过在组件的生命周期方法（ componentDidMount ）中发起网络请求，该组件可以高效地从 WordPress 网站获取文章并将其存储在自己的状态中。这种方法强调了一种将 WordPress 数据（如页面或自定义文章类型）动态整合到 React 组件中的模式。

要使用新组件，请用以下代码替换 App.js 文件的内容：

import { Component } from \'@wordpress/element\';import Header from \'./Header\';import Footer from \'./Footer\';import Posts from \'./Posts\'; // Import the Posts componentexport default class App extends Component {state = {darkTheme: true,};toggleTheme = () => {this.setState(prevState => ({darkTheme: !prevState.darkTheme,}));};render() {const { darkTheme } = this.state;return ( {/* Render the Posts component */}
);}}

您现在可以查看主题的最新最终版本。除了页眉和页脚，它还包括一个动态内容区域，用于展示文章。

主页显示基于 React 的 WordPress 最终主题，包括文章。

在 WordPress 项目中使用 React WordPress 主题

要将基于 React 的主题集成到 WordPress 项目中，首先要利用 @wordpress/scripts 等软件包将 React 代码转换成与 WordPress 兼容的格式。该工具简化了构建过程，让你可以将 React 应用程序编译成 WordPress 可以启动的静态资产。

使用 @wordpress/scripts 提供的 npm 命令，构建主题非常简单。在主题目录下运行 npm run build ，即可将 React 代码编译成静态 JavaScript 和 CSS 文件。

然后，将这些编译好的资产放入主题中的相应目录，确保 WordPress 可以正确加载和呈现 React 组件作为主题的一部分。集成完成后，您就可以像激活其他主题一样激活 React WordPress 主题，立即为 WordPress 网站带来类似应用程序的现代用户体验。

小结

通过使用 React 强大的用户界面功能创建主题并将其集成到 WordPress 中，您可以释放创建灵活、高度交互和以用户为中心的网络体验的潜力。

本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！

THE END