Bạn muốn tạo ra một trang web WordPress độc đáo và mang đậm dấu ấn cá nhân? Bài viết này sẽ hướng dẫn bạn cách sử dụng file theme.json để tùy chỉnh CSS một cách chuyên nghiệp, giúp bạn **override các thuộc tính mặc định** và tạo ra giao diện hoàn toàn mới. Chúng ta sẽ cùng khám phá sức mạnh của **custom properties**, **block styles** và cách tích hợp chúng với các plugin để nâng tầm trải nghiệm người dùng.
theme.json là một file cấu hình mạnh mẽ trong WordPress, cho phép bạn định nghĩa các cài đặt và style cho trang web của mình. Sử dụng theme.json mang lại nhiều lợi ích so với việc chỉnh sửa trực tiếp các file CSS truyền thống:
theme.json có tính kế thừa, giúp bạn dễ dàng tạo ra các style thống nhất trên toàn bộ trang web.
theme.json.
theme.json tích hợp chặt chẽ với Block Editor, cho phép bạn tùy chỉnh style cho từng block một cách dễ dàng.
Khi muốn override các thuộc tính CSS được định nghĩa trong theme.json, bạn có thể sử dụng CSS selectors như :root và html:root. Tuy nhiên, cần lưu ý rằng :root có thể không hoạt động trên frontend do bị ghi đè bởi global-styles-inline-css.
Để đảm bảo **tính tương thích** giữa frontend và Block Editor, bạn có thể sử dụng html:root để tăng độ đặc hiệu (specificity) của selector. Ví dụ:
html:root {
@media (min-width: 1020px) {
--wp--preset--font-size--xxl: 3.25rem;
/* Các thuộc tính khác */
}
}
Giải pháp này đảm bảo rằng các style của bạn được áp dụng trên cả frontend và trong Block Editor, mang lại trải nghiệm nhất quán cho người dùng và người chỉnh sửa nội dung. Nếu bạn muốn các style của mình được tải sau global-styles-inline-css, bạn có thể cân nhắc thay đổi thứ tự enqueue của stylesheet.
theme.json cho phép bạn định nghĩa **custom properties** (hay còn gọi là CSS variables) để lưu trữ các giá trị có thể tái sử dụng trên toàn bộ trang web. Điều này giúp bạn dễ dàng thay đổi các giá trị như màu sắc, font chữ, khoảng cách, v.v. một cách nhanh chóng và đồng nhất.
Bạn có thể định nghĩa **custom properties** trong phần settings.custom của file theme.json. Ví dụ:
{
"version": 2,
"settings": {
"custom": {
"textShadow": "2px 2px 2px rgba(0, 0, 0, 0.3)"
}
}
}
WordPress sẽ tự động tạo ra CSS custom property với tên --wp--custom--text-shadow và áp dụng nó trên cả frontend và trong Block Editor.
Để sử dụng **custom properties** trong CSS, bạn sử dụng hàm var(). Ví dụ:
body {
text-shadow: var(--wp--custom--text-shadow);
}
Bằng cách này, bạn có thể dễ dàng thay đổi giá trị của text-shadow trên toàn bộ trang web chỉ bằng cách sửa đổi giá trị của --wp--custom--text-shadow trong theme.json.
theme.json cho phép bạn tùy chỉnh style cho từng block cụ thể, giúp bạn tạo ra các thiết kế độc đáo và phù hợp với từng loại nội dung.
Để tùy chỉnh style cho một block cụ thể, bạn sử dụng cấu trúc settings.blocks[block-name].custom. Ví dụ, để thay đổi text-shadow cho Heading block:
{
"version": 2,
"settings": {
"custom": {
"textShadow": "2px 2px 2px rgba(0, 0, 0, 0.3)"
},
"blocks": {
"core/heading": {
"custom": {
"textShadow": "2px 2px 2px rgba(0, 0, 0, 0.7)"
}
}
}
}
}
Trong ví dụ này, text-shadow sẽ có giá trị mặc định là rgba(0, 0, 0, 0.3) trên toàn bộ trang web, nhưng sẽ được override thành rgba(0, 0, 0, 0.7) cho Heading block.
Bạn có thể tích hợp theme.json với các plugin để mở rộng khả năng tùy chỉnh của trang web. Một số plugin cho phép bạn định nghĩa các giá trị mặc định cho CSS custom properties thông qua theme.json.
Ngoài ra, bạn có thể sử dụng **global style variations** để tạo ra các biến thể style cho trang web của mình. Các global style variations là các file .json nằm trong thư mục /styles của theme, cho phép bạn override các giá trị trong theme.json một cách dễ dàng.
theme.json mới nhất để tận dụng các tính năng mới nhất.
theme.json tương thích với các block và plugin bạn sử dụng.
theme.json là một công cụ mạnh mẽ để **tùy chỉnh CSS** trong WordPress. Bằng cách sử dụng theme.json, bạn có thể dễ dàng **override các thuộc tính mặc định**, tạo ra các style thống nhất và phù hợp với từng block, đồng thời tích hợp với các plugin và global style variations để mở rộng khả năng tùy chỉnh của trang web. Hãy bắt đầu khám phá và khai thác tối đa tiềm năng của theme.json để tạo ra một trang web WordPress độc đáo và chuyên nghiệp!
Bài viết liên quan