Dễ dàng phát triển plugin WordPress với React JS
Hãy mô tả cách bắt đầu làm việc trong WordPress với React JS.
Phát triển plugin WordPress thực sự là một công việc được trả lương cao nhất trên toàn thế giới và với React, nó thực sự ngày càng trở nên mạnh mẽ hơn.
Hãy xây dựng một plugin wordpress đơn giản với React JS.
Bước 1:
Bên trong thư mục plugin, hãy tạo một thư mục có tên – jobplaceđó là plugin của chúng tôi.
thêm thiết lập trình soạn nhạc bằng cách chạy –
composer init
cũng chạy
npm init
cài đặt @wordpress/scriptsbằng cách chạy –
npm install @wordpress/scripts --save-dev
Thêm một số lệnh vào package.jsonvà cuối cùng sẽ là:
"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"
}
}
Và composer.jsonsẽ là –
{
"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": {}
}
Thêm webpack.config.js–
const defaults = require('@wordpress/scripts/config/webpack.config');
module.exports = {
...defaults,
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
};
Thêm tệp mẫu –templates/app.php
<div id="jobplace">
<h2>Loading...</h2>
</div>
Tệp plugin chính –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 );
}
* Thêm nội dung React – *
Trong 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;
* Thêm thành phần trang tổng quan – 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;
Thêm kiểu trong src/style/main.scss–
#jobplace {
.app-title {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 1em;
}
}
Bây giờ chạy –
- Kích hoạt plugin
- Chạy tập lệnh wp
npm start
Đó là nó.
Xem bản trình diễn cuối cùng –
* Toàn bộ Bài viết và Liên kết Github để giải thích chi tiết hơn – *
