投稿
  1. 光子波动网-免费分享跨境知识和技术知识首页
  2. WordPress 主题

如何使用 React 构建 WordPress 主题

• WordPress 主题 • 阅读 15

创建基本的 WordPress 主题结构

创建基本的 WordPress 主题结构包括设置一系列文件和目录，WordPress 使用这些文件和目录将主题的样式、功能和布局应用到 WordPress 网站。

1.在你的网站运行环境中，访问站点的文件夹。导航到wp-content/themes 目录。

2.给主题创建一个新文件夹。文件夹名称应该是唯一的且具有描述性——例如my-basic-theme。

3.在主题的文件夹中，创建这些基本文件并将其留空：

如何使用 React 构建 WordPress 主题

如果不使用 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 进行开发变得更加容易。

如何使用 React 构建 WordPress 主题

调整你的主题

现在已经掌握了 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 构建 WordPress 主题

这段代码可确保 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 应用程序编译成静态资产以用于生产（构建）。

如何使用 React 构建 WordPress 主题

创建一个反应项目

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

完成并激活主题

激活主题：

  1. 使用npm start运行开发服务器。
  2. 在 WordPress 控制面板中找到 “外观”>”主题”，找到你的主题并点击 “激活”，激活你的新主题。
  3. 确保 React 项目的构建过程配置正确，以输出到正确的主题目录，从而允许 WordPress 渲染 React 组件。
  4. 访问 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 主题

如何在 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>
        );
    }
}

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

如何使用 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 强大的 UI 功能构建主题并将其集成到 WordPress 中，可以释放创建灵活、高度交互且以用户为中心的 Web 体验。


联系我们
文章看不懂？联系我们为您免费解答！免费助力个人，小企站点！
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息
发布者：光子波动，转转请注明出处：https://www.361sale.com/9522/

赞 (0)
0 0
上一篇 2024年 5月 9日 上午10:28
下一篇 2024年 5月 9日 下午2:58

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询：1025174874

邮件：info@361sale.com

工作时间：周一至周五，9:30-18:30，节假日休息

客服微信
首页
开源社区
联系我们
关于我们
购买我们的托管服务器，享受免费运维！