Tạo theme Wordpress bằng React - Phần 1
wordpress
16
#react
1
White

devweekend viết ngày 22/11/2021

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 - nhưng với tư cách là một chủ đề WordPress thì đây chính là bài viết dành cho bạn

React là sản phẩm của Facebook và theo trang web của họ: React là một thư viện để xây dựng giao diện người dùng. Nó có cơ sở người dùng rất rộng và rất nhiều mô-đun có sẵn, điều này làm cho nó trở nên lý tưởng cho xây dưng theme.

Ở 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 loạt các bài viết:

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 những thứ sau để bắt đầu:

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

Giới thiệu ngắn gọn về create-react-wptheme.

Mục đích của create-react-wptheme là 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ới ứng dụng create-react, về cơ bản nó có cùng chức năng
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
Cài đặt theme React cho WordPress
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

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ó.

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

Bạn xem tiếp tại Hướng dận xây dựng theme WordPress bằng React - Vì bài viết dài mình không thể chia sẽ hết tại đây

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

devweekend

8 bài viết.
21 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
3 0
(Link) (Ảnh) “Ngày xưa, có một ngọn núi lớn, bên sườn núi có một tổ chim đại bàng. Trong tổ có bốn quả trứng lớn. Một trận động đất xảy ra làm r...
devweekend viết 5 tháng trước
3 0
White
3 0
(Ảnh) Kỹ năng Tư duy phản biện Khi đi du học, mình nhận ra một điểm chung của đa số các sinh viên nước ngoài những nước có nền giáo dục phát tri...
devweekend viết 2 tháng trước
3 0
White
2 0
Nội Dung Bài Viết Bước 1 Xác định chính xác những điều mà bạn mong muốn Bước 2 Viết chúng ra Bước 3 Xác lập thời hạn(deadline) Bước 4 Xác định nhữn...
devweekend viết 5 tháng trước
2 0
Bài viết liên quan
Male avatar
9 1
Để bắt đầu làm thêm của riêng bạn thì ban đầu bạn phải có một theme trắng ( Blank theme ) để bắt đầu Theme trắng là gồm có các thư mục và file cơ b...
Doan Van Manh viết 6 năm trước
9 1
White
1 1
Bài viết này chúng sẽ nói về Clouds. Không phải mây trên bầu trời mà là sự khác nhau giữa Cloudflare và CloudFront. Hiểu theo cách đơn giản, mục đ...
Hùng Phạm viết gần 2 năm trước
1 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
8 bài viết.
21 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!