React JS로 쉽게 WordPress 플러그인 개발

React JS로 WordPress에서 작업을 시작하는 방법을 설명하겠습니다.

WordPress 플러그인 개발은 실제로 전 세계에서 가장 많은 돈을 지불하는 직업이며 React를 사용하면 요즘 더욱 강력해지고 있습니다.

React JS로 간단한 워드프레스 플러그인을 만들어 봅시다.

1 단계:

플러그인 디렉토리 안에 플러그인인 - jobplace라는 폴더를 만듭니다.

다음을 실행하여 작성기 설정 추가 -

composer init

또한 실행

npm init

다음을 실행하여 설치@wordpress/scripts -

npm install @wordpress/scripts --save-dev

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"
  }
}

그리고 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": "[email protected]"
        }
    ],
    "require": {}
}

추가webpack.config.js -

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

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

템플릿 파일 추가 - templates/app.php

<div id="jobplace">
    <h2>Loading...</h2>
</div>

기본 플러그인 파일 - 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 );
}

*반응 항목 추가 - *

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

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; 

*대시보드 구성 요소 추가 - 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;

src/style/main.scss에 스타일 추가 -

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

이제 실행 -

플러그인 활성화

wp 스크립트 실행

npm start

그게 다야.

최종 데모 보기 -



*자세한 설명은 전체 기사 및 Github 링크 - *

https://devsenv.com/tutorials/start-wordpress-plugin-development-with-react-js-easily-in-just-few-steps