Logo

菜单

发布于 2026-01-06 2 阅读
0

使用 React JS 轻松开发 WordPress 插件

使用 React JS 轻松开发 WordPress 插件

让我们来介绍一下如何在 WordPress 中使用 React JS 进行开发。

WordPress插件开发在全球范围内都是一份高薪工作，而且随着React的出现，它如今变得更加强大。

让我们用 React JS 构建一个简单的 WordPress 插件。

第一步：

在插件目录下，创建一个名为“-”的文件夹，jobplace这就是我们的插件。

通过运行以下命令添加 Composer 设置：



composer init
Enter fullscreen mode Exit fullscreen mode

也运行



npm init
Enter fullscreen mode Exit fullscreen mode

@wordpress/scripts运行以下命令进行安装：



npm install @wordpress/scripts --save-dev
Enter fullscreen mode Exit fullscreen mode

添加一些命令package.json，最终结果将是 -




  "name": "jobplace",
  "version": "1.0.0",
  "description": "A Job posting platform made by WordPress",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "^22.5.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

而且composer.json会是——



{
    "name": "akash/jobplace",
    "description": "A Job posting platform made by WordPress",
    "type": "wordpress-plugin",
    "license": "GPL-2.0-or-later",
    "autoload": {
        "psr-4": {
            "Akash\\Jobplace\\": "includes/"
        }
    },
    "authors": [
        {
            "name": "ManiruzzamanAkash",
            "email": "manirujjamanakash@gmail.com"
        }
    ],
    "require": {}
}
Enter fullscreen mode Exit fullscreen mode

添加webpack.config.js-



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

module.exports = {
  ...defaults,
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};
Enter fullscreen mode Exit fullscreen mode

添加模板文件 -templates/app.php



<div id="jobplace">
    <h2>Loading...</h2>
</div>
Enter fullscreen mode Exit fullscreen mode

主插件文件 -job-place.php



<?php
/**
 * Plugin Name:       Job Place
 * Description:       A Job posting platform made by WordPress.
 * Requires at least: 5.8
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            Maniruzzaman Akash
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       jobplace
 */

add_action( 'admin_menu', 'jobplace_init_menu' );

/**
 * Init Admin Menu.
 *
 * @return void
 */
function jobplace_init_menu() {
    add_menu_page( __( 'Job Place', 'jobplace'), __( 'Job Place', 'jobplace'), 'manage_options', 'jobplace', 'jobplace_admin_page', 'dashicons-admin-post', '2.1' );
}

/**
 * Init Admin Page.
 *
 * @return void
 */
function jobplace_admin_page() {
    require_once plugin_dir_path( __FILE__ ) . 'templates/app.php';
}

add_action( 'admin_enqueue_scripts', 'jobplace_admin_enqueue_scripts' );

/**
 * Enqueue scripts and styles.
 *
 * @return void
 */
function jobplace_admin_enqueue_scripts() {
    wp_enqueue_style( 'jobplace-style', plugin_dir_url( __FILE__ ) . 'build/index.css' );
    wp_enqueue_script( 'jobplace-script', plugin_dir_url( __FILE__ ) . 'build/index.js', array( 'wp-element' ), '1.0.0', true );
}
Enter fullscreen mode Exit fullscreen mode

*添加 React 相关内容 - *

在 src/index.js 中 -



import App from "./App";
import { render } from '@wordpress/element';

/**
 * Import the stylesheet for the plugin.
 */
import './style/main.scss';

// Render the App component into the DOM
render(<App />, document.getElementById('jobplace'));
Enter fullscreen mode Exit fullscreen mode

src/App.js-



import React from 'react';
import Dashboard from './components/Dashboard';

const App = () => {
    return (
        <div>
            <h2 className='app-title'>Job Place App</h2>
            <hr />
            <Dashboard />
        </div>
     );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

*添加仪表盘组件 - src/components/Dashboard.jsx*




import React from 'react'

const Dashboard = () => {
    return (
        <div className='dashboard'>
            <div className="card">
                <h3>Dashboard</h3>
                <p>
                    Edit Dashboard component at <code>src/components/Dashboard.jsx</code>
                </p>
            </div>
        </div>
     );
}

export default Dashboard;
Enter fullscreen mode Exit fullscreen mode

添加样式src/style/main.scss-



#jobplace {
    .app-title {
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 1em;
    }
}
Enter fullscreen mode Exit fullscreen mode

现在运行 -

  1. 激活插件
  2. 运行 wp-script ```sh

npm start


That's it.

**See the final demo -**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uquaffnyat5acpbnyqyz.png)


**Full Article and Github Link in more details explanation - **

https://devsenv.com/tutorials/start-wordpress-plugin-development-with-react-js-easily-in-just-few-steps
Enter fullscreen mode Exit fullscreen mode
文章来源：https://dev.to/maniruzzamanakash/wordpress-plugin-development-with-react-js-easily-4kj1
我在2019年所取得的成就和所学到的东西
使用 SvelteKit 实现 S...