WP Reactivate 项目教程

WP Reactivate 项目教程

wp-reactivateReact boilerplate for WordPress plugins项目地址:https://gitcode.com/gh_mirrors/wp/wp-reactivate

项目介绍

WP Reactivate 是一个用于 WordPress 插件开发的 React 样板项目。它提供了一个基础框架，使得开发者可以在 WordPress 中集成 React 应用，支持短代码、小工具和设置页面等多种视图。该项目使用 Webpack 进行构建，支持现代 JavaScript 和 React 开发实践。

项目快速启动

环境准备

1. 安装 Node.js：确保安装 Node 8.12.0 LTS 或更高版本。
2. 安装 Yarn：推荐使用 Yarn 进行包管理，也可以使用 npm。

安装步骤

1. 克隆项目：

   git clone https://github.com/gopangolin/wp-reactivate.git
   cd wp-reactivate
   

2. 安装依赖：

   yarn install  # 或者使用 npm install
   

3. 开发构建：

   yarn build  # 或者使用 npm run build
   

4. 生产构建：

   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，提升用户体验

wp-reactivateReact boilerplate for WordPress plugins项目地址:https://gitcode.com/gh_mirrors/wp/wp-reactivate