About Us Services Blog Contact Us Learn

Mengelola Global Styles dengan theme.json di Block Theme WordPress


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

  1. Buka folder theme (via FTP atau File Manager)

  2. Edit file theme.json dengan teks editor seperti VS Code

  3. Simpan dan reload editor situs WordPress

  4. 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.


Recent Posts

    No comments