Bắt đầu dự án xây dựng WordpresJs (ok)
Ví dụ 1: Tạo theme và id root
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\package.json
{
"name": "twentyseventeen",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"file-loader": "^6.1.0",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^0.11.3",
"postcss": "^8.1.1",
"postcss-loader": "^4.0.3",
"sass": "^1.26.11",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require("path");
module.exports = {
mode: 'development',
entry: [
'./src/index.js',
'./src/image.scss'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
},
plugins: [
new MiniCssExtractPlugin({
filename: "style.css",
chunkFilename: '[id].css',
}),
new HtmlWebpackPlugin({
title: 'Wordpress 😋 ReactJs',
template: 'src/index.html',
filename: 'index.html'
})
],
module: {
rules: [{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: 'dist/',
},
},
'css-loader'
],
},
{
test: /\.s[ac]ss$/i,
use: [{
loader: 'file-loader',
options: {
name: 'style.css',
},
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader'
}]
}
],
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
};C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\image.scss
$body-color: blue;
body {
color: $body-color;
}C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WordPress - React Native</title>
</head>
<body>
<div id="root"></div>
</body>
</html>C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\App.js
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World
</div>
);
}
}
export default App;C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\functions.php
<?php
function celestial_scripts() {
wp_enqueue_style( 'celestial-style-dist', get_template_directory_uri() . '/dist/style.css');
wp_enqueue_script('vendors-main-app-script', get_template_directory_uri() . '/dist/vendors~main.app.js', array(), '1.1', true);
wp_enqueue_script('celestial-script', get_template_directory_uri() . '/dist/app.js', array(), '1.1', true);
}
add_action('wp_enqueue_scripts', 'celestial_scripts');
?>C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wordpress ReactJs Demo</title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="root">
<div class="loader-gif">
<img src="<?php echo home_url() ?>/wp-content/themes/twentyseventeen/loading-icon.gif" alt="Loader">
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\style.css
/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.4
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/Ví dụ 2: Tạo Component Header
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './Header';
class App extends React.Component {
render() {
return (
<Router>
<Header />
</Router>
);
}
}
export default App;C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\Header.js
import React from "react";
import { Link } from "react-router-dom";
const Header = () => (
<div className="container">
<header id="masthead" className="site-header" role="banner">
<nav className="navbar navbar-expand-lg navbar-light ">
<h1 className="site-title">
<Link to={CelestialSettings.path}>Celestial</Link>
</h1>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<Link
className="nav-item nav-link active"
to={CelestialSettings.path}
>
Home <span className="sr-only">(current)</span>
</Link>
<Link
className="nav-item nav-link"
to={CelestialSettings.path + "products/"}
>
Products
</Link>
</div>
</div>
</nav>
</header>
</div>
);
export default Header;C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\functions.php
<?php
function celestial_scripts() {
wp_enqueue_style('vendors-main-dist', get_template_directory_uri() . '/dist/vendors~main.css');
wp_enqueue_style('celestial-style-dist', get_template_directory_uri() . '/dist/style.css');
wp_enqueue_script('vendors-main-app-script', get_template_directory_uri() . '/dist/vendors~main.app.js', array(), '1.1', true);
wp_enqueue_script('celestial-script', get_template_directory_uri() . '/dist/app.js', array(), '1.1', true);
$url = trailingslashit(home_url());
$path = trailingslashit(parse_url($url, PHP_URL_PATH));
wp_scripts()->add_data('celestial-script', 'data',
sprintf('var CelestialSettings = %s;',
wp_json_encode(
array(
'title' => get_bloginfo('name', 'display'),
'path' => $path,
'URL' => array(
'api' => esc_url_raw(get_rest_url(null, '/wp/v2/')),
'root' => esc_url_raw($url),
),
)
)
)
);
}
add_action('wp_enqueue_scripts', 'celestial_scripts');
?>Previous------------ Start REACTJSWORDPRESS -------------Next[REACTJSWORDPRESS] Thiết kế giao diện ứng dụng web bằng React và WordPress
Last updated
