Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Tạo plugin khối cho WordPress bằng Node.js


Tạo plugin khối cho WordPress bằng Node.js


Để tạo plugin khối cho WordPress bằng Node.js, hãy làm theo các bước sau:

1. Cài đặt Node.js và npm:
- Đảm bảo bạn đã cài đặt Node.js trên máy của mình. Nếu không, hãy tải xuống và cài đặt nó từ trang web chính thức của Node.js[1] [2].

2. Thiết lập Plugin khối khởi đầu:
- Điều hướng đến thư mục `wp-content/plugins` của bản cài đặt phát triển cục bộ của bạn. Sau đó, chạy lệnh `npx @wordpress/create-block` để tạo một plugin khối. Lệnh này tạo ra tất cả mã cần thiết để bắt đầu một dự án và tích hợp thiết lập bản dựng JavaScript hiện đại mà không cần cấu hình[3] [4].

3. Định cấu hình Plugin chặn:
- Lệnh `create-block` sẽ nhắc bạn nhập dữ liệu theo từng bước. Bạn cũng có thể sử dụng chế độ khởi động nhanh để chuyển trực tiếp các tùy chọn cụ thể vào dòng lệnh, loại bỏ nhu cầu về lời nhắc tương tác[4].

4. Xây dựng và chạy Block Plugin:
- Chạy `npm start` để khởi động máy chủ phát triển và tự động xây dựng lại khối bất cứ khi nào phát hiện bất kỳ thay đổi mã nào. Khi bạn đã sẵn sàng triển khai khối của mình, hãy sử dụng `npm run build` để tối ưu hóa mã của bạn và làm cho mã sẵn sàng sản xuất[4].

5. Tích hợp với WordPress:
- Kích hoạt plugin được tạo trong WordPress. Điều này sẽ làm cho khối có sẵn trong Trình chỉnh sửa [4].

6. Tùy chỉnh và mở rộng khối:
- Sửa đổi mã soạn sẵn để tùy chỉnh và mở rộng khối khi cần thiết. Điều này liên quan đến việc sử dụng JavaScript hiện đại (ESNext và JSX) và tận dụng gói `wp-scripts` cho các tác vụ xây dựng và linting[4].

Bằng cách làm theo các bước này, bạn có thể tạo và quản lý các plugin khối tùy chỉnh cho WordPress bằng Node.js và gói `@wordpress/create-block`.

Trích dẫn:
[1] https://wpdevelopment.courses/articles/wordpress-create-block/
[2] https://kinsta.com/courses/gutenberg-block-development/setting-up-a-block-plugin/
[3] https://www.npmjs.com/package/%40wordpress/create-block
[4] https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/
[5] https://www.youtube.com/watch?v=-aa4F4Dn9GY