如何在 WordPress 主题中添加 React

2025-06-10

如何在 WordPress 主题中添加 React

如果您喜欢这篇文章，请查看我在 WordPress 的 JavaScript 上的课程和在线训练营。

React 随 WordPress 一起发布

自 WordPress 5.0 以来，React（或其抽象）就随 WordPress 一起提供。

WordPress 采用整个 React 和 ReactDOM 库并将它们导出到名为 的全局窗口对象上wp.element。

这与大多数 React 应用程序的工作方式略有不同。

在普通的 React 应用中，我们导入 React，但在 WordPress 中则不需要

通常，对于 React 应用或项目，你会在每个使用 React 的文件顶部导入 React。在你的主索引页上，你可能也会导入 ReactDOM。

// A Normal React App
import React from "react";
import ReactDOM from "react-dom";
import MyComponent from "./components/MyComponent";

ReactDOM.render(<MyComponent />, document.getElementById("root"));

在 WordPress 中我们不导入 React 或 React DOM，因为它们在全局对象中可用wp.element。

因此，当您将 React 包含在 WordPress 项目中包含时的一个重要区别是您不会将其导入到您的文件中。

正常使用 React 和在 WordPress 主题或插件中使用 React 的另一个区别与工具有关。

使用 WP Scripts 代替 Create React App

如果您之前构建过 React 应用程序，那么您可能使用 Create React App 或类似的工具包来运行您的开发服务器并构建您的生产代码。

此工具在 WordPress 上效果不佳，因为 React 是在全局 window 对象中加载的，wp.element而不是与代码捆绑在一起。Create React App 官方不支持在不弹出的情况下从外部源加载 React，因此这不一定是最佳的工具选择。

幸运的是，WordPress 团队wp-scripts基于react-scriptsCreate React App 使用的包构建了一个包。

WP Scripts 默认包含开发、lint、测试和构建命令。如果您想做一些特殊的事情，例如编译 SASS，也可以使用自定义的 webpack 配置来扩展它。

我们将在下面介绍如何设置 WP 脚本，但首先让我们在前端加载 React 来设置基本主题。

在你的主题中加入 React

为了确保 React 已加载，您只需将其添加wp-element为您自己的 JavaScript 文件的依赖项。

以下内容将进入您的functions.php文件。

// Enqueue Theme JS w React Dependency
add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );
function my_enqueue_theme_js() {
  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time(), // Change this to null for production
    true
  );
}

为了使其工作，您需要一个位于的文件。当我们运行命令/build/index.js时，WP Scripts 将为我们创建该文件build

现在wp.element将加载到您的主题的前端。

如何设置WP脚本

设置 WP 脚本包括两个步骤：1）安装wp-scripts；2）将脚本添加到您的 package.json 文件。

如果您尚未设置 package.json 文件，请从 WordPress 主题的根目录运行以下命令：

npm init

您可以按下return每个提示或添加您自己的自定义信息。

创建 package.json 文件后，运行以下命令：

npm install @wordpress/scripts --save-dev

这会将 WP Scripts 下载到您的 node_modules 并使其可在命令行中使用。

我们现在可以做这样的事情：

wp-scripts start

但是，为了使其更加通用和易于使用，我们将 WordPress 脚本映射到 NPM 脚本。

打开你的 package.json 文件并"scripts"用以下内容替换当前设置：

{
  "name": "myreacttheme",
  "version": "1.0.0",
  "description": "My WordPress theme with React",
  "main": "src/index.js",
  "dependencies": {},
  "devDependencies": {
    "@wordpress/scripts": "^5.1.0"
  },
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
  },
  "author": "",
  "license": "1 GNU V2+, MIT"
}

如果您不需要所有这些命令，可以将其简化为仅使用start和build命令。不过，其他命令也很有用。

现在我们可以运行以下命令：

npm start

它会取消 WP Scriptsstart命令。它会查找任何导入的文件，并在文件发生更改时src/index.js将其构建到该文件中。build/index.js

该build命令执行相同的操作，但只执行一次并且不监视更改。

将 React 添加到自定义页面模板

在 WordPress 中，越来越多的内容显示是通过区块来控制的。WordPress 中的区块也基于 React，但它们本身就是一个小型生态系统，不在本文的讨论范围之内。

这里我们将重点介绍如何在自定义页面模板中添加一些 React 代码。虽然我们所做的一切都可以构建到一个块中，但有时使用 React 构建自定义页面模板仍然很有用。

为此，我将创建一个基于 2020 年默认 WordPress 主题的子主题。我的基本主题结构如下：

/build
/src
-- index.js
functions.php
package.json
page-react.php
style.css

这些是我们需要的最低要求。

无需过多解释，以下是 functions.php 文件和 style.css 文件的代码。

函数.php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

  $parent_style = 'twentytwenty-style'; 

  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    [ $parent_style ],
    time() //wp_get_theme()->get('Version')
  );

  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time() //For production use wp_get_theme()->get('Version')        
  );

}

样式.css

/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Author:       Zac Gordon
 Author URI:   https://javascriptforwp.com/
 Template:     twentytwenty
 Version:      0.9.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentychild
*/

我们还有一个非常简单的自定义页面模板page-react.php，如下所示：

<?php
/**
 * Template Name: React Template
 */
get_header();
?>

<main id="site-content" role="main">
    <article class="post-2 page type-page status-publish hentry">
        <?php get_template_part( 'template-parts/entry-header' ); ?>
        <div class="post-inner thin">
            <div class="entry-content">             

                <div id="react-app"></div><!-- #react-app -->

            </div><!-- .entry-content -->
        </div><!-- .post-inner -->
    </article><!-- .post -->
</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php get_footer(); ?>

page.php这基本上是来自父主题的简化模板，并<div id="react-app"></div>添加了可供我们加载 React 代码的功能。

可以使用 React 构建主题的更大部分，但我们只专注于在这里将其加载到单个模板上。

要完成此设置过程，请创建一个新页面并选择“React Template”作为页面模板。

编写我们的 React

在我们的文件中，src/index.js我们可以开始编写 React 代码并将其添加到页面。

我们将在本系列课程中以此为基础，但现在我们将添加一个简单的组件，让您单击一个按钮来增加某项内容的投票数。

文件：/src/index.js

const { render, useState } = wp.element;

const Votes = () => {
  const [votes, setVotes] = useState(0);
  const addVote = () => {
    setVotes(votes + 1);
  };
  return (
    <div>
      <h2>{votes} Votes</h2>
      <p>
        <button onClick={addVote}>Vote!</button>
      </p>
    </div>
  );
};
render(<Votes />, document.getElementById(`react-app`));

这里有几件重要的事情需要注意：

  1. 我们不是在页面上导入 React 或 ReactDOM，而是从wp.element已经为我们加载的中获取我们需要的内容。
  2. ReactDOM.render()也包括在内wp.element
  3. 目前 WordPress 中尚未保存状态，但我们将在以后的文章中更改此设置。

从这里您可以开始编写任何您想要的 React，以及将代码分解为单独的文件并根据需要导入它们。

希望这足以帮助您将 React 添加到您的 WordPress 主题中。

设置 Webpack Externals 以使用导入 React 的库

您使用的大多数 React 包都将用于将 React 与最终代码捆绑在一起，并将import React from "react"在其自己的代码中包含类似内容。

默认情况下，这在 WP Scripts 中不起作用。为了使其正常工作，我们必须使用我们自己的webpack.config.js文件扩展 WP Scripts，并将 React 和 ReactDOMs 定义为可在捆绑代码之外使用的外部资源。

为此，请webpack.config.js在主题的根目录中创建一个新文件并添加以下内容：

const defaults = require("@wordpress/scripts/config/webpack.config");

module.exports = {
  ...defaults,
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  }
};

这将从 WP Scripts 获取默认配置，并将其添加为 Webpack 的后备配置。然后，我们可以添加自定义配置，将“react”和“react-dom”定义为外部可用配置。

这将防止在使用需要导入 React 的第三方 React 库时发生错误。

后续步骤

从这里开始，您可以开始构建主题所需的所有 React。您可能需要在不同的位置加载 React，例如页眉、侧边栏或页脚，但过程大致相同。

在以后的文章中，我们将深入探讨如何在 WordPress 主题中使用 React 实现更多功能！您可以在这里找到本系列的主要代码库。

请分享您如何在 WordPress 主题和项目中使用 React！

如果您喜欢这篇文章，请查看我在 WordPress 的 JavaScript 上的课程和在线训练营。

鏂囩珷鏉ユ簮锛�https://dev.to/zgordon/how-to-include-react-in-a-wordpress-theme-k88
Devto 翻译
PREV
使用 Goodreads API 和 11ty 创建在线书架
NEXT
编写 JavaScript 的另一种方法