WordPress React 整合 – www.wpcitation.com/

创建基本的 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.cssget_stylesheet_uri() )的 URL并确保应用主题的样式
该add_action 元素，将自定义函数挂钩 'my_react_theme_scripts' 到特定操作 ( 'wp_enqueue_scripts')。这可以确保当 WordPress 准备渲染页面时正确加载 JavaScript 和 CSS。

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

/build 目录通常来自使用webpackcreate-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-theme

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

npm init -y

3.安装@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 体验。

Tag: WordPress React 整合

如何使用 React 构建 WordPress 主题