Cách Dùng WordPress với React Để Tạo Headless CMS cho ứng dụng Web

Headless WordPress là gì? Cách tạo headless CMS cho website Wordpress như thế nào? Theo dõi ngay bài viết này của LANIT nhé!

WordPress Rest API là tính năng tuyệt vời mà WordPress cung cấp để cho phép các nhà phát triển tạo ra plugin và chủ đề hấp dẫn. Đồng thời, nó cũng cho phép cung cấp năng lượng cho các ứng dụng của bên thứ 3 bằng WordPress CMS.

Hệ thống quản lý nội dung cũng được phát triển để quản lý nội dung website trong các ứng dụng web hiện đại. Chúng có thể tăng khối lượng công việc cho các nhà phát triển. Rest API cung cấp nhiều tính năng, trong đó bao gồm việc sử dụng WordPress với React như một headless CMS cho JavaScript.

Headless WordPress là gì?

Trang WordPress headless là trang web chủ yếu sử dụng WordPress để quản lý nội dung và sử dụng nhiều công nghệ để xây dựng giao diện người dùng và hiện thị nội dung tới khách truy cập. Rest API cho phép các nhà phát triển tương tác với giao diện cross-technology không giới hạn, nhằm giao tiếp thông qua ngôn ngữ JSON.

Cách Dùng WordPress với React Để Tạo Headless CMS cho ứng dụng Web
WordPress Headless là gì?

WordPress Rest API chia dữ liệu bằng định dạng JSON, điều này có thể thể hiện qua một dãy số trên web. JSON biểu diễn các đối tượng JavaScript chứa các dữ liệu theo cặp key-value. Bài viết này, chúng tôi sẽ mô phỏng tiềm năng WordPress Rest API đem lại bằng cách sử dụng với React và WordPress như một headless CMS cho ứng dụng web cơ bản.

Cách Cài Đặt trang web WordPress cho ReactJS

Bước 1: Chọn nhà cung cấp Hosting

Đầu tiên, bạn cần chọn nền tảng lưu trữ website WordPress phù hợp khi thiết lập wordpress và tạo headless CMS.

Dịch vụ Hosting WordPress đóng vai trong giúp website WordPress headless kể cả khi phần Header được tách ra theo cách tiếp cận Headless, nhưng Body vẫn nằm lại ở Server Hosting.

Hiệu suất, tính bảo mật và độ tin cậy của Server đảm bảo nội dung trên trang web được phân phối đến người dùng đều phụ thuộc vào công nghệ bạn dùng. Trước đó, việc chọn được một nhà cung cấp Server có sự hỗ trợ và bảo mật tốt nhất.

LANIT – nhà cung cấp hosting, máy chủ uy tín tại Việt Nam. Dịch vụ hosting web tại LANIT đảm bảo tốc độ, bảo mật và hỗ trợ chuyên nghiệp đảm bảo headless WordPress của bạn hoạt động mượt mà.

Ngoài ra, LANIT đảm bảo tính bảo mật mạnh mẽ thông qua các biện pháp firewall mạnh mẽ, cập nhật phần mềm, cài đặt SSL, giúp bảo vệ dữ liệu các hoạt động tương tác của bạn. Backup tự động và khôi phục dữ liệu nhanh chóng giúp dữ liệu của bạn được bảo vệ hoàn toàn. Dịch vụ hỗ trợ 24/7 đảm bảo các vấn đề được xử lý nhanh chóng, giúp bạn tập trung vào việc xây dựng và quản lý CMS headless của mình mà không gặp bất kỳ rắc rối nào liên quan đến lưu trữ.

Bước 2: Kích hoạt WordPress Rest API

Đầu tiên, tải file Zip của plugin WP-Rest API từ git. Tải thư mục zip lên thư mục Plugin WordPress của bạn. Sau khi thành công, hãy kích hoạt Plugin để chạy WordPress Rest API.

Bước 3: Tìm nạp dữ liệu bài đăng

Để lấy dữ liệu bài viết, hãy thực hiện các bước sau: Vào Setting => Permalinks và chọn giữa Post name hoặc Custom Strucure

Khi làm việc với lệnh API call, hãy tải xuống tiện ích mở rộng chrome cho Postman. Trong Postman, nhập URL theo format https://example.com/wp-json/wp/v2/posts. URL này sẽ lấy dữ liệu bài viết bên trong trang WP của bạn.

Bước 4: Tạo Custom Post Type

Để tạo custom post type: Tải Custom Post Type UI plugin để tạo các bài đăng tùy chỉnh.

Cách Dùng WordPress với React Để Tạo Headless CMS cho ứng dụng Web
Tạo Headless CMS cho ứng dụng Web

Cài đặt và kích hoạt plugin rồi thêm một post type mới. Trong bài hướng dẫn, bạn cần tạo custom post type cho Sách.

Cách Dùng WordPress với React Để Tạo Headless CMS cho ứng dụng Web
Tạo Headless CMS cho ứng dụng Web

Trong khung Post Type Slug, ghi tên bạn muốn tạo. Hãy chắc chắn rằng bạn để Show trong REST API checkbox là True và REST API base slug cũng đi kèm. Điều này bắt buộc nếu bạn muốn sử dụng WordPress headless CMS

Cách Dùng WordPress với React Để Tạo Headless CMS cho ứng dụng Web
Tạo Headless CMS cho ứng dụng Web

Kiểm tra toàn bộ mục bạn muốn tìm từ REST API.

Cách Dùng WordPress với React Để Tạo Headless CMS cho ứng dụng Web
Tạo Headless CMS cho ứng dụng Web

Sau khi lưu thay đổi, bạn sẽ có thêm cài đặt mới ở thanh sidebar. Chọn chúng để thêm mục Book vào custom post type của bạn.

Chúng ta sẽ tạo quyển sách đầu tiên bằng cách chèn những dữ liệu mẫu và một ngoại lệ cho post này.

Bước 5: Kiểm tra và xác thực

Để xác thực dữ liệu có sẵn thông qua API, hãy tiếp tục và chọn URL trong Postman. URL có dạng https://exampe.com/wp-json/wp/v2/books. Bạn cũng có thể mở rộng các trường khác bằng cách sử dụng
Plugin ACF hay ACF vào RestAPI.

Cách Dùng WordPress với React Để Tạo Headless CMS cho ứng dụng Web
Tạo Headless CMS cho ứng dụng Web

Cài đặt và kích hoạt cả hai plugin.

Cách Dùng WordPress với React Để Tạo Headless CMS cho ứng dụng Web
Tạo Headless CMS cho ứng dụng Web

Mặc định, ACF không hỗ trợ WordPress Rest API nên chúng ta cần tải cả plugin ACF REST API.

Cách Dùng WordPress với React Để Tạo Headless CMS cho ứng dụng Web
Tạo Headless CMS cho ứng dụng Web

Bạn hãy chắc chắn rằng bạn chọn loại bài post mình muốn từ trong danh sách. Sau đó gõ Publish. Một fiel mới được điền bên trong post nơi bạn có thể quyết định bên xuất bản quyển sách của bạn. Đó là tất cả những gì chúng ta cần để gửi dữ liệu đến ứng dụng web ReactJS.

Cách cài đặt React

JavaScript là một công cụ mạnh mẽ cho các nhà phát triển web và React là một JavaScript library dành cho website được phát triển bởi facebook và cộng đồng các developer. ReactJS chủ yếu được dùng để phát triển các ứng dụng trang web.

Điều kiện

Đảm bảo bạn đã cài đặt đủ các yêu cầu dưới đây ở trên máy tính trước khi xây dựng React:

  • NodeJS & NPM
  • Trình soạn thảo văn bản như Sublime hoặc Visual Studio Code.
  • Git để quản lý phiên bản (Không bắt buộc)

Tạo project với ReactJS

Sau khi cài đặt environmentn, mở command line và chạy đoạn code sau để tạo một project với ReactJS
npx create-react-app frontend

Một khi app đã được tạo, hãy cd tới thư mục application và gõ lệnh sau để cài đặt gói Axios cho API calls: npm i axios

Tiếp theo, mở thư mục trong text editor bạn muốn. Khởi chạy ứng dụng bằng cách chạy lệnh npm start.

Bạn có thể xây dựng ứng dụng web của mình với React bằng cách sử dụng WordPress headless CMS nếu mọi thứ hoạt động bình thường.

Tạo một thư mục “component” bên trong thư mục srrc, trong “component”, tạo một file mới tên là “Books.js’

Cách kết xuất dữ liệu bài đăng trên ReactJS

Trong file Book.js, có thể nạp thêm dữ liệu từ API WordPress Rest. Dưới đây là những dòng code yêu cầu đến đích của Rest API, trong trường hợp này là ‘/books’ và được hiển thị dữ liệu ở định dạng JSON.

Cách Dùng WordPress với React Để Tạo Headless CMS cho ứng dụng Web
Cách kết xuất dữ liệu bài đăng trên ReactJS

Đoạn code ở trên cho thấy mảnh dữ liệu trong bảng điều khiển, sau đó được sử dụng bên trong render block. Bên trong file App.js, điền thông tin của Books dưới đây:

import React from ‘react’
import ‘./App.css’;
import Books from’./components/Books’;
return (

<div className=”App”>

<Books/>

</div>

);
}
export default App;

App.js là điểm mấu chốt của ứng dụng. Trước đó, bạn cần đánh dấu mục “Books” trong file.

Cách hiển thị dữ liệu bài đăng trên ReactJS

Dưới đây là cách bạn xem post data trên ReactJS. Thêm những đoạn Code dưới đây thông qua phương pháp render:

Cách hiển thị dữ liệu bài đăng trên ReactJS
Cách hiển thị dữ liệu bài đăng trên ReactJS

Thay vì hiển thị dữ liệu ở đây, chúng ta sẽ tạo một mục mới và đặt tên là “ BookItems.js ” để biệt khỏi những thành phần chính. Thay đổi phương thức render trong Bookk.js:

Cách hiển thị dữ liệu bài đăng trên ReactJS
Cách hiển thị dữ liệu bài đăng trên ReactJS

Bây giờ, bạn cần render mục BookItems. Trong BookItems.js thêm những đoạn code dưới đây:

Cách hiển thị dữ liệu bài đăng trên ReactJS
Cách hiển thị dữ liệu bài đăng trên ReactJS

Ở đoạn code trên, mình đang gợi nhắc đến thông tin của quyển sách để lấy tiêu đề và những thông tin khác. Hãy chắc chắn rằng BookItems ở trong mục “Books”

Và đầu ra trong trình duyệt trông như thế này:

Ưu điểm và hạn chế khi sử dụng WordPress headless CMS

Ưu điểm:

  • Dễ sử dụng: Bạn có thể dễ dàng lựa chọn và thiết kết bất kỳ giao diện nào bạn muốn với công nghệ hiện đại.
  • Bảo mật hơn vì khi mặt trước được tách biệt với mặt sau, sẽ có rất ít khả năng nội dung của bạn gặp vấn đề cực kỳ thấp.

Hạn chế

  • Headless WordPress CMS khá phức tạp
  • Nếu nhân lực hạn chế, người mới muốn quản lý cả hai hệ thống này sẽ chán nản khi chúng yêu cầu bạn phải xử lý cập nhật, kiểm tra tính tương thích, phải sửa lỗi cho cả CMS và giao diện người dùng.

Kết luận

Trên đây, chúng tôi đã hướng dẫn cách sử dụng WordPress với React để tạo một headless CMS cho ứng dụng web của bạn để mở ra một tính năng cho các developer và content creator. Bằng cách tách phần front end và back end, bạn có thể linh hoạt trong việc thiết kế giao diện người dùng với các tính năng mạnh mẽ của React trong khi quản lý nội dung liền mạch thông qua WordPress.

Nếu bạn còn có thêm thắc mắc gì hoặc cần tư vấn dịch vụ lưu trữ, liên hệ ngay với LANIT để được hỗ trợ chi tiết!

avata Hải

Triệu Huyền Trang

Triệu Huyền Trang chuyên gia 3 năm kinh nghiệm trong ngành Công Nghệ, Phần Mềm. Chuyên chia sẻ các kiến thức phần mềm mã nguồn, ứng dụng và thông tin về công nghệ hữu ích.

Chat với chúng tôi qua Zalo!
Chat với chúng tôi qua Zalo!