Theme.json Trong WordPress Là Gì? Hướng Dẫn Chi Tiết Cho Người Mới Bắt Đầu

Trong các phiên bản WordPress hiện đại, theme.json đã trở thành một phần quan trọng trong quá trình xây dựng và quản lý theme. Đây là tệp tin cấu hình trung tâm giúp đơn giản hóa việc tùy chỉnh giao diện và kiểm soát các thiết lập trong Gutenberg (Block Editor). Nếu bạn đang phát triển theme hoặc muốn tối ưu hóa khả năng tùy chỉnh trong WordPress, theme.json là công cụ mà bạn không thể bỏ qua.

Theme.json Là Gì?

theme.json là một tệp cấu hình được giới thiệu từ WordPress 5.8, giúp các nhà phát triển khai báo cài đặt (settings) và kiểu dáng (styles) cho theme chỉ trong một tệp duy nhất. Thay vì viết CSS thủ công hoặc dùng nhiều hàm PHP, bạn có thể kiểm soát màu sắc, typography, layout, spacing… ngay bên trong theme.json.

Tệp tin này giúp WordPress hiểu rõ cách theme muốn hiển thị và áp dụng các giá trị đồng nhất trên toàn bộ website.

Lợi Ích Khi Sử Dụng theme.json

• Quản lý tập trung: Tất cả thiết lập của theme được quản lý chỉ trong một tệp tin duy nhất.
• Đồng bộ giữa Editor và Frontend: Các tùy chỉnh trong theme.json áp dụng cả cho trình chỉnh sửa Gutenberg và giao diện thực tế.
• Tối ưu hiệu suất: WordPress tự tạo CSS cần thiết dựa trên theme.json, giảm CSS thừa.
• Dễ làm việc nhóm: Nhiều lập trình viên có thể chỉnh sửa theme mà không sợ xung đột mã nguồn.
• Không cần nhiều hook phức tạp: Giảm đáng kể việc dùng PHP để cấu hình block editor.

Cấu Trúc Cơ Bản Của theme.json

Một theme.json tiêu chuẩn thường bao gồm hai phần lớn: settings và styles.

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Màu chính",
                    "slug": "main-color",
                    "color": "#ff0000"
                }
            ]
        },
        "typography": {
            "fontSizes": [
                {
                    "name": "Nhỏ",
                    "slug": "small",
                    "size": "12px"
                }
            ]
        }
    },
    "styles": {
        "color": {
            "background": "#ffffff"
        }
    }
}

Cách Tạo theme.json Cho Theme WordPress

1. Tạo tệp theme.json: Trong thư mục theme, tạo tệp mới tên theme.json.
2. Thêm cấu hình cơ bản: Sao chép cấu trúc JSON mẫu và điều chỉnh theo thiết kế.
3. Kiểm tra trong giao diện: Truy cập Editor → Styles để xem các tùy chỉnh hiển thị.

Tùy Chỉnh theme.json Cho Theme Của Bạn

Bạn có thể mở rộng theme.json với nhiều thiết lập khác nhau như:

• Màu sắc: Thêm nhiều màu custom cho Block Editor.
• Typography: Quy định font chính, font phụ, kích thước chữ.
• Bố cục: Điều chỉnh spacing, margin, padding, độ rộng content.
• Kiểu dáng toàn trang: Thay đổi background, border, radius…

Ví Dụ Ứng Dụng theme.json Trong Dự Án WordPress

• Thay đổi màu nền mặc định: Chỉnh sửa phần styles.color.background.
• Định nghĩa font-size custom: Thêm danh sách kích thước chữ trong typography.fontSizes.
• Chặn người dùng thay đổi một số thiết lập: Ví dụ vô hiệu hóa màu tùy chỉnh trong settings.

Những Lưu Ý Khi Làm Việc Với theme.json

• Cú pháp phải chính xác: JSON rất dễ lỗi nếu dư dấu phẩy hoặc sai dấu ngoặc.
• Kiểm tra thường xuyên: Nếu Editor không hiển thị đúng, hãy kiểm tra lỗi JSON.
• Không lạm dụng: Chỉ khai báo những thiết lập thật sự cần thiết.

Kết Luận

theme.json là một bước tiến lớn trong cách WordPress vận hành theme, giúp tối ưu hóa quy trình phát triển và tăng khả năng tùy chỉnh. Nếu bạn đang muốn xây dựng một theme WordPress hiện đại, hỗ trợ tốt cho Gutenberg hoặc Full Site Editing, thì theme.json là công cụ bắt buộc phải sử dụng.

Hãy bắt đầu bằng việc tạo theme.json cơ bản và dần mở rộng để phù hợp với phong cách thiết kế và cấu trúc theme của bạn.