WP Reactivate 项目教程
项目介绍
WP Reactivate 是一个用于 WordPress 插件开发的 React 样板项目。它提供了一个基础框架,使得开发者可以在 WordPress 中集成 React 应用,支持短代码、小工具和设置页面等多种视图。该项目使用 Webpack 进行构建,支持现代 JavaScript 和 React 开发实践。
项目快速启动
环境准备
- 安装 Node.js:确保安装 Node 8.12.0 LTS 或更高版本。
- 安装 Yarn:推荐使用 Yarn 进行包管理,也可以使用 npm。
安装步骤
-
克隆项目:
git clone https://github.com/gopangolin/wp-reactivate.git cd wp-reactivate
-
安装依赖:
yarn install # 或者使用 npm install
-
开发构建:
yarn build # 或者使用 npm run build
-
生产构建:
yarn prod # 或者使用 npm run prod
使用示例
使用短代码
在 WordPress 中添加短代码,并在 React 组件中访问短代码属性:
function wp_reactivate_shortcode($atts) {
$atts = shortcode_atts(array(
'title' => 'Hello world',
'api_nonce' => wp_create_nonce('wp_rest'),
'api_url' => rest_url('wp-reactivate/v1/')
), $atts, 'wp-reactivate');
wp_localize_script('wp-reactivate-shortcode-script', 'wpObject', $atts);
return '<div class="wp-reactivate-shortcode" data-object-id="wpObject"></div>';
}
add_shortcode('wp-reactivate', 'wp_reactivate_shortcode');
在 React 组件中访问短代码属性:
import React, { Component } from 'react';
export default class Shortcode extends Component {
render() {
return (
<div className="wrap">
<h1>WP Reactivate Frontend</h1>
<p>Title: {this.props.wpObject.title}</p>
</div>
);
}
}
应用案例和最佳实践
使用小工具
在 WordPress 中添加小工具,并在 React 组件中访问小工具选项:
function wp_reactivate_widget($args, $instance) {
echo $args['before_widget'];
?>
<div class="wp-reactivate-widget" data-object-id="<?php echo $instance['object_id']; ?>"></div>
<?php
echo $args['after_widget'];
}
在 React 组件中访问小工具选项:
import React, { Component } from 'react';
export default class Widget extends Component {
render() {
return (
<div className="wrap">
<h1>WP Reactivate Widget</h1>
<p>Title: {this.props.wpObject.title}</p>
</div>
);
}
}
使用 REST 控制器
创建自定义 REST 端点与 React 组件交互:
class WP_Reactivate_REST_Controller {
public function register_routes() {
$namespace = 'wp-reactivate/v1';
register_rest_route($namespace, '/example', array(
'methods' => 'GET',
'callback' => array($this, 'get_example_data'),
));
}
public function get_example_data() {
return array('data' => 'example');
}
}
典型生态项目
WP Reactivate 项目可以与其他 WordPress 插件和主题结合使用,扩展其功能。例如,可以与 WooCommerce 结合,为电子商务网站提供动态的 React 前端体验。此外,它还可以与 Gutenberg 编辑器集成,提供更丰富的内容编辑功能。
通过 WP Reactivate,开发者可以轻松地将现代前端技术引入 WordPress,提升用户体验