hmoban 如何使用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 Theme Theme URI: http://example.com/my-basic-theme/ Author: Your Name Author URI: http://example.com Description: A basic WordPress theme. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blog, custom-background Text 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 文件中：
<?php
function 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 >