Salah satu fitur powerful dalam block theme WordPress adalah global styles, yang memungkinkan kamu mengontrol tampilan situs secara menyeluruh dari satu file:
theme.json
. File ini adalah pusat pengaturan untuk warna, tipografi, spasi, layout, dan bahkan fitur editor. Artikel ini akan mengulas cara kerja theme.json
dan bagaimana kamu bisa menggunakannya untuk mempercepat workflow desain.
Apa Itu theme.json
?
theme.json
adalah file konfigurasi berbasis JSON yang terdapat di dalam direktori utama block theme. Fungsinya:
-
Mengatur gaya global seluruh situs
-
Menentukan pengaturan editor blok
-
Mengontrol struktur layout dan responsivitas
File ini menggantikan kebutuhan akan CSS dalam banyak kasus, karena editor WordPress akan menerjemahkannya menjadi gaya siap pakai.
Struktur Dasar theme.json
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#0073aa",
"name": "Primary"
}
]
}
},
"styles": {
"elements": {
"h1": {
"typography": {
"fontSize": "2.5rem"
}
}
}
}
}
Hal-Hal yang Bisa Diatur dengan theme.json
-
Warna: palet warna, latar belakang, warna teks
-
Tipografi: ukuran font, jenis font, tinggi baris
-
Spasi: padding, margin, content width
-
Layout: batas konten, alignment
-
Blok tertentu: atur gaya individual untuk setiap blok
Keunggulan Menggunakan theme.json
- Konsistensi gaya : Semua elemen mengikuti pengaturan global
- Kinerja lebih baik : Editor hanya memuat gaya yang digunakan
- Pengembangan lebih cepat : Tidak perlu banyak CSS manual
- Kontrol penuh dari satu file : Bisa dikendalikan bahkan tanpa akses ke editor situs
Cara Mengedit theme.json
-
Buka folder theme (via FTP atau File Manager)
-
Edit file theme.json
dengan teks editor seperti VS Code
-
Simpan dan reload editor situs WordPress
-
Lihat perubahan di Site Editor secara langsung
Tips:
-
Gunakan Editor Visual theme.json untuk membuat file dengan antarmuka UI
-
Dokumentasi resmi: Theme JSON Reference
Kesimpulan
File theme.json
adalah otak dari desain di block theme WordPress. Dengan memahami dan menggunakannya, kamu dapat menciptakan tema yang profesional, konsisten, dan mudah dikelola—baik oleh desainer, developer, maupun pengguna non-teknis.
No comments