创建基本的 WordPress 主题结构
创建基本的 WordPress 主题结构包括设置一系列文件和目录，WordPress 使用这些文件和目录将主题的样式、功能和布局应用到 WordPress 网站。
1.在你的网站运行环境中，访问站点的文件夹。导航到wp-content/themes 目录。
2.给主题创建一个新文件夹。文件夹名称应该是唯一的且具有描述性——例如my-basic-theme 。
3.在主题的文件夹中，创建这些基本文件并将其留空：
如果不使用 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 主题的基本结构，可以对主题进行调整。
1.在主题目录下，将以下代码粘贴到 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');function.php 文件 将 React 与你的 WordPress 主题整合。它使用wp_enqueue_script 和wp_enqueue_style 功能将 JavaScript 和级联样式表 ( CSS ) 文件添加到您的主题。
WordPresswp_enqueue_script 函数有几个参数：
句柄名称 ( 'my-react-theme-app')，唯一标识脚本
脚本文件的路径
依赖项数组array('wp-element')，表示脚本依赖于 WordPress 的 React 包装器('wp-element')。
版本号('1.0.0')
位置true，指定脚本应加载到 HTML 文档的页脚中以提高页面加载性能
该wp_enqueue_style 函数采用以下参数：
句柄名称'my-react-theme-style'，唯一标识样式表
source ，返回主题主样式表 ( style.css get_stylesheet_uri() )的 URL并确保应用主题的样式
该add_action 元素，将自定义函数挂钩 'my_react_theme_scripts' 到特定操作 ( 'wp_enqueue_scripts')。这可以确保当 WordPress 准备渲染页面时正确加载 JavaScript 和 CSS。
这段代码可确保 React 应用程序的已编译 JavaScript 文件（位于 /build/index.js 中）和主题的主样式表与主题一起加载。
/build 目录 通常 来自使用webpack create-react-app 等工具编译 React 应用程序，这些工具会将 React 代码捆绑成可用于生产的、经过精简的 JavaScript 文件。
这种设置对于将 React 功能集成到 WordPress 主题中至关重要，可以在 WordPress 网站中实现动态的、类似应用程序的用户体验。
2.接下来，更新index.php 文件的内容 ：
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="app"></div>
<?php wp_footer(); ?>
</body>
</html>index.php 文件中的代码定义了 WordPress 主题的基本 HTML 结构，包括供 WordPress 插入必要页眉（wp_head）和页脚（wp_footer）的钩子，以及一个带有 ID app 的 div，其中安装了 React 应用程序。
使用 @wordpress/scripts 设置 React
1.打开终端并导航到主题的目录：cd wp-content/themes/my-basic
cd wp-content/themes/my-basic-theme2.初始化一个新的 Node.js 项目：
npm init -y3.安装@wordpress/scripts并@wordpress/element：
npm install @wordpress/scripts @wordpress/element --save-dev注意： 这里通常需要几分钟的时间，耐心等待就好。
4.修改package.json 文件以包含start 一个build 脚本：
"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build"
},@wordpress/scripts “用于以热重载方式启动开发服务器以进行开发（启动），并将 React 应用程序编译成静态资产以用于生产（构建）。
创建一个反应项目
1. 为主题中的 React 源文件创建一个名为src 的新目录。
2.在src 文件夹中，创建两个新文件：index.js 和App.js 。
3.将以下代码放入index.js ：
import { render } from '@wordpress/element';
import App from './App';
render(, document.getElementById('app'))上面的代码render 从@wordpress/element 组件导入函数App 。然后，它将App 组件安装到文档对象模型 (DOM)。
4.接下来，将此代码粘贴到App.js 文件中：
import { Component } from '@wordpress/element';
export default class App extends Component {
render() {
return (
<div>
<h1>Hello, WordPress and React!</h1>
{/* Your React components will go here */}
</div>
);
}
}完成并激活主题
激活主题：
使用npm start运行开发服务器。
在 WordPress 控制面板中找到 “外观”>”主题” ，找到你的主题并点击 “激活”，激活你的新主题。
确保 React 项目的构建过程配置正确，以输出到正确的主题目录，从而允许 WordPress 渲染 React 组件。
访问 WordPress 网站的前端，查看实时更改。
为主题开发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 (
<header style={headerStyle}>
<div>My WP Theme</div>
<button onClick={toggleTheme}>{darkTheme ? 'Light Mode' : 'Dark Mode'}</button>
</header>
);
}
}
export default Header;这段代码使用”@wordpress/element “定义了一个标题组件，可根据 darkTheme 命题动态调整标题样式。它包含一个按钮，可通过调用作为道具传递的 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 (
<footer> style={footerStyle}>
© {new Date().getFullYear()} My WP Theme
</footer>
);
}
}
export default Footer;这段代码定义了一个页脚组件，它根据 darkTheme 命题渲染具有动态样式的页脚，并显示当前年份。
更新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 (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}开发构建过程会监控更改并重新编译代码，该过程应仍处于激活状态。最后一个模板版本应该与这个相似：
如何在 React 中处理 WordPress 数据
将 WordPress 内容集成到 React 应用程序中，在 WordPress 强大的内容管理 功能和 React 的动态 UI 设计之间建立了无缝桥梁。这可以通过 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 <div>Error: {error.message}</div>;
}
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
{posts.map(post => (
<article key={post.id}>
<h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
<div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
</article>
))}
</div>
);
}
}
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。
帖子组件是这种集成的一个典型例子，它演示了使用 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 component
export default class App extends Component {
state = {
darkTheme: true,
};
toggleTheme = () => {
this.setState(prevState => ({
darkTheme: !prevState.darkTheme,
}));
};
render() {
const { darkTheme } = this.state;
return (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
<Posts /> {/* Render the Posts component */}
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}现在可以查看主题的最新最终版本。除了页眉和页脚，它还包括一个动态内容区域，用于展示帖子。
在 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 强大的 UI 功能构建主题并将其集成到 WordPress 中，可以释放创建灵活、高度交互且以用户为中心的 Web 体验。
![图片[1]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220111848139-image-1.png)
![图片[2]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220104732146-image-1.png)
![图片[3]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220105007346-image-1.png)
![图片[4]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220105123881-image-1.png)
![图片[5]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220105303194-image-1.png)
![图片[6]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220105427253-image-1.png)
![图片[7]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220110110769-image-1.png)
![图片[8]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220110234860-image-1.png)
![图片[9]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220110343357-image-1.png)
![图片[10]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220110636451-image-1.png)
![图片[11]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220110811912-image-1.png)
![图片[12]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220111002449-image-1.png)
![图片[13]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220111108556-image-1.png)
![图片[14]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220111149862-image-1.png)
![图片[15]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241220111310799-image-1.png)
![图片[1]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024092408172066.webp)
![图片[2]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024092408175658.webp)
![图片[3]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024092408181241.webp)
![图片[4]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024092408182862.webp)
![图片[5]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024092408184481.webp)
![图片[6]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024092408185665.webp)
![图片[2]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024070203220787.jpg)
![图片[3]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024070205444690.jpg)
![图片[4]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024070205463156-1.webp)
![图片[5]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024070203153520.png)
![图片[1]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024061301281171-4.webp)
![图片[2]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024053102411425-1.webp)
![图片[10]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024061312542952.webp)
![图片[5]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024050903202160.webp)
![图片[7]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/2024050903362574.webp)