“Global Styles” là một hệ thống giúp người dùng thay đổi giao diện tổng thể của trang web mà không cần chỉnh sửa từng khối hoặc trang riêng lẻ. Đối với các nhà phát triển theme, Global Styles giúp việc định dạng các khối trong trình chỉnh sửa và giao diện người dùng trở nên dễ dàng hơn.
Lợi ích của Global Styles:
• Người dùng có thể chọn màu nền cho toàn bộ trang hoặc thay đổi chiều cao dòng của tất cả các khối tiêu đề từ một nơi duy nhất.
• Với các biến thể kiểu dáng, nhà phát triển theme có thể thêm nhiều kiểu khác nhau để người dùng lựa chọn, chẳng hạn như phiên bản tối, sáng hoặc màu tím, làm cho theme trở nên đa dạng hơn.
• Global Styles có độ ưu tiên CSS thấp: Các kiểu được thêm vào các khối được chọn riêng lẻ, bao gồm cả các kiểu trong mã HTML của mẫu khối, sẽ ghi đè lên Global Styles.
Cả các theme cổ điển dựa trên PHP và các block theme đều có thể sử dụng Global Styles thông qua tệp theme.json. Tuy nhiên, chỉ có block theme mới sử dụng giao diện Styles mới.
Giao diện Styles:
WordPress đã giới thiệu giao diện Styles như một phần của Trình chỉnh sửa Trang (Site Editor) trong phiên bản 5.9. Bạn có thể tìm thấy các điều khiển này trong một bảng điều khiển bên riêng biệt trong Trình chỉnh sửa Trang.
Để truy cập:
1. Vào Trình chỉnh sửa Trang qua Giao diện > Trình chỉnh sửa trong quản trị WordPress.
2. Chọn mục Styles trong thanh bên:
• Trong Trình chỉnh sửa Trang, bạn có thể mở thanh bên Styles bằng cách nhấp vào biểu tượng với vòng tròn đen trắng chia đôi (bên cạnh nút lưu).
• Trong bảng đầu tiên, bạn có thể truy cập các tùy chọn cho kiểu chữ, màu sắc và bố cục cho toàn bộ trang web.
• Ở cuối thanh bên, bạn có thể mở bảng Blocks để chọn các thiết lập mặc định cho các loại khối.
theme.json là gì?
Global Styles hoạt động với sự trợ giúp của một tệp cấu hình theme mới gọi là theme.json. Các nhà phát triển theme có thể sử dụng theme.json để xác định các thiết lập mặc định cho cả trang web và các khối.
Bạn sử dụng theme.json để bật và tắt các tính năng được hỗ trợ, nhưng không thể sử dụng nó để thêm các tính năng không được hỗ trợ vào các khối.
Định dạng:
theme.json sử dụng định dạng JSON. Một trong những lý do các nhà phát triển Gutenberg chọn JSON là vì tính dễ sử dụng của nó. Nếu bạn quen thuộc với mảng hoặc Đối tượng JavaScript, bạn sẽ không gặp khó khăn khi làm việc với theme.json.
WordPress phân tích dữ liệu từ các đối tượng JSON và định dạng lại chúng thành CSS và các thuộc tính tùy chỉnh CSS. Sau đó, WordPress tải các kiểu này trong trình chỉnh sửa và trên giao diện người dùng.
Cách tạo theme.json:
1. Phiên bản: Đảm bảo rằng bạn đang sử dụng phiên bản theme.json phù hợp với phiên bản WordPress hiện tại.
2. Các phần chính: theme.json bao gồm các phần chính như settings (cài đặt), styles (kiểu dáng) và customTemplates (mẫu tùy chỉnh).
3. Cài đặt: Trong phần settings, bạn có thể bật hoặc tắt các tính năng, chẳng hạn như hỗ trợ cho các khối cụ thể hoặc các tùy chọn màu sắc.
4. Kiểu dáng: Phần styles cho phép bạn xác định các kiểu dáng mặc định cho các yếu tố khác nhau trên trang web.
5. Các phần bổ sung: Bạn có thể thêm các phần bổ sung khác tùy thuộc vào yêu cầu của theme.
Ưu tiên kiểu dáng:
Global Styles có độ ưu tiên CSS thấp, nghĩa là các kiểu được thêm vào các khối được chọn riêng lẻ sẽ ghi đè lên Global Styles. Điều này cho phép người dùng tùy chỉnh các khối cụ thể mà không ảnh hưởng đến các thiết lập toàn cục.
Việc sử dụng theme.json và Global Styles giúp đơn giản hóa quá trình phát triển theme và cung cấp cho người dùng khả năng tùy chỉnh giao diện trang web một cách dễ dàng và linh hoạt.
Leave a Reply