Dashboard Framework

jankx/dashboard-framework là một giải pháp giao diện quản trị hiệu suất cao, dựa trên React dành cho WordPress themes. Nó mang lại trải nghiệm người dùng hiện đại để quản lý các tùy chọn theme, cài đặt và dashboard widgets.

Kiến trúc

Framework được xây dựng với kiến trúc tách biệt (decoupled), phân chia rõ ràng giữa giao diện JavaScript (GUI) và logic xử lý PHP.

  • GUI (React): Nằm trong thư mục gui/, được biên dịch bằng Webpack.
  • Backend (PHP): Xử lý định tuyến (routing), AJAX endpoints và lưu trữ dữ liệu.
  • Bridge: Sử dụng các hooks tiêu chuẩn của WordPress và biến global để giao tiếp.

Giao diện React

Giao diện được xây dựng bằng các nguyên lý React hiện đại. Nó sử dụng lớp trừu tượng (abstraction) của WordPress element để đảm bảo tương thích hoàn toàn với các plugin khác và trình soạn thảo block core.

Thành phần chính

  • OptionFrameworkApp: Điểm khởi đầu chính và là nơi quản lý state toàn cục.
  • ReduxFields: Bộ render giúp ánh xạ cấu hình trường dữ liệu sang component React tương ứng.
  • Field Components: Các điều khiển đơn lẻ như IconField, MediaField, và FieldCheckbox.
// Ví dụ về một trường Icon trong React
import React, { useState } from 'react';
import { Search } from 'lucide-react';

export const FieldIcon = ({ value, onChange }) => {
    // ... logic chọn icon
};

PHP Backend

Phần PHP của framework quản lý việc đăng ký menu và nạp (enqueue) các file assets cần thiết.

use Jankx\Option\Framework;

$framework = new Framework();
$framework->init();

// Thêm một trang cài đặt
$framework->addPage([
    'id' => 'general',
    'title' => __('General Settings', 'jankx'),
    'icon' => 'dashicons-admin-generic'
]);

Ajax & Dữ liệu

Việc truy xuất dữ liệu được xử lý qua các AJAX handlers tiêu chuẩn của WordPress. Điều này đảm bảo an ninh qua nonces và cung cấp một giao diện nhất quán cho frontend.

Hành động (Action) Mô tả
jankx_option_save Lưu toàn bộ object options vào database.
fetch_icons Lấy danh sách icon khả dụng từ IconRepository.

Phát triển với ❤️ bởi đội ngũ Jankx.