Hướng dẫn cài reactjs chạy trên wordpress thành công (ok)
Bước 1: Bản sơ khai
C:\xampp\htdocs\abc\wp-content\themes\apps\package.json
{
"name": "apps",
"version": "0.1.0",
"private": true,
"homepage": "https://example.com/wp-content/themes/apps/",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
C:\xampp\htdocs\abc\wp-content\themes\apps\index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/wp-content/themes/apps/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/wp-content/themes/apps/logo192.png" />
<link rel="manifest" href="/wp-content/themes/apps/manifest.json" />
<title>React App</title>
<link href="/wp-content/themes/apps/static/css/main.5f361e03.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
! function(e) {
function t(t) { for (var n, p, a = t[0], l = t[1], f = t[2], c = 0, s = []; c < a.length; c++) p = a[c], Object.prototype.hasOwnProperty.call(o, p) && o[p] && s.push(o[p][0]), o[p] = 0; for (n in l) Object.prototype.hasOwnProperty.call(l, n) && (e[n] = l[n]); for (i && i(t); s.length;) s.shift()(); return u.push.apply(u, f || []), r() }
function r() { for (var e, t = 0; t < u.length; t++) { for (var r = u[t], n = !0, a = 1; a < r.length; a++) { var l = r[a];
0 !== o[l] && (n = !1) } n && (u.splice(t--, 1), e = p(p.s = r[0])) } return e } var n = {},
o = { 1: 0 },
u = [];
function p(t) { if (n[t]) return n[t].exports; var r = n[t] = { i: t, l: !1, exports: {} }; return e[t].call(r.exports, r, r.exports, p), r.l = !0, r.exports } p.m = e, p.c = n, p.d = function(e, t, r) { p.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }) }, p.r = function(e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, p.t = function(e, t) { if (1 & t && (e = p(e)), 8 & t) return e; if (4 & t && "object" == typeof e && e && e.__esModule) return e; var r = Object.create(null); if (p.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e)
for (var n in e) p.d(r, n, function(t) { return e[t] }.bind(null, n)); return r }, p.n = function(e) { var t = e && e.__esModule ? function() { return e.default } : function() { return e }; return p.d(t, "a", t), t }, p.o = function(e, t) { return Object.prototype.hasOwnProperty.call(e, t) }, p.p = "/wp-content/themes/apps/"; var a = this.webpackJsonpapps = this.webpackJsonpapps || [],
l = a.push.bind(a);
a.push = t, a = a.slice(); for (var f = 0; f < a.length; f++) t(a[f]); var i = l;
r() }([])
</script>
<script src="/wp-content/themes/apps/static/js/2.8eea1055.chunk.js"></script>
<script src="/wp-content/themes/apps/static/js/main.8c64e48e.chunk.js"></script>
</body>
</html>C:\xampp\htdocs\abc\wp-content\themes\apps\style.css
/*
Theme Name: Apps
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.
*/Bước 2: Bản hoàn thiện hơn :)
C:\xampp\htdocs\abc\wp-content\themes\apps\package.json
{
"name": "apps",
"version": "0.1.0",
"private": true,
"homepage": "https://example.com/wp-content/themes/apps/",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
C:\xampp\htdocs\abc\wp-content\themes\apps\functions.php
<?php
function celestial_scripts() {
wp_enqueue_style('main-chunk-style', get_template_directory_uri() . '/static/css/main.5f361e03.chunk.css');
wp_enqueue_script('app-script', get_template_directory_uri() . '/app.js', array(), '1.1', true);
wp_enqueue_script('chunk-script', get_template_directory_uri() . '/static/js/2.8eea1055.chunk.js', array(), '1.1', true);
wp_enqueue_script('main-chunk-script', get_template_directory_uri() . '/static/js/main.8c64e48e.chunk.js', array(), '1.1', true);
$url = trailingslashit(home_url());
$path = trailingslashit(parse_url($url, PHP_URL_PATH));
wp_scripts()->add_data('app-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');
?>C:\xampp\htdocs\abc\wp-content\themes\apps\app.js
! function(e) {
function t(t) { for (var n, p, a = t[0], l = t[1], f = t[2], c = 0, s = []; c < a.length; c++) p = a[c], Object.prototype.hasOwnProperty.call(o, p) && o[p] && s.push(o[p][0]), o[p] = 0; for (n in l) Object.prototype.hasOwnProperty.call(l, n) && (e[n] = l[n]); for (i && i(t); s.length;) s.shift()(); return u.push.apply(u, f || []), r() }
function r() {
for (var e, t = 0; t < u.length; t++) {
for (var r = u[t], n = !0, a = 1; a < r.length; a++) {
var l = r[a];
0 !== o[l] && (n = !1)
}
n && (u.splice(t--, 1), e = p(p.s = r[0]))
}
return e
}
var n = {},
o = { 1: 0 },
u = [];
function p(t) { if (n[t]) return n[t].exports; var r = n[t] = { i: t, l: !1, exports: {} }; return e[t].call(r.exports, r, r.exports, p), r.l = !0, r.exports } p.m = e, p.c = n, p.d = function(e, t, r) { p.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }) }, p.r = function(e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, p.t = function(e, t) {
if (1 & t && (e = p(e)), 8 & t) return e;
if (4 & t && "object" == typeof e && e && e.__esModule) return e;
var r = Object.create(null);
if (p.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e)
for (var n in e) p.d(r, n, function(t) { return e[t] }.bind(null, n));
return r
}, p.n = function(e) { var t = e && e.__esModule ? function() { return e.default } : function() { return e }; return p.d(t, "a", t), t }, p.o = function(e, t) { return Object.prototype.hasOwnProperty.call(e, t) }, p.p = "/wp-content/themes/apps/";
var a = this.webpackJsonpapps = this.webpackJsonpapps || [],
l = a.push.bind(a);
a.push = t, a = a.slice();
for (var f = 0; f < a.length; f++) t(a[f]);
var i = l;
r()
}([])C:\xampp\htdocs\abc\wp-content\themes\apps\index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/wp-content/themes/apps/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/wp-content/themes/apps/logo192.png" />
<link rel="manifest" href="/wp-content/themes/apps/manifest.json" />
<title>React App</title>
<?php wp_head(); ?>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<?php wp_footer(); ?>
</body>
</html>C:\xampp\htdocs\abc\wp-content\themes\apps\style.css
/*
Theme Name: Apps
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.
*/PreviousHướng dẫn cài đặt chạy sản phẩm reactjs build trên xampp (ok)Nextcreate-react-app-customized
Last updated
Was this helpful?
