Hướng dẫn lập trình theme Wordpress với React - Phần 1 ( Updated)

Nếu bạn muốn xây dựng theme Wordpress là một Single Page Application (SPA) với Rest API của WordPress - thì bài viết Hướng dẫn lập trình theme Wordpress với React sẽ dành riêng cho bạn

React là sản phẩm của Facebook, là một thư viện để xây dựng giao diện người dùng. 

React có một số lượng người dùng rất rộng lớn và có rất nhiều mô-đun có sẵn, điều này làm cho React trở nên lý tưởng cho xây dưng website từ đơn giản đến phức tạp

Ở trong bài viết này chúng ta sử dụng package create-react-wptheme để tạo theme WordPress nhanh chóng với React.

Đây sẽ là bài viết đầu tiên của một series:

Phần 1 - Cài đặt và tìm hiểu về theme React WordPress

Phần 2 - Xây dựng component, route và context trong theme React WordPress

Phần 3 - Vòng lặp, phân trang trong theme React WordPress

Chúng tôi sẽ cần có:

• nodejs + npm
• git bash 
• cài đặt WordPress localhost
• create-react-wptheme

Giới thiệu create-react-wptheme

create-react-wptheme là package giúp chúng ta tạo một theme WordPress dựa trên React mới với một vài lệnh

Nếu bất kỳ ai trong số các bạn đã quen thuộc vớ create-react, về cơ bản nó có cùng chức năng với create-react-wptheme.

Nhưng đối với WordPress, một điểm khác biệt chính là nó sử dụng WordPress (không phải webpack), làm server - backend còn sử dụng react như front end.

Vì đây là một theme WordPress nên bạn có quyền truy cập vào tất cả các chức năng cốt lõi, filters, actions, hooks, v.v của WordPress.

Ngoài ra, bạn có thể sử dụng nonce của WordPress cho các yêu cầu được xác thực.

Cuối cùng, nếu bạn phải sử dụng PHP thuần túy cho một trang cụ thể, bạn vẫn có thể sử dụng các mẫu page template của WordPress - điều này rất tiện dụng.

Bây giờ chúng ta hãy bắt đầu.

Cài đặt theme WordPress bằng React

Bước 1 - Cài đặt theme WordPress với React

Trước tiên, bạn phải cài đặt WordPress localhost, sau đó khởi động git bash trong thư mục theme.

Image

Trong Windows, git bash là một công cụ khá tốt, bạn chỉ cần nhấp chuột phải và “Git Bash Here”. Thao tác này sẽ khởi chạy git bash nơi chúng ta có thể bắt đầu cài đặt của mình. Nhập lệnh dưới đây:

npx create-react-wptheme barebones

Lưu ý: "barebone" là tên của theme, bạn có thể thay thế bằng tên mình muốn.

Sau khi hoàn tất, bạn sẽ có một thư mục theme tên là barebones và trong đó có chứa react-src là nơi thư mục chứa toàn bộ code react hoạt động của bạn.

Hiện tới đây bạn sẽ thiếu một số file, nếu vào trong wp-admin > themes sẽ thấy theme chưa hợp lệ.

Bước tiếp theo dùng lệnh wpstart để hoàn thành cài đặt. Theo dõi theo các lệnh sau

cd barebones/react-src
npm run wpstart

Sau đó quay trở lại wp-admin > themes, ta sẽ thấy theme barebones xuất hiện, hãy active nó.

Image

Tuy nhiên đến đây bạn sẽ gặp thông báo "Please restart the Nodejs watcher now…"  . Điều này có nghĩa là bạn cần chạy wpstart một lần nữa để thiết lập mọi thứ.

Quay trở lại git bash, sau đó nhập lệnh

npm run wpstart

Sau khi quá trình biên dịch thành công, một cửa sổ của trình duyệt sẽ bật lên như hình

Image

Đến đây bạn đã cài đặt thành công theme WordPress chạy bằng React.

Lưu ý:

1. wpstart là dành chế độ dev - khi nào bạn thay đổi code trong thư mục react-src thì tệp sẽ biên dịch lại và bạn sẽ thấy thay đổi của mình ngay lập tức trên trình duyệt.
2. Không chỉnh sửa file trong thư mục ROOT vì nó sẽ tự build lại khi bạn thay đổi code trong react-src

Tìm hiểu cấu trúc theme React WordPress

Trong theme React WordPress của chúng ta sẽ có cấu trúc như thế này

Image

Có thể thấy rằng không hề có cấu trúc nào giống kiểu theme WordPress thông thưởng, mọi thứ chỉ toàn là JavaScript.

Như đã đề cập ở trên, bên trong react-src là phiên bản không biên dịch và "có thể chỉnh sửa" code của bạn. Mọi thứ khác (thư mục ROOT và thư mục Static) là kết quả đầu ra của những gì bạn có trong react-src.

Hãy lưu ý tệp văn bản đó có tiêu đề ! DO_NOT_EDIT_THESE_FILES! .Txt đang thông báo cho bạn biết không được thay đổi bất kỳ những gì trong thư mục Root.

Thư mục "public"

Tác giả của create-react-wptheme đã tạo cho chúng ta một thư mục public, là nơi chúng ta có thể thêm, override thư mục Root như functions.php, style css, hay javascript ...

Cứ mỗi lần biên dịch thì thư mục gốc sẽ nhận code, file từ trong public.

Image

Thư mục này chính là nơi mà bạn có thể can thiệp và sử dụng các hooks, actions, filters,... của WordPress cung cấp.

Index.php trong thư mục này là file sẽ tải 1 lần và nơi mà ứng dụng React sẽ được thực hiện và tương tác với WordPress thông qua REST API.

Thư mục "build"

Build là thư mục cuối cùng nơi chứa các code đã được biên dịch, rút gọn và nén lại. Nó gần giống như thư mục ROOT và không chứa bất kỳ code nào của lập trình viên. 

Chúng ta cũng sẽ không can thiệp vào đó. Và thư mục này có liên quan đến wpbuild.

wpbuild

Thử chạy đoạn lên bên dưới tại git bash

npm run wpbuild

bạn sẽ có kết quả như sau

Image

Đây đơn giản chỉ hiển thị các file được tự động tạo, chúng được nén và tối ưu được đặt trong thư mục build.

Lúc này file ! DO_NOT_EDIT_THESE_FILES! .Txt sẽ bị biến mất, toàn bộ theme react wordpress của bạn đã được xây dựng cho toàn bộ người dùng truy cập.

Khi bạn muốn quay lại chế độ dev để phát triển mới theme bạn sử dụng lại lệnh npm run wpstart.

Xem tiếp : Tạo theme Wordpress bằng React - Phần 2

Xem tiếp : Tạo theme Wordpress bằng React - Phần 3