如何使用React创建WordPress主题

2024年 5月 14日 70.1k 0

如何使用React创建WordPress主题-1

这篇实践文章利用 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_scriptwp_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 编译文件(位于 <your-theme-directory>/build/index.js 中)和主题的主样式表与主题一起加载。

    /build directory 通常是使用 create-react-app 或 webpack 等工具编译 React 应用程序时产生的,这些工具会将 React 代码捆绑成可用于生产的、经过精简的 JavaScript 文件。

    这种设置对于将 React 功能集成到 WordPress 主题中至关重要,可以在 WordPress 网站中实现动态的、类似应用程序的用户体验。

  • 接下来,更新 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 appdiv,其中安装了 React 应用程序。

  • 使用 @wordpress/scripts 设置 React

  • 打开终端,进入主题目录:
    cd wp-content/themes/my-basic-theme
    
  • 初始化一个新的 Node.js 项目:
    npm init -y
  • 安装@wordpress/scripts 和 @wordpress/element
    npm install @wordpress/scripts @wordpress/element --save-dev

    请注意,这一步可能需要几分钟。

  • 修改 package.json 文件,加入 start 和 build 脚本:
    "scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
    },

    '@wordpress/scripts' 用于启动一个用于开发目的的热重载开发服务器(start),并将 React 应用程序编译成用于生产的静态资产(build)。

  • 创建 React 项目

  • 为主题中的 React 源文件创建一个名为 src 的新目录。
  • 在 src 文件夹中创建两个新文件:index.js 和 App.js。
  • 将以下代码放入 index.js:
  • import { render } from '@wordpress/element';
    import App from './App';
    render(, document.getElementById('app'))

    上面的代码从 @wordpress/elementApp 组件导入了 render 函数。然后,将 App 组件挂载到文档对象模型 (DOM)。

  • 接下来,将此代码粘贴到 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主题-2

    主页上会显示新创建的基于 React 的 WordPress 主题,并带有 “Hello, WordPress and React” 的信息。

    准备好部署主题后,运行:npm run build。这条命令会将 React 应用程序编译成静态资产,并将其放在主题文件夹内的构建目录中。

    为主题开发 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 prop 动态调整页眉样式。它包含一个按钮,可通过调用作为道具传递的 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 prop 渲染具有动态样式的页脚,并显示当前年份。

    更新 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主题-3

    显示基于 React 的 WordPress 主题(包括页眉和页脚)的主页。

    如何在 React 中处理 WordPress 数据

    在 React 应用程序中集成 WordPress 内容可在 WordPress 的强大内容管理功能和 React 的动态用户界面设计之间架起一座无缝的桥梁。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

    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>
    );
    }
    }

    您现在可以查看主题的最新最终版本。除了页眉和页脚,它还包括一个动态内容区域,用于展示文章。

    如何使用React创建WordPress主题-4

    主页显示基于 React 的 WordPress 最终主题,包括文章。

    在 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 强大的用户界面功能创建主题并将其集成到 WordPress 中,您可以释放创建灵活、高度交互和以用户为中心的网络体验的潜力。

    相关文章

    JavaScript2024新功能:Object.groupBy、正则表达式v标志
    PHP trim 函数对多字节字符的使用和限制
    新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
    使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
    为React 19做准备:WordPress 6.6用户指南
    如何删除WordPress中的所有评论

    发布评论