本教程文章利用 WordPress 的灵活性和 React 强大的用户界面 (UI) 进行主题开发。通过引导您完成创建主题所需的步骤，演示 WordPress 和 React 集成如何提升您的 WordPress 项目。
先决条件
要遵循本教程您需要：
一个 WordPress 网站。 Kinsta 提供多种设置选项，包括：使用 DevKinsta 进行本地开发、通过易于使用的 MyKinsta 仪表板进行开发，或通过 Kinsta API 以编程方式进行开发。
计算机上安装了 Node.js 和 npm（Node 包管理器）或 yarn
创建 WordPress 主题的基本结构
创建基本的 WordPress 主题结构涉及设置一系列文件和目录，WordPress 使用这些文件和目录将主题的样式、功能和布局应用到 WordPress 网站。
在 DevKinsta 环境中，我们导航到站点文件夹。让我们转到 wp-content/themes 文件夹。
让我们为主题创建
一个新文件夹。文件夹名称必须唯一且具有描述性，例如 my-basic-theme。
在主题文件夹中，创建这些必需的文件并将其留空：
style.css：这是主样式表文件。它还包含主题标题信息。
functions.php：此文件定义主题将使用的功能、类、操作和过滤器。
index.php：这是模板的主文件。所有主题都需要它。
如果您决定不使用 React，您还需要创建以下文件。但是使用 React 我们稍后会为这些文件创建组件。
header.php：
包含网站的标题部分
footer.php：包含网站的页脚部分。
sidebar.php – 用于侧边栏部分（如果您的主题包含侧边栏）。
因此，让我们打开 style.css 并将以下内容添加到文件顶部：
主题名称
我的基本主题
主题 URI：http://example.com/my-theme-base/
作者：你的名字
作者 URI：http://example.com
描述：一个基本的 WordPress 主题。
版本：1.0
许可证：GNU 通用公 电报号码列表 共许可证 v2 或更高版本
许可证 URI：http://www.gnu.org/licenses/gpl-2.0.html
标签：博客，自定义背景
文本域：my-base-theme
*/
此代码片段是 WordPress 主题 style.css 文件的标 试用期合同与正式合同的区别 题部分，包含主题名称、作者详细信息、版本和许可证等基本元数据。帮助 WordPress 在仪表板中识别并显示您的主题，包括其描述和分类标签。
将 React 集成到 WordPress
将 React 集成到 WordPress 主题中，您可以使用 React 基于组件的架构在 WordPress 网站内构建动态和交互式用户界面。要集成 React，您需要使用 @wordpress/scripts 包。
这是可重复使
用的脚本集合，专为 WordPress 开发而设计。 WordPress 提供它来简化设置和构建过程，特别是在将现代 JavaScript 工作流程（如 React）集成到 WordPress 主题和插件中时。
该工具集包含常见任务，使得在 WordPress 生态系统中使用 JavaScript 进行开发变得更加容易。
调整主题
现在我们有了 WordPress 主题 巴西商业名录 的基本结构，我们可以对其进行调整。
在主题文件夹中，将以下代码粘贴到 functions.php 文件中：
<?php
函数 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（））;
}
添加动作（’wp_enqueue_scripts’，’my_react_theme_scripts’）；
functions.php 文件将 React 与您的 WordPress 主题集成。使用 wp_enqueue_script 和 wp_enqueue_style 函数将 JavaScript 文件和层叠样式表 (CSS) 添加到您的主题。
WordPress wp_enqueue_script 函数需要几个参数：
句柄名称（’my-react-theme-app’），唯一标识脚本
脚本文件的路径
依赖项数组 array(‘wp-element’)，表示该脚本依赖于 React 的 WordPress 包装器（’wp-element’）。
版本号（’1.0.0’）
真实位置，表示脚本应该加载到 HTML 文档的页脚中，以提高页面加载性能
wp_enqueue_style 函数接受以下参数：
句柄名称“my-react-theme-style”，用于唯一标识样式表
get_stylesheet_uri() 源，返回主题主样式表 (style.css) 的 URL，并确保应用主题样式
add_action 元素，将自定义函数“my_react_theme_scripts”挂接到特定操作（“wp_enqueue_scripts”）。这确保了 JavaScript 和 CSS