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 5 years ago

Was this helpful?