GALAXY TECH
Chuyên gia Công nghệ
Thứ ba, 27/08/2019 | 00:00 GMT+7

Cách nhúng một ứng dụng React vào WordPress trên Ubuntu 18.04

WordPress là một hệ thống quản lý nội dung phổ biến, theo W3Techs (Khảo sát Công nghệ Web), chiếm quyền trên 33% các trang web trên Internet . Một lý do khiến nó rất phổ biến là nó dễ dàng cài đặt với tài liệu rõ ràng, dễ hiểu. Ngoài ra, có rất nhiều tài nguyên cộng đồng hỗ trợ các nhà phát triển WordPress. WordPress có thể giải quyết nhiều trường hợp sử dụng bằng một giải pháp ngoại vi rẻ tiền hoặc thậm chí miễn phí. Cuối cùng, WordPress đi kèm với một hệ thống plugin được xác định rõ ràng, cho phép các nhà phát triển viết mã tùy chỉnh để thêm chức năng của riêng họ. Hệ thống plugin này được ghi chép đầy đủ, hoạt động tốt và như bạn sẽ thấy ở phần sau của hướng dẫn này, rất dễ sử dụng.

Các nhà phát triển muốn mang lại trải nghiệm phong phú nhất, tương tác nhất có thể sử dụng JavaScript , được hỗ trợ bởi các khung công tác như React . React là một thư viện JavaScript được thiết kế để giúp các nhà phát triển dễ dàng tạo giao diện user động, tương tác vượt xa một trang hoặc biểu mẫu tĩnh điển hình. Được tạo ra bởi Facebook và do đó được duy trì tốt để bảo mật, ổn định và dễ sử dụng, React rất phổ biến vì nó có tài liệu tốt và một hệ sinh thái tài liệu và plugin hướng tới cộng đồng được cài đặt tốt.

Hướng dẫn này sẽ hướng dẫn bạn các phương pháp hay nhất để nhúng ứng dụng React vào trang web WordPress. Đối với ví dụ của nó, nó sẽ sử dụng một trường hợp sử dụng phổ biến: tạo một tiện ích con nhằm mục đích nhúng trên nhiều trang và đôi khi nhiều lần trên một trang. Ở phía server , nó sẽ được triển khai dưới dạng shortcode WordPress . Một shortcode giống như một thẻ HTML, nhưng nó sử dụng dấu ngoặc vuông ( [...] ) thay vì dấu ngoặc nhọn ( <...> ). Thay vì hiển thị trực tiếp một phần tử HTML, nó gọi một hàm PHP, hàm này sẽ hiển thị HTML, được nội suy với dữ liệu từ database .

Đến cuối hướng dẫn này, bạn sẽ tạo shortcode của riêng mình, chèn nó vào một trang trong WP Admin và xuất bản trang đó. Trên trang đó, bạn có thể thấy tiện ích React của bạn được trình duyệt hiển thị.

Yêu cầu

Để làm theo hướng dẫn này, bạn phải có:

Bước 1 - Cập nhật và cấu hình quyền đối với hệ thống file

Khi đăng nhập với quyền user không phải root được tạo trong Điều kiện tiên quyết là Cài đặt Server Ban đầu với Ubuntu 18.04 , bạn sẽ không có quyền truy cập để xem hoặc chỉnh sửa các file nào trong folder WordPress. Đây là một vấn đề, vì bạn sẽ thêm và sửa đổi các file sau này để tạo plugin WordPress và ứng dụng React của bạn. Để khắc phục sự cố này, trong bước này, bạn sẽ cập nhật cấu hình WordPress của bạn để bạn có quyền truy cập chỉnh sửa các file WordPress của bạn .

Chạy lệnh sau, thay sammy cho tên của user không phải root của bạn và /var/www/ wordpress cho đường dẫn đến folder WordPress của bạn (là folder root của tài liệu Apache bạn đã tạo trong yêu cầu ):

  • sudo chown -R sammy:www-data /var/www/wordpress

Hãy chia nhỏ lệnh này:

  • sudo - Điều này cho phép bạn thực hiện lệnh này như root , kể từ khi bạn đang chỉnh sửa file sammy không có quyền truy cập vào.
  • chown - Lệnh này thay đổi quyền sở hữu file .
  • -R - Cờ này thay đổi quyền sở hữu một cách đệ quy, bao gồm tất cả các folder con và file .
  • sammy :www-data - Điều này đặt chủ sở hữu là user không phải root của bạn ( sammy ) và giữ group dưới dạng www-data để Apache vẫn có thể truy cập các file để phân phát chúng.
  • /var/www/ wordpress - Điều này chỉ định đường dẫn đến folder WordPress của bạn. Đây là folder mà quyền sở hữu sẽ thay đổi.

Để xác minh lệnh này thành công, hãy liệt kê nội dung của folder WordPress:

  • ls -la /var/www/wordpress

Bạn sẽ thấy một danh sách các nội dung của folder :

Output
total 216 drwxr-x---  5 sammy www-data  4096 Apr 13 15:42 . drwxr-xr-x  4 root  root      4096 Apr 13 15:39 .. -rw-r-----  1 sammy www-data   235 Apr 13 15:54 .htaccess -rw-r-----  1 sammy www-data   420 Nov 30  2017 index.php -rw-r-----  1 sammy www-data 19935 Jan  1 20:37 license.txt -rw-r-----  1 sammy www-data  7425 Jan  9 02:56 readme.html -rw-r-----  1 sammy www-data  6919 Jan 12 06:41 wp-activate.php drwxr-x---  9 sammy www-data  4096 Mar 13 00:18 wp-admin -rw-r-----  1 sammy www-data   369 Nov 30  2017 wp-blog-header.php -rw-r-----  1 sammy www-data  2283 Jan 21 01:34 wp-comments-post.php -rw-r-----  1 sammy www-data  2898 Jan  8 04:30 wp-config-sample.php -rw-r-----  1 sammy www-data  3214 Apr 13 15:42 wp-config.php drwxr-x---  6 sammy www-data  4096 Apr 13 15:54 wp-content -rw-r-----  1 sammy www-data  3847 Jan  9 08:37 wp-cron.php drwxr-x--- 19 sammy www-data 12288 Mar 13 00:18 wp-includes -rw-r-----  1 sammy www-data  2502 Jan 16 05:29 wp-links-opml.php -rw-r-----  1 sammy www-data  3306 Nov 30  2017 wp-load.php -rw-r-----  1 sammy www-data 38883 Jan 12 06:41 wp-login.php -rw-r-----  1 sammy www-data  8403 Nov 30  2017 wp-mail.php -rw-r-----  1 sammy www-data 17947 Jan 30 11:01 wp-settings.php -rw-r-----  1 sammy www-data 31085 Jan 16 16:51 wp-signup.php -rw-r-----  1 sammy www-data  4764 Nov 30  2017 wp-trackback.php -rw-r-----  1 sammy www-data  3068 Aug 17  2018 xmlrpc.php

Những file này là những file có trong lõi WordPress trong file có tên là latest.tar.gz mà bạn đã download từ wordpress.org trong yêu cầu Cách cài đặt WordPress với LAMP trên Ubuntu 18.04 . Nếu các quyền xuất hiện như trong kết quả trước đó, điều này nghĩa là các file và folder của bạn đã được cập nhật chính xác.

Trong bước này, bạn đã cập nhật cài đặt WordPress của bạn để cấp cho mình quyền truy cập để chỉnh sửa các file của nó. Trong bước tiếp theo, bạn sẽ sử dụng quyền truy cập đó để tạo các file sẽ tạo một plugin WordPress.

Bước 2 - Tạo một plugin WordPress cơ bản

Đến đây bạn có quyền truy cập để sửa đổi các file trong folder WordPress, bạn sẽ tạo một plugin WordPress cơ bản và thêm nó vào cài đặt. Điều này sẽ cho phép React tương tác với WordPress ở phần sau của hướng dẫn.

Một plugin WordPress có thể đơn giản như:

  1. Thư mục bên trong wp-content/plugins .
  2. Một file bên trong folder đó có cùng tên và phần mở rộng file .php .
  3. Một comment đặc biệt ở đầu file đó cung cấp cho WordPress metadata plugin quan trọng.

Để tạo một plugin cho mã React mà bạn sẽ viết sau này, hãy bắt đầu bằng cách tạo một folder cho plugin WordPress. Để đơn giản, hướng dẫn này sẽ đặt tên cho plugin là react-wordpress . Chạy lệnh sau, thay thế wordpress bằng root tài liệu Apache của bạn:

  • mkdir /var/www/wordpress/wp-content/plugins/react-wordpress

Sau đó, chuyển đến folder mới được tạo. Các lệnh tiếp theo sẽ được thực hiện từ đây.

  • cd /var/www/wordpress/wp-content/plugins/react-wordpress

Hãy tạo file plugin ngay bây giờ. Hướng dẫn này sẽ sử dụng nano, được gọi bằng lệnh nano , làm editor dòng lệnh cho tất cả các file . Bạn cũng có thể tự do sử dụng bất kỳ editor nào khác mà bạn chọn, chẳng hạn như Pico , Vim hoặc Emacs .

Mở react-wordpress .php để chỉnh sửa:

  • nano react-wordpress.php

Thêm các dòng sau vào file của bạn để tạo phần bắt đầu của plugin:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php
<?php /**  * @wordpress-plugin  * Plugin Name:       Embedding React In Wordpress  */  defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

Phần được comment ở trên cùng cung cấp metadata cho plugin và dòng kiểm tra hằng số ABSPATH ngăn kẻ xấu truy cập trực tiếp vào tập lệnh này bằng URL của nó. ABSPATH là đường dẫn tuyệt đối đến folder root WordPress của bạn, vì vậy nếu ABSPATH được xác định, bạn có thể chắc chắn rằng file đã được tải qua môi trường WordPress.

Lưu ý: Nhiều trường có sẵn cho comment metadata plugin, nhưng chỉ Plugin Name là bắt buộc. Xem trang Yêu cầu tiêu đề trong tài liệu WordPress để biết thêm chi tiết.

Tiếp theo, mở trình duyệt web và chuyển đến trang Plugins trong domain của bạn ( https:// your_domain /wp-admin/plugins.php ). Bạn sẽ thấy plugin của bạn được liệt kê cùng với các plugin mặc định của WordPress:

Trang plugin quản trị WP

Nhấp vào Kích hoạt để bật plugin của bạn.

Khi bạn đã kích hoạt plugin của bạn , hàng chứa plugin của bạn sẽ được đánh dấu bằng màu xanh lam, với đường viền màu xanh lam ở bên trái và thay vì một liên kết bên dưới có nội dung Kích hoạt , sẽ có một liên kết cho biết Hủy kích hoạt :

Trang plugin quản trị WP sau khi kích hoạt plugin

Tiếp theo, bạn sẽ cài đặt cấu trúc plugin của bạn .

Quay lại terminal của bạn để mở react-wordpress .php :

  • nano react-wordpress.php

Sau đó, cập nhật nó để thêm các dòng được đánh dấu sau, xác định các hằng số hữu ích:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php
<?php /**  * @wordpress-plugin  * Plugin Name:       Embedding React In Wordpress  */  defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );  define( 'ERW_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' ); define( 'ERW_ASSET_MANIFEST', ERW_WIDGET_PATH . '/build/asset-manifest.json' ); define( 'ERW_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );

Trong các dòng mới được thêm vào, bạn đã xác định ba hằng số:

  1. ERW_WIDGET_PATH - Đây sẽ là đường dẫn đến ứng dụng React.
  2. ERW_ASSET_MANIFEST - Đây là đường dẫn đến file kê khai nội dung React, một file chứa danh sách các file JavaScript và CSS cần được đưa vào trang để ứng dụng của bạn hoạt động.
  3. ERW_INCLUDES - Thư mục con này sẽ chứa tất cả các file PHP.

Lưu ý mỗi define() tham plugin_dir_path( __FILE__ ) đến plugin_dir_path( __FILE__ ) . Đó là viết tắt của đường dẫn folder đến file đó.

Sau khi thêm các định nghĩa hằng số, hãy lưu file và thoát khỏi editor .

Lưu ý: Điều quan trọng là không gian tên các hằng số của bạn. Trong trường hợp này, ta đang sử dụng không gian tên ERW_ , viết tắt của Embedding React trong WordPress . Tiền tố biến với không gian tên này đảm bảo chúng là duy nhất để chúng không xung đột với các hằng được xác định trong các plugin khác.

Để tạo folder include includes/ , sẽ chứa các file PHP khác, hãy bắt đầu ở cấp cao nhất của folder plugin, /var/www/ your_domain /wp-content/plugins/ react-wordpress . Sau đó, tạo folder :

  • mkdir includes

Đến đây bạn đã hoàn thiện các file và folder liên quan đến PHP cần thiết để tạo một plugin WordPress, bạn sẽ tạo các file và folder ban đầu cho React.

Bước 3 - Khởi tạo ứng dụng React

Trong bước này, bạn sẽ sử dụng Create React App để khởi tạo ứng dụng React của bạn .

Hướng dẫn này đã được thử nghiệm bằng Tạo ứng dụng React version 3.0.1 . Phiên bản 3.0.0 đã áp dụng các thay đổi đột phá đối với cấu trúc của asset-manifest.json , do đó, version trước đó không tương thích với hướng dẫn này nếu không có sửa đổi. Để đảm bảo bạn đang sử dụng version mong đợi ở đây, hãy chạy lệnh này để cài đặt Tạo ứng dụng React:

  • sudo npm install --global create-react-app@3.0.1

Lệnh này sẽ cài đặt version 3.0.1 của Create React App. Cờ --global sẽ cài đặt nó trên toàn hệ thống. Việc cài đặt trên toàn hệ thống đảm bảo khi bạn chạy create-react-app npx create-react-app create-react-app (hoặc npx create-react-app ) mà không có bất kỳ đường dẫn nào được chỉ định, bạn sẽ sử dụng version bạn vừa cài đặt.

Sau khi cài đặt Create React App, hãy sử dụng nó để tạo ứng dụng React. Hướng dẫn này sẽ đặt tên cho widget ứng dụng:

  • sudo create-react-app widget

Lệnh này sử dụng npx , là một mã binary đi kèm với NPM . Nó được thiết kế để giúp bạn dễ dàng sử dụng các công cụ CLI và các file thực thi khác được lưu trữ trên NPM. Nó sẽ cài đặt các công cụ đó nếu chúng không được tìm thấy local .

Lệnh create-react-app sẽ tạo một folder dự án và tất cả các file cần thiết cho một ứng dụng React cơ bản. Điều này bao gồm index.html , JavaScript khởi động, CSS và file thử nghiệm và package.json để xác định dự án và các phần phụ thuộc của bạn. Nó bao gồm trước các phụ thuộc và tập lệnh cho phép bạn xây dựng ứng dụng của bạn để production mà không cần cài đặt và cấu hình bất kỳ công cụ xây dựng bổ sung nào.

Khi bạn đã cài đặt ứng dụng widget , kết quả trong terminal sẽ giống như sau:

Output
... Success! Created widget at /var/www/wordpress/wp-content/plugins/react-wordpress/widget Inside that directory, you can run several commands:    npm start     Starts the development server.    npm run build     Bundles the app into static files for production.    npm test     Starts the test runner.    npm run eject     Removes this tool and copies build dependencies, configuration files     and scripts into the app directory. If you do this, you can’t go back!  We suggest that you begin by typing:    cd widget   npm start  Happy hacking!

Tiếp theo, chuyển đến folder mới được tạo:

  • cd widget

Đến đây bạn sẽ có thể xây dựng ứng dụng của bạn bằng lệnh xây dựng mặc định , npm run build . Lệnh build này xem xét file package.json dưới các scripts chính cho một tập lệnh có tên là build :

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/package.json
{   "name": "widget",   "version": "0.1.0",   "private": true,   "dependencies": {     "react": "^16.9.0",     "react-dom": "^16.9.0",     "react-scripts": "3.1.1"   },   "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"     ]   } }

Điều này gọi file thực thi react-scripts.js được cung cấp bởi module nút react-scripts , là một trong những thành phần cốt lõi được cung cấp bởi create-react-app . Điều này lần lượt gọi là tập lệnh xây dựng, sử dụng webpack để biên dịch các file dự án của bạn thành các file nội dung tĩnh mà trình duyệt của bạn hiểu được. Nó thực hiện điều này bằng cách:

  • Giải quyết dependencies .
  • Biên soạn Sass file vào CSS và JSX hoặc nguyên cảo vào JavaScript.
  • Chuyển đổi cú pháp ES6 thành cú pháp ES5 với khả năng tương thích trên nhiều trình duyệt tốt hơn.

Đến đây bạn đã biết một chút về build , hãy chạy lệnh trong terminal của bạn:

  • sudo npm run build

Khi lệnh hoàn tất, bạn sẽ nhận được kết quả tương tự như sau:

Output
> widget@0.1.0 build /var/www/wordpress/wp-content/plugins/react-wordpress/widget > react-scripts build  Creating an optimized production build... Compiled successfully.  File sizes after gzip:    36.83 KB (+43 B)  build/static/js/2.6efc73d3.chunk.js   762 B (+44 B)     build/static/js/runtime~main.a8a9905a.js   710 B (+38 B)     build/static/js/main.2d1d08c1.chunk.js   539 B (+44 B)     build/static/css/main.30ddb8d4.chunk.css  The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages:    "homepage" : "http://myname.github.io/myapp",  The build folder is ready to be deployed. You may serve it with a static server:    npm install -g serve   serve -s build  Find out more about deployment here:    https://bit.ly/CRA-deploy

Dự án của bạn hiện đã được xây dựng, nhưng trước khi chuyển sang bước tiếp theo, cách tốt nhất là đảm bảo ứng dụng của bạn chỉ tải nếu nó có mặt.

React sử dụng một phần tử HTML trong DOM bên trong nó hiển thị ứng dụng. Đây được gọi là phần tử target . Theo mặc định, phần tử này có root ID. Để đảm bảo nút root này là ứng dụng bạn đang tạo, hãy thay đổi src/index.js để kiểm tra ID của target cho erw-root không gian tên. Để làm điều này, đầu tiên hãy mở src/index.js :

  • sudo nano src/index.js

Sửa đổi và thêm các dòng được đánh dấu:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker';  const target = document.getElementById('erw-root'); if (target) { ReactDOM.render(<App />, target); }  serviceWorker.unregister();

Cuối cùng, lưu và thoát khỏi file khi bạn hoàn tất chỉnh sửa.

Trong file này, bạn đã thực hiện hai thay đổi quan trọng đối với index.js mặc định:

  1. Bạn đã thay đổi phần tử đích từ <div id="root"></div> thành <div id="erw-root"></div> để nó có không gian tên cho ứng dụng của bạn.
  2. Bạn đã kèm theo lời gọi tới ReactDOM.render() trong câu lệnh if (...) để ứng dụng chỉ được tải nếu nó có mặt.

Lưu ý: Nếu bạn muốn tiện ích hiện diện trên mọi trang, bạn cũng có thể cần thêm một dòng xử lý lỗi, dòng này sẽ in thông báo đến console nếu không tìm thấy phần tử có ID erw-root . Tuy nhiên, hướng dẫn này sẽ bỏ qua bước này. Một dòng như thế này sẽ tạo ra lỗi console trên mọi trang không có phần tử, kể cả những trang mà bạn không định đưa phần tử vào. Nhiều lỗi console JavaScript này có thể có nguy cơ làm giảm thứ hạng công cụ tìm kiếm cho trang web .

Sau khi thay đổi các file JavaScript hoặc CSS nào trong folder src/ của bạn, điều quan trọng là phải biên dịch lại ứng dụng của bạn để các thay đổi được kết hợp. Để xây dựng lại ứng dụng của bạn, hãy chạy:

  • sudo npm run build

Bây giờ folder build/ của bạn chứa một ứng dụng React đang hoạt động ở dạng file JavaScript và CSS. Bước tiếp theo liên quan đến việc cài đặt một số file PHP sẽ xếp hàng JavaScript và CSS của bạn trong trang.

Bước 4 - Xếp hàng các file JavaScript và CSS

Trong bước này, bạn sẽ sử dụng các hành động và bộ lọc WordPress để:

  1. Xuất mã xếp hàng tập lệnh vào thời điểm thích hợp trong chu kỳ tải trang WordPress.
  2. Xếp hàng các file JavaScript và CSS của bạn theo cách ít ảnh hưởng nhất đến tốc độ tải trang.

WordPress sử dụng các hành động và bộ lọc làm móc nối chính của nó. Các hành động giúp bạn có thể thực thi mã tại một thời điểm cụ thể trong chu kỳ tải trang và các bộ lọc sửa đổi hành vi cụ thể bằng cách thay đổi giá trị trả về của các hàm mà bạn không sở hữu.

Để sử dụng các hook này, bạn sẽ tạo một file PHP chứa mã phân tích cú pháp file kê khai nội dung. Đây chính là file bạn sẽ sử dụng sau này để xếp hàng tất cả các nội dung để các tập lệnh được ghi vào <head> .

Trước khi tạo file , hãy sử dụng lệnh sau để chuyển ra khỏi folder chứa ứng dụng React của bạn và vào folder plugin react-wordpress cấp cao nhất:

  • cd /var/www/wordpress/wp-content/plugins/react-wordpress

Tạo file enqueue.php bên trong folder enqueue.php includes/ :

  • nano includes/enqueue.php

Bắt đầu bằng cách đặt thẻ mở <?php ở đầu file . Ngoài ra, hãy thêm dòng kiểm tra ABSPATH , như đã thảo luận trước đây là phương pháp hay nhất trong mọi file PHP:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php
<?php // This file enqueues scripts and styles  defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );

Lưu và thoát khỏi file này.

Sau đó, cập nhật enqueue.php react-wordpress.php để yêu cầu enqueue.php từ dự án. Đầu tiên, mở file để chỉnh sửa:

  • nano react-wordpress.php

Thêm dòng được đánh dấu sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php
<?php /**  * @wordpress-plugin  * Plugin Name:       Embedding React In Wordpress  */  defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );  define( 'ERW_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' ); define( 'ERW_ASSET_MANIFEST', ERW_WIDGET_PATH . '/build/asset-manifest.json' ); define( 'ERW_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );  require_once( ERW_INCLUDES . '/enqueue.php' );

Đây là một mẫu phổ biến trong các plugin WordPress để yêu cầu các file PHP khác từ folder includes/ để chia các việc quan trọng thành nhiều phần. Hàm require_once() phân tích cú pháp nội dung của file được truyền dưới dạng đối số như thể mã PHP của file đó được viết ngay trong dòng. Không giống như lệnh include tương tự, lệnh require sẽ đưa ra một ngoại lệ nếu không tìm thấy file bạn đang cố gắng yêu cầu. Việc sử dụng require_once() (trái ngược với chỉ enqueue.php require() ) đảm bảo enqueue.php sẽ không được phân tích cú pháp nhiều lần nếu chỉ thị require_once( ERW_INCLUDES . '/enqueue.php' ); được đưa ra nhiều lần.

Lưu và thoát khỏi file .

Bây giờ mở lại includes/enqueue.php :

  • nano includes/enqueue.php

Sau đó, thêm mã được đánh dấu sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php
<?php // This file enqueues scripts and styles  defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );  add_action( 'init', function() {    add_filter( 'script_loader_tag', function( $tag, $handle ) {     if ( ! preg_match( '/^erw-/', $handle ) ) { return $tag; }     return str_replace( ' src', ' async defer src', $tag );   }, 10, 2 );    add_action( 'wp_enqueue_scripts', function() {    }); });

Thêm một chức năng vào hành động init nghĩa là mã này sẽ được chạy trong giai đoạn init của quá trình tải, sau khi chủ đề của bạn và các plugin khác đã tải xong.

Cài đặt async và defer thuộc tính trên <script> thẻ bằng cách sử dụng script_loader_tag lọc cho trình duyệt để tải các kịch bản không đồng bộ thay vì ngăn chặn xây dựng DOM và render nên trang web.

Các wp_enqueue_scripts hành động sau đó enqueues mục front-end. Xem trang này để biết thêm chi tiết.

Đảm bảo ghi file và thoát.

Đến đây bạn đã yêu cầu WordPress viết các thẻ script và stylesheet vào trang. Trong bước tiếp theo này, bạn sẽ phân tích cú pháp một file được gọi là file kê khai nội dung. Điều này sẽ cung cấp cho bạn các đường dẫn đến tất cả các file mà bạn cần xếp hàng.

Bước 5 - Phân tích cú pháp file kê khai nội dung

Trong bước này, bạn sẽ phân tích cú pháp file kê khai nội dung được tạo bởi bản dựng React thành danh sách các file JavaScript và CSS.

Khi bạn xây dựng ứng dụng, tập lệnh xây dựng React sẽ xây dựng dự án của bạn thành nhiều file JavaScript và CSS. Số lượng và tên file sẽ thay đổi tùy theo từng bản dựng, vì mỗi bản dựng bao gồm một hàm băm nội dung của file . Tệp kê khai nội dung cung cấp tên của từng file được tạo trong bản dựng mới nhất cùng với đường dẫn đến file đó. Bằng cách phân tích cú pháp theo chương trình, bạn được đảm bảo các thẻ tập lệnh và biểu định kiểu mà bạn ghi vào trang sẽ luôn trỏ đến đúng file , ngay cả khi tên thay đổi.

Trước tiên, hãy kiểm tra asset-manifest.json bằng lệnh cat :

  • cat widget/build/asset-manifest.json

Nó trông giống như sau :

Output
{   "files": {     "main.css": "/static/css/main.2cce8147.chunk.css",     "main.js": "/static/js/main.a284ff71.chunk.js",     "main.js.map": "/static/js/main.a284ff71.chunk.js.map",     "runtime~main.js": "/static/js/runtime~main.fa565546.js",     "runtime~main.js.map": "/static/js/runtime~main.fa565546.js.map",     "static/js/2.9ca06fd6.chunk.js": "/static/js/2.9ca06fd6.chunk.js",     "static/js/2.9ca06fd6.chunk.js.map": "/static/js/2.9ca06fd6.chunk.js.map",     "index.html": "/index.html",     "precache-manifest.e40c3c7a647ca45e36eb20f8e1a654ee.js": "/precache-manifest.e40c3c7a647ca45e36eb20f8e1a654ee.js",     "service-worker.js": "/service-worker.js",     "static/css/main.2cce8147.chunk.css.map": "/static/css/main.2cce8147.chunk.css.map",     "static/media/logo.svg": "/static/media/logo.5d5d9eef.svg"   } }

Để phân tích cú pháp, mã của bạn sẽ tìm kiếm các khóa đối tượng kết thúc bằng .js và .css .

Mở file enqueue.php của bạn:

  • nano includes/enqueue.php

Thêm đoạn mã được đánh dấu:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php
<?php // This file enqueues scripts and styles  defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );  add_action( 'init', function() {    add_filter( 'script_loader_tag', function( $tag, $handle ) {     if ( ! preg_match( '/^erw-/', $handle ) ) { return $tag; }     return str_replace( ' src', ' async defer src', $tag );   }, 10, 2 );    add_action( 'wp_enqueue_scripts', function() {      $asset_manifest = json_decode( file_get_contents( ERW_ASSET_MANIFEST ), true )['files'];      if ( isset( $asset_manifest[ 'main.css' ] ) ) {       wp_enqueue_style( 'erw', get_site_url() . $asset_manifest[ 'main.css' ] );     }      wp_enqueue_script( 'erw-runtime', get_site_url() . $asset_manifest[ 'runtime~main.js' ], array(), null, true );      wp_enqueue_script( 'erw-main', get_site_url() . $asset_manifest[ 'main.js' ], array('erw-runtime'), null, true );      foreach ( $asset_manifest as $key => $value ) {       if ( preg_match( '@static/js/(.*)\.chunk\.js@', $key, $matches ) ) {         if ( $matches && is_array( $matches ) && count( $matches ) === 2 ) {           $name = "erw-" . preg_replace( '/[^A-Za-z0-9_]/', '-', $matches[1] );           wp_enqueue_script( $name, get_site_url() . $value, array( 'erw-main' ), null, true );         }       }        if ( preg_match( '@static/css/(.*)\.chunk\.css@', $key, $matches ) ) {         if ( $matches && is_array( $matches ) && count( $matches ) == 2 ) {           $name = "erw-" . preg_replace( '/[^A-Za-z0-9_]/', '-', $matches[1] );           wp_enqueue_style( $name, get_site_url() . $value, array( 'erw' ), null );         }       }     }    }); });

Khi bạn hoàn tất, hãy ghi và thoát khỏi file .

Đoạn mã được đánh dấu thực hiện như sau:

  1. Đọc file kê khai nội dung và phân tích cú pháp nó dưới dạng file JSON. Nó truy cập vào nội dung được lưu trữ tại 'files' và lưu trữ nó vào biến $asset_manifest .
  2. Xếp hàng đợi file CSS chính nếu nó tồn tại.
  3. Xếp hàng trước thời gian chạy React, sau đó đến file JavaScript chính, đặt thời gian chạy làm phụ thuộc đảm bảo nó được tải trong trang trước.
  4. Phân tích cú pháp danh sách file kê khai nội dung cho các file JavaScript nào có tên static/js/<hash>.chunk.js và xếp chúng vào hàng sau file chính.
  5. Phân tích cú pháp danh sách file kê khai nội dung cho các file CSS nào có tên static/css/<hash>.chunk.css và xếp chúng vào hàng sau file CSS chính.

Lưu ý: Sử dụng wp_enqueue_script() và wp_enqueue_style sẽ làm cho các <script> và <link> cho các file được xếp hàng xuất hiện trong mọi trang. Đối số cuối cùng true yêu cầu WordPress đặt file bên dưới chân trang nội dung trang thay vì ở cuối phần tử <head> . Điều này rất quan trọng để việc tải các file JavaScript không làm chậm phần còn lại của trang.

Trong bước này, bạn đã cô lập các đường dẫn file của các tập lệnh và kiểu được ứng dụng của bạn sử dụng. Trong bước tiếp theo, bạn sẽ đảm bảo các đường dẫn file đó trỏ đến folder build ứng dụng React của bạn và không có file nguồn nào của bạn có thể truy cập được từ trình duyệt.

Bước 6 - Cung cấp và bảo mật file tĩnh

Đến đây, bạn đã cho WordPress biết những file JavaScript và CSS nào cần tải và tìm chúng ở đâu. Tuy nhiên, nếu bạn truy cập https:// your_domain trong trình duyệt và nhìn vào console JavaScript, bạn sẽ thấy lỗi HTTP 404. (Xem bài viết này để biết thêm thông tin về cách sử dụng console JavaScript.)

404 Lỗi trong Control panel JavaScript

Điều này là do đường dẫn URL đến file (ví dụ: /static/js/main.2d1d08c1.chunk.js ) không trùng với đường dẫn thực tế tới file (ví dụ: /wp-content/plugins/ react-wordpress / widget /build/static/js/main.2d1d08c1.chunk.js ).

Trong bước này, bạn sẽ khắc phục sự cố này bằng cách cho React biết vị trí của folder xây dựng. Bạn cũng sẽ thêm luật ghi lại Apache vào .htaccess để bảo vệ file nguồn của bạn không bị xem trong trình duyệt.

Để cung cấp cho React đường dẫn chính xác đến ứng dụng của bạn, hãy mở package.json bên trong folder ứng dụng React của bạn:

  • sudo nano widget/package.json

Sau đó, thêm dòng homepage đánh dấu:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/package.json
{   "name": "widget",   "version": "0.1.0",   "private": true,   "homepage": "/wp-content/plugins/react-wordpress/widget/build",   "dependencies": {     "react": "^16.9.0",     "react-dom": "^16.9.0",     "react-scripts": "3.1.1"   },   "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"     ]   } }

Viết và thoát khỏi file . Sau đó, xây dựng lại ứng dụng React của bạn. Chuyển đến cấp cao nhất của widget / :

  • cd widget

Sau đó chạy lệnh build :

  • sudo npm run build

Sau khi lệnh xây dựng hoàn tất, hãy kiểm tra file kê khai nội dung bằng cách xuất nội dung của nó vào terminal :

  • cat build/asset-manifest.json

Bạn sẽ thấy rằng tất cả các đường dẫn file đã thay đổi:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/build/asset-manifest.json
{   "files": {     "main.css": "/wp-content/plugins/react-wordpress/widget/build/static/css/main.2cce8147.chunk.css",     "main.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/main.a28d856a.chunk.js",     "main.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/main.a28d856a.chunk.js.map",     "runtime~main.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/runtime~main.2df87c4b.js",     "runtime~main.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/runtime~main.2df87c4b.js.map",     "static/js/2.9ca06fd6.chunk.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/2.9ca06fd6.chunk.js",     "static/js/2.9ca06fd6.chunk.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/2.9ca06fd6.chunk.js.map",     "index.html": "/wp-content/plugins/react-wordpress/widget/build/index.html",     "precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js": "/wp-content/plugins/react-wordpress/widget/build/precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js",     "service-worker.js": "/wp-content/plugins/react-wordpress/widget/build/service-worker.js",     "static/css/main.2cce8147.chunk.css.map": "/wp-content/plugins/react-wordpress/widget/build/static/css/main.2cce8147.chunk.css.map",     "static/media/logo.svg": "/wp-content/plugins/react-wordpress/widget/build/static/media/logo.5d5d9eef.svg"   } }

Điều này cho ứng dụng của bạn biết nơi để tìm các file chính xác, nhưng cũng đưa ra một vấn đề: Nó làm lộ đường dẫn đến folder src của ứng dụng và ai đó quen thuộc với create-react-app có thể truy cập vào https:// your_domain /wp-content/plugins/ react-wordpress / widget /src/index.js và bắt đầu khám phá các file nguồn cho ứng dụng của bạn. Hãy thử nó cho mình!

Để bảo vệ các đường dẫn mà bạn không muốn user truy cập, hãy thêm luật ghi lại Apache vào .htaccess của WordPress.

  • nano /var/www/wordpress/.htaccess

Thêm bốn dòng được đánh dấu:

/var/www/wordpress/.htaccess
<IfModule mod_rewrite.c> RewriteRule ^wp-content/plugins/react-wordpress/widget/(build|public)/(.*) - [L] RewriteRule ^wp-content/plugins/react-wordpress/widget/* totally-bogus-erw.php [L] </IfModule>  # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>  # END WordPress

Điều này yêu cầu Apache cho phép trình duyệt yêu cầu bất kỳ thứ gì tại wp-content/plugins/ react-wordpress / widget /build/ hoặc wp-content/ react-wordpress / widget /public/ . Bất kỳ thứ gì khác sẽ chuyển hướng đến totally-bogus-erw.php . Trừ khi bạn có một file có tên totally-bogus-erw.php ở cấp cao nhất của bạn , yêu cầu này sẽ được xử lý bởi WordPress, điều này sẽ tạo ra lỗi 404.

Có các plugin WordPress, chẳng hạn như Stream , sẽ theo dõi hoạt động yêu cầu và ghi log 404s. Trong log , yêu cầu sẽ hiển thị địa chỉ IP và trang được yêu cầu khi user nhận được 404. Theo dõi totally-bogus-erw.php sẽ cho bạn biết liệu một địa chỉ IP cụ thể có đang cố gắng thu thập thông tin folder src của ứng dụng React của bạn hay không.

Đảm bảo ghi và thoát khỏi file .

Đến đây bạn đã cài đặt định tuyến cần thiết để tải các file JavaScript và CSS của bạn lên trang, đã đến lúc sử dụng mã ngắn để thêm các phần tử HTML vào trang mà JavaScript sẽ tương tác để hiển thị ứng dụng của bạn.

Bước 7 - Tạo mã ngắn

Các mã ngắn giúp bạn có thể chèn các khối HTML phức tạp được nội suy với dữ liệu phía server , với cú pháp trong trang rất đơn giản. Trong bước này, bạn sẽ tạo và đăng ký một shortcode WordPress và sử dụng nó để nhúng ứng dụng của bạn vào trang.

Điều hướng đến cấp cao nhất của plugin của bạn:

  • cd /var/www/wordpress/wp-content/plugins/react-wordpress/

Tạo một file PHP mới sẽ chứa shortcode:

  • touch includes/shortcode.php

Sau đó, chỉnh sửa file PHP chính của bạn để includes/shortcode.php được yêu cầu khi plugin của bạn tải. Mở react-wordpress.php đầu tiên:

  • nano react-wordpress.php

Sau đó, thêm dòng được đánh dấu sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php
<?php /**  * @wordpress-plugin  * Plugin Name:       Embedding React In Wordpress  */  defined( 'ABSPATH' ) or die( 'Direct script access diallowed.' );  define( 'ERW_WIDGET_PATH', plugin_dir_path( __FILE__ ) . '/widget' ); define( 'ERW_ASSET_MANIFEST', ERW_WIDGET_PATH . '/build/asset-manifest.json' ); define( 'ERW_INCLUDES', plugin_dir_path( __FILE__ ) . '/includes' );  require_once( ERW_INCLUDES . '/enqueue.php' ); require_once( ERW_INCLUDES . '/shortcode.php' );

Viết và thoát khỏi file .

Bây giờ, hãy mở file shortcode mới được tạo:

  • nano includes/shortcode.php

Thêm mã sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php
<?php // This file enqueues a shortcode.  defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );  add_shortcode( 'erw_widget', function( $atts ) {   $default_atts = array();   $args = shortcode_atts( $default_atts, $atts );    return "<div id='erw-root'></div>"; });

Đoạn mã này chứa hầu hết là bản viết sẵn. Nó đăng ký một shortcode có tên là erw_widget , khi được gọi ra, sẽ in <div id="erw-root"></div> , phần tử root của ứng dụng React, vào trang.

Lưu và thoát shortcode.php .

Để xem ứng dụng React đang hoạt động, bạn cần tạo một trang WordPress mới và thêm shortcode vào đó.

Điều hướng đến https:// your_domain /wp-admin trong trình duyệt web. Ở đầu trang, bạn sẽ thấy một thanh màu đen có biểu tượng WordPress ở bên trái, tiếp theo là biểu tượng ngôi nhà, tên trang web , biểu tượng bong bóng comment và số, và một liên kết khác có nội dung + Mới . Di chuột qua nút + Mới và menu sẽ thả xuống. Nhấp vào mục menu có nội dung Trang .

Tạo một trang

Khi màn hình tải, con trỏ của bạn sẽ được đặt tiêu điểm trong hộp văn bản có nội dung Thêm tiêu đề . Nhấp vào đó và bắt đầu nhập để đặt tiêu đề phù hợp cho trang mới. Hướng dẫn này sẽ sử dụng Ứng dụng React của tôi :

Đặt tiêu đề cho trang

Giả sử bạn đang sử dụng trình soạn thảo Gutenberg của WordPress , bạn sẽ thấy một dòng văn bản gần đầu trang, bên dưới tiêu đề, có nội dung Bắt đầu viết hoặc nhập / để chọn khối . Khi bạn di chuột qua văn bản đó, ba biểu tượng sẽ xuất hiện ở bên phải. Chọn cái gần nhất giống với [/] để thêm khối mã ngắn:

Thêm một khối mã ngắn

[erw_widget] mã ngắn [erw_widget] vào vùng văn bản mới được thêm vào. Sau đó, nhấp vào nút Xuất bản… màu xanh lam ở góc trên bên phải của cửa sổ, rồi nhấn Xuất bản để xác nhận.

Nhập Mã ngắn của bạn và Xuất bản

Bạn sẽ thấy một thanh màu xanh lục xác nhận trang đã được xuất bản. Nhấp vào liên kết Xem Trang :

Nhấp vào Liên kết để Xem Trang

Trên màn hình, bạn sẽ thấy ứng dụng của bạn :

Ứng dụng React hoạt động

Đến đây bạn đã có ứng dụng React cơ bản hiển thị trong trang, bạn có thể tùy chỉnh ứng dụng đó với các tùy chọn do administrator cung cấp phía server .

Bước 8 - Đưa cài đặt do server tạo

Trong bước này, bạn sẽ đưa cài đặt vào ứng dụng bằng cả dữ liệu do server tạo và dữ liệu do user cung cấp. Điều này sẽ cho phép bạn hiển thị dữ liệu động trong ứng dụng của bạn và sử dụng trình nhiều lần trong một trang.

Đầu tiên, hãy mở index.js :

  • sudo nano widget/src/index.js

Sau đó, xóa import App from './App'; và cập nhật nội dung của index.js với các dòng được đánh dấu sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import * as serviceWorker from './serviceWorker';  const App = () => (   <div className="App">     <span className="App__Message">Hello,<br />World!</span>   </div> );  const target = document.getElementById('erw-root'); if (target) { ReactDOM.render(<App />, target); }  serviceWorker.unregister();

Điều này sửa đổi ứng dụng React của bạn để thay vì trả về màn hình Tạo ứng dụng React mặc định, nó sẽ trả về một phần tử có nội dung Hello, World! .

Lưu và thoát khỏi file . Sau đó, mở index.css để chỉnh sửa:

  • nano widget/src/index.css

Thay thế nội dung của index.css bằng đoạn mã sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.css
.App {   width: 100px;   height: 100px;   border: 1px solid;   display: inline-block;   margin-right: 20px;   position: relative; }  .App .App__Message {   font-size: 15px;   line-height: 15px;   position: absolute;   top: 50%;   transform: translateY(-50%);   text-align: center;   width: 100%; }

Các kiểu cho .App sẽ hiển thị một hình vuông 100 pixel, với đường viền chắc chắn và các kiểu cho .App__Message sẽ hiển thị văn bản được căn giữa bên trong hình vuông, theo cả chiều dọc và chiều ngang.

Viết và thoát khỏi file , sau đó xây dựng lại ứng dụng:

  • cd widget 
  • sudo npm run build

Sau khi xây dựng thành công, hãy làm mới https:// your_domain /index.php/ my-react-app / trong trình duyệt của bạn. Đến đây bạn sẽ thấy hộp mà bạn đã tạo kiểu bằng CSS, cùng với văn bản Hello, World! :

Ứng dụng phản ứng đơn giản

Tiếp theo, bạn sẽ thêm cài đặt tùy chỉnh, bao gồm màu và kích thước đường viền do user cung cấp. Bạn cũng sẽ chuyển tên hiển thị của user hiện tại từ server .

Cập nhật mã rút gọn để chấp nhận đối số

Để chuyển một đối số do user cung cấp, trước tiên bạn phải cung cấp cho user một cách để truyền một đối số. Quay lại terminal , chuyển trở lại cấp cao nhất của plugin của bạn:

  • cd ..

Tiếp theo, mở file shortcode.php của bạn để chỉnh sửa:

  • nano includes/shortcode.php

Cập nhật file mã ngắn của bạn để chứa các dòng được đánh dấu sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php
<?php // This file enqueues your shortcode.  defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );  add_shortcode( 'erw_widget', function( $atts ) {   $default_atts = array( 'color' => 'black' );   $args = shortcode_atts( $default_atts, $atts );    return "<div class='erw-root'></div>"; });

Viết và thoát khỏi file . Lưu ý cách mã thêm 'color' => 'black' vào mảng $default_atts . color khóa mảng hướng dẫn WordPress mong đợi rằng thuộc tính color có thể được chuyển tới shortcode [erw_widget] . Giá trị mảng, black , đặt giá trị mặc định. Tất cả các thuộc tính shortcode được chuyển cho hàm shortcode dưới dạng chuỗi, vì vậy nếu bạn không muốn đặt giá trị mặc định, bạn có thể sử dụng chuỗi trống ( '' ) để thay thế. Dòng cuối cùng thay đổi để sử dụng một lớp thay vì một ID vì dự kiến sẽ có nhiều hơn một phần tử trong trang.

Bây giờ, hãy quay lại trình duyệt của bạn và nhấp vào nút Chỉnh sửa bên dưới Hello, World! cái hộp. Cập nhật trang WordPress trong trình duyệt của bạn để thêm version thứ hai của shortcode và thêm thuộc tính màu cho cả hai version . Hướng dẫn này sẽ sử dụng [erw_widget color="#cf6f1a"] và [erw_widget color="#11757e"] :

Thêm tiện ích thứ hai

Nhấp vào nút Cập nhật màu xanh lam để lưu.

Lưu ý: Tiện ích thứ hai sẽ chưa hiển thị. Bạn cần cập nhật ứng dụng React để mong đợi nhiều trường hợp được xác định bởi một lớp thay vì một trường hợp duy nhất được xác định bởi một ID.

Tiếp theo, mở index.js để chỉnh sửa:

  • sudo nano widget/src/index.js

Cập nhật nó với những điều sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import * as serviceWorker from './serviceWorker';  const App = () => (   <div className="App">     <span className="App__Message">Hello,<br />World!</span>   </div> );  const targets = document.querySelectorAll('.erw-root'); Array.prototype.forEach.call(targets, target => ReactDOM.render(<App />, target));  serviceWorker.unregister();

Viết và thoát khỏi file . Các dòng được cập nhật sẽ gọi ứng dụng React trên mỗi version với lớp erw-root . Vì vậy, nếu mã ngắn được sử dụng hai lần, hai hình vuông sẽ xuất hiện trong trang.

Cuối cùng, mở index.css để chỉnh sửa:

  • sudo nano widget/src/index.css

Cập nhật file để chứa dòng được đánh dấu sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.css
.erw-root { display: inline-block; }  .App {   width: 100px;   height: 100px;   border: 1px solid;   display: inline-block;   margin-right: 20px;   position: relative; }  .App .App__Message {   font-size: 15px;   line-height: 15px;   position: absolute;   top: 50%;   transform: translateY(-50%);   text-align: center;   width: 100%; }

Với dòng được thêm này, nhiều tiện ích con liền kề sẽ xuất hiện cạnh nhau thay vì một tiện ích con ở trên cái kia.

Lưu và thoát khỏi file .

Bây giờ, hãy biên dịch lại ứng dụng React của bạn:

  • cd widget 
  • sudo npm run build

Bây giờ, nếu bạn làm mới trang trong trình duyệt của bạn , bạn sẽ thấy cả hai tiện ích:

Hai vật dụng

Chú ý rằng các widget vẫn không hiển thị màu viền. Điều này sẽ được giải quyết trong một phần trong tương lai.

Nhận dạng duy nhất từng trường hợp tiện ích con

Để xác định duy nhất từng tiện ích con, cần phải chuyển một ID từ server . Điều này có thể được thực hiện thông qua thuộc tính data-id của phần tử root . Điều này rất quan trọng vì mỗi tiện ích con trên trang có thể có các cài đặt khác nhau.

Để thực hiện việc này, hãy quay lại folder plugin cấp cao nhất của bạn và mở shortcode.php để chỉnh sửa:

  • cd .. 
  • nano includes/shortcode.php

Cập nhật nó để có các dòng được đánh dấu sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php
<?php // This file enqueues your shortcode.  defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );  add_shortcode( 'erw_widget', function( $atts ) {   $default_atts = array( 'color' => 'black' );   $args = shortcode_atts( $default_atts, $atts );   $uniqid = uniqid('id');    return "<div class='erw-root' data-id='{$uniqid}'></div>"; });

Dòng mới đầu tiên tạo một ID duy nhất với id tiền tố. Dòng cập nhật sẽ đính kèm ID vào React root bằng cách sử dụng thuộc tính data-id . Điều này sẽ làm cho ID có thể truy cập được trong React.

Lưu file , nhưng chưa thoát khỏi nó.

Ghi Cài đặt vào Đối tượng window JavaScript

Trong file shortcode, bạn sẽ ghi các cài đặt vào trang trong một đối tượng JavaScript global cửa sổ. Sử dụng đối tượng window đảm bảo nó có thể được truy cập từ bên trong React.

Với shortcode.php vẫn đang mở, hãy cập nhật nó để nó chứa những thứ sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php
<?php // This file enqueues your shortcode.  defined( 'ABSPATH' ) or die( 'Direct script access disallowed.' );  add_shortcode( 'erw_widget', function( $atts ) {   $default_atts = array( 'color' => 'black' );   $args = shortcode_atts( $default_atts, $atts );   $uniqid = uniqid('id');    global $current_user;   $display_name = $current_user ? $current_user->display_name : 'World';    ob_start(); ?>   <script>   window.erwSettings = window.erwSettings || {};   window.erwSettings["<?= $uniqid ?>"] = {     'color': '<?= $args["color"] ?>',     'name': '<?= $display_name ?>',   }   </script>   <div class="erw-root" data-id="<?= $uniqid ?>"></div>    <?php   return ob_get_clean(); });

Các bản cập nhật này viết một khối <script> trước mỗi phần tử khởi tạo đối tượng cài đặt window-global và điền nó với dữ liệu được cung cấp trong WP Admin.

Lưu ý: Cú pháp <?= Là viết tắt của <?php echo

Lưu và thoát khỏi file .

Bây giờ, hãy kiểm tra trang WordPress trong trình duyệt web . Điều này sẽ hiển thị cho bạn HTML cho trang web . Nếu bạn CTRL+F và tìm kiếm window.erwSettings , bạn sẽ thấy các cài đặt được ghi vào HTML của trang như sau:

...   window.erwSettings = window.erwSettings || {};   window.erwSettings["id5d5f1958aa5ae"] = {     'color': '#cf6f1a',     'name': 'sammy',   } ...

Truy xuất cài đặt từ React

Trong ứng dụng React, bạn sẽ truy xuất cài đặt dựa trên ID và chuyển giá trị màu đường viền cho thành phần App dưới dạng thuộc tính ( prop ). Điều này cho phép Thành phần App dụng sử dụng giá trị mà không cần biết nó đến từ đâu.

Mở index.js để chỉnh sửa:

  • sudo nano widget/src/index.js

Cập nhật nó để nó chứa các dòng được đánh dấu sau:

/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import * as serviceWorker from './serviceWorker';  const App = ({ settings }) => (   <div className="App" style={{borderColor: settings.color}}>     <span className="App__Message">Hello,<br />{settings.name}!</span>   </div> );  const targets = document.querySelectorAll('.erw-root'); Array.prototype.forEach.call(targets, target => {   const id = target.dataset.id;   const settings = window.erwSettings[id];   ReactDOM.render(<App settings={settings} />, target) });  serviceWorker.unregister();

Lưu file và thoát khỏi editor của bạn.

Ứng dụng React của bạn bây giờ sẽ sử dụng ID duy nhất từ đối tượng window-global window.erwSettings để truy xuất cài đặt và chuyển chúng vào thành phần App . Để có hiệu lực, hãy biên dịch lại ứng dụng của bạn:

  • cd widget 
  • sudo npm run build

Sau khi hoàn thành bước cuối cùng này, hãy làm mới trang WordPress trong trình duyệt của bạn. Bạn sẽ thấy màu đường viền do user cung cấp và tên hiển thị do server cung cấp xuất hiện trong các tiện ích:

Các tiện ích có cài đặt được áp dụng

Kết luận

Trong hướng dẫn này, bạn đã tạo plugin WordPress của riêng mình bằng ứng dụng React bên trong nó. Sau đó, bạn đã xây dựng một shortcode như một cầu nối để làm cho ứng dụng của bạn có thể nhúng vào trong trình tạo trang Quản trị WP và cuối cùng, bạn đã tùy chỉnh tiện ích của bạn trên trang.

Bây giờ, bạn có thể mở rộng ứng dụng React của bạn với sự tự tin rằng cơ chế phân phối của bạn đã được áp dụng. Nền tảng này trong WordPress đảm bảo bạn có thể tập trung vào trải nghiệm phía client và khi ứng dụng của bạn mở rộng và phát triển, bạn có thể dễ dàng thêm nhiều công cụ và kỹ thuật theo hướng production sẽ hoạt động với cài đặt WordPress nào.

Để đọc thêm về những gì bạn có thể làm với nền tảng React vững chắc của bạn , hãy thử khám phá một trong các hướng dẫn sau:

Tags:

Các tin liên quan

Cách cài đặt và cấu hình Laravel với LEMP trên Ubuntu 18.04
2019-08-01
Cách triển khai và quản lý DNS của bạn bằng OctoDNS trên Ubuntu 18.04
2019-07-23
Cách thiết lập hệ thống bàn trợ giúp với OTRS trên Ubuntu 18.04
2019-06-28
Cách triển khai và quản lý DNS của bạn bằng DNSControl trên Ubuntu 18.04
2019-06-26
Cách cấu hình Cụm Galera với MariaDB trên server Ubuntu 18.04
2019-06-20
Cách backup thư mục lớn với Unison trên Ubuntu 18.04
2019-05-21
Cách tạo một cụm Kubernetes bằng Kubeadm trên Ubuntu 18.04
2019-04-24
Cách tạo một cụm Kubernetes bằng Kubeadm trên Ubuntu 16.04
2019-04-24
Cách tạo một cụm Kubernetes bằng Kubeadm trên Ubuntu 18.04
2019-04-24
Cách tạo một cụm Kubernetes bằng Kubeadm trên Ubuntu 16.04
2019-04-24