WP Plugin Toolkit

WP Plugin Toolkit là bộ khung mã nguồn mở Perxel dùng để dựng plugin WordPress, gồm hai phần: một template repository cho phần backend và một bộ giao diện admin dùng chung cho phần frontend. Đây là nền tảng chuẩn cho mọi plugin do Perxel phát triển, gồm cả Perxel Image Optimizer, Perxel AI Translate và Perxel Accordion for TinyMCE. Các plugin này đều đã được duyệt lên thư mục plugin WordPress.org.

Bài toán

Khi bắt đầu một plugin mới, phần lớn thời gian đầu không dành cho tính năng mà cho việc dựng lại bộ khung: cấu trúc thư mục, autoloading, các hook kích hoạt và gỡ bỏ, cấu hình build và CI. Sau đó là viết lại CSS và JS cho các trang cài đặt, và mỗi plugin lại lệch nhau một chút về bố cục và thao tác.

WP Plugin Toolkit gộp cả hai phần này thành một điểm khởi đầu chung, để công sức tập trung vào phần logic nghiệp vụ.

Template repository: wp-plugin-starter

wp-plugin-starter là một GitHub template repository. Tạo repo mới từ nó là có ngay một plugin chạy được: codebase đã đặt namespace và autoload theo PSR-4, một màn hình Settings mẫu render trong bố cục dùng chung, PHPCS và WordPress Plugin Check chạy trong CI, và một workflow đóng gói file zip cài đặt rồi phát hành lên WordPress.org.

Tạo một plugin mới từ toolkit

Các bước đều có trong README của repo, không cần công cụ riêng:

1. Tạo repo mới từ template. Trên GitHub, chọn Use this template rồi clone về máy.
2. Thay sáu token đặt tên (namespace, tên hiển thị, slug, tên repo, tiền tố hằng số và tiền tố hook) bằng một lệnh sed, sau đó đổi tên file chính và file .pot. Không có bước build.
3. Thêm bộ giao diện admin nếu plugin có trang cài đặt. Chạy bin/update-ui.sh với version mới nhất của wp-plugin-ui. Plugin chỉ chạy trong editor hoặc qua shortcode thì bỏ qua bước này.
4. Kiểm tra và đóng gói. composer run lint chạy PHPCS, composer run build tạo file zip cài đặt trong dist/.
5. Phát hành. Sau khi WordPress.org duyệt lần đầu, mỗi bản Release trên GitHub sẽ tự đẩy lên WordPress.org.

Bộ giao diện admin: wp-plugin-ui

wp-plugin-ui là một lớp giao diện admin nhẹ, render phía server bằng PHP với vài dòng JS thuần, không framework và không bước build. Nó cung cấp một bố cục chính gồm sidebar tính năng và vùng nội dung, cùng một số thành phần dựng sẵn nằm trên nền CSS gốc của wp-admin thay vì thay thế nó.

Các thành phần hiện có:

• Bố cục chính. Sidebar tính năng, thanh tiêu đề cố định với nút Save, footer hiện version và link hỗ trợ.
• Danh sách cài đặt theo nhóm. Mỗi dòng có nhãn, mô tả ngắn và control bên phải, kèm chấm trạng thái và một vùng riêng cho thao tác xóa.
• Control nhập liệu. Toggle, nhóm chọn nhiều dạng pill, chọn màu và chọn file từ Media Library.
• Phản hồi. Notice, thanh tiến trình, meter gọn trong một dòng và spinner.

Cùng một bố cục ở hai plugin khác nhau: Perxel Image Optimizer (trái) và Perxel AI Translate (phải).

Bộ giao diện được vendor vào từng plugin tại vendor/perxel-ui/, theo cùng mô hình với Action Scheduler: commit vào repo plugin, đóng gói trong file zip, cập nhật bằng một script. Trình nạp lúc chạy luôn chọn bản version cao nhất trong số các plugin đang kích hoạt, nên một bản cũ trong plugin này không thể làm hỏng hay đổi giao diện của plugin khác.

Trong cùng một major version, API của bộ giao diện chỉ thêm chứ không bớt. Vì vậy, plugin cũ dùng bản kit mới hay plugin mới dùng bản kit cũ đều không gây lỗi; nếu plugin cần bản mới hơn bản đang chạy, trang quản trị chỉ hiện một thông báo.

Đã qua vòng duyệt của WordPress.org

Mỗi plugin gửi lên WordPress.org đều được team Plugin Review đọc mã nguồn trước khi duyệt, chủ yếu về bảo mật và chuẩn viết code của WordPress. Các plugin dựng trên toolkit này đã được duyệt:

• Perxel Image Optimizer. Chuyển ảnh WordPress sang WebP ngay trên server.
• Perxel AI Translate. Dịch bài viết WPML bằng AI qua OpenRouter.
• Perxel Accordion for TinyMCE. Thêm nút tạo accordion vào Classic Editor.

Các góp ý của team review được sửa luôn trong toolkit, nên plugin nào dựng sau này, kể cả custom plugin làm cho khách hàng, cũng bắt đầu từ cùng một chuẩn đó.

Một nền chung cho mọi plugin

Bộ toolkit rút ngắn thời gian khởi tạo một plugin mới và giữ cho toàn bộ danh mục plugin của Perxel thống nhất về kiến trúc backend lẫn giao diện admin. Việc nâng cấp một điểm chung được áp dụng đồng bộ cho mọi plugin qua thao tác cập nhật vendor.

Cả hai repo phát hành công khai trên GitHub để lập trình viên và agency tham khảo hoặc dùng làm bộ khung cho dự án của mình. Bộ toolkit này là nền cho dịch vụ lập trình custom plugin tại Perxel.

Footnotes

1. wp-plugin-starter
2. wp-plugin-ui
3. Action Scheduler
4. Perxel Image Optimizer trên WordPress.org
5. Perxel AI Translate trên WordPress.org
6. Perxel Accordion for TinyMCE trên WordPress.org