Panduan Lengkap untuk File theme.json WordPress

Membuat perubahan gaya kustom ke situs WordPress Anda umumnya berarti mengedit banyak file secara manual. Selain itu, jika Anda mengganti tema, Anda harus mengonfigurasi ulang semua pengaturan ini dari awal. Ini bisa menjadi proses yang memakan waktu.

Untungnya, ketika WordPress meluncurkan versi 5.8, file theme.json baru diperkenalkan. Ini adalah ruang khusus untuk menata editor blok (dan masing-masing blok) di bagian depan dan belakang. Hasilnya, jauh lebih mudah mengelola gaya untuk situs web Anda.

Dalam postingan ini, kita akan melihat lebih dekat file theme.json . Kemudian, kita akan membahas beberapa pertimbangan utama sebelum menunjukkan cara mengedit file theme.json Anda.

Apa itu theme.json di WordPress?

File theme.json adalah mekanisme yang memungkinkan Anda mengonfigurasi Editor Blok dengan kontrol yang lebih besar. Ini berguna untuk membuat perubahan gaya di seluruh situs, karena Anda dapat menetapkan gaya default ke semua (atau beberapa) blok Anda.

Intinya, theme.json adalah solusi yang meningkatkan kemampuan Block Editor API. Misalnya, dengan theme.json , Anda akan memperoleh kemampuan untuk mengontrol editor secara terprogram. Plus, Anda dapat mengintegrasikan sistem gaya blok. Ini memfasilitasi cara Anda mengelola preferensi pengguna, tema, dan inti.

File theme.json diperkenalkan bersamaan dengan Editor Situs. Bersamaan dengan itu, theme.json adalah salah satu langkah besar pertama untuk mengelola gaya untuk rilis WordPress mendatang. Ini cara yang bagus untuk mendapatkan lebih banyak kontrol atas tema Anda (dan situs) sehingga Anda dapat membuat perubahan pada menu, header, dan footer Anda.

Singkatnya, Editor Situs memungkinkan Anda membuat banyak perubahan gaya global sementara theme.json adalah mekanisme yang memungkinkan Anda mengonfigurasi opsi khusus untuk blok Anda.

Misalnya, Anda dapat mendefinisikan ulang pengaturan Editor Blok untuk menyembunyikan atau menampilkan opsi penyesuaian untuk pengguna tertentu. Selain itu, Anda dapat menentukan warna dan ukuran font default untuk blok Anda saat mengonfigurasi lebar atau perataan baru untuk editor.

Di mana file theme.json berada?

Anda dapat menemukan file theme.json Anda di dalam root direktori tema Anda. Jika Anda menggunakan Editor Situs, dan Anda telah mengaktifkan tema berbasis blok seperti Twenty Twenty-Three , maka Anda pasti akan memiliki akses ke file theme.json .

Namun, jika tema yang Anda pilih tidak dilengkapi dengan file theme.json , Anda dapat mengganti tema atau membuat file Anda sendiri. Penting untuk diperhatikan bahwa beberapa tema dilengkapi dengan CSS atau blok gaya yang sangat spesifik yang mungkin tidak kompatibel dengan perubahan yang Anda buat di theme.json. Misalnya, mode gelap di Dua Puluh Dua Puluh Satu tidak dapat diganti dengan perubahan gaya yang ditambahkan di theme.json.

Apa yang harus dilakukan sebelum mengedit file theme.json Anda

Sekarang setelah Anda mengetahui lebih banyak tentang file theme.json , mari kita lihat beberapa faktor penting untuk dipertimbangkan sebelum melakukan pengeditan.

1. Cadangkan situs Anda

Sebelum melakukan perubahan yang signifikan, penting untuk membuat cadangan situs Anda. Dengan begitu, jika terjadi kesalahan, Anda dapat memulihkan situs web dan memulai dari awal lagi.

Menggunakan plugin Pencadangan Jetpack VaultPress adalah salah satu cara termudah untuk mencadangkan situs Anda.

Alat Jetpack ini membuat cadangan real-time berbasis cloud dan menyimpannya di jaringan server aman WordPress.com. Selain itu, proses pemulihannya cepat dan sederhana.

Anda dapat memanfaatkan pemulihan sekali klik dari aplikasi seluler, meskipun situs Anda benar-benar mati.

2. Pertimbangkan untuk menggunakan situs pementasan

Situs pementasan adalah cara yang bagus untuk menguji perubahan yang ingin Anda buat tanpa memengaruhi situs web langsung Anda. Pada dasarnya, situs pementasan adalah salinan situs web Anda yang tidak tersedia untuk umum. Oleh karena itu, Anda akan mendapatkan privasi untuk menguji fitur baru atau memperbarui situs Anda.

Dengan cara ini, Anda tidak perlu khawatir akan terjadi kesalahan saat mengedit file theme.json . Selain itu, jika ada masalah, Anda masih dapat mengakses situs langsung Anda. Ini juga berarti bahwa ketika Anda akhirnya mendorong perubahan apa pun ke situs langsung Anda, Anda dapat yakin bahwa itu tidak akan merusak fungsionalitas halaman Anda.

Ada berbagai cara untuk menyiapkan situs pementasan. Anda dapat meminta host web Anda, menyiapkan subdomain yang berbeda untuk situs Anda secara manual, atau memasang plugin. Tetapi akan lebih mudah untuk memilih alat pengembangan WordPress lokal.

Cara mengedit file theme.json Anda

Pada titik ini, Anda siap untuk mengakses dan mengedit file theme.json Anda! Di bagian ini, kami akan menunjukkan kepada Anda beberapa cara berguna untuk mengedit theme.json seperti membuat palet warna dan mengganti ukuran font default untuk blok Anda.

Untuk memulai, Anda harus membuka direktori akar situs web Anda. Anda dapat melakukan ini dengan menggunakan klien SFTP seperti FileZilla atau mengunjungi File Manager Anda. Kemudian, cukup buka direktori public_html . Di dalamnya, cari folder konten-wp Anda.

Selanjutnya, buka tema dan pilih tema aktif untuk situs Anda. Di sinilah Anda akan menemukan theme.json jika tema Anda memilikinya.

1. Buat palet warna default

Anda mungkin ingin membuat satu set palet warna untuk Editor. Dengan begitu, Anda dapat mengakses warna dengan cepat dan memastikan brand visual yang konsisten di seluruh halaman Anda.

Plus, akan sangat membantu jika Anda memiliki pengguna lain yang membuat posting dan halaman di situs Anda, karena mereka hanya dapat mengakses warna yang Anda sertakan dalam repositori warna Anda. Selain itu, mereka tidak akan memiliki kemampuan untuk membuat rona dan gradien mereka sendiri.

Untuk memulai, temukan theme.json dengan mengikuti langkah-langkah yang kami uraikan sebelumnya. Ada tiga faktor yang harus dipertimbangkan untuk mengaktifkan setelan ini:

1. Anda harus menonaktifkan gradien khusus
2. Anda harus menonaktifkan opsi warna khusus
3. Anda harus menambahkan palet khusus dengan warna merek Anda

Setelah terhubung ke file tema menggunakan SFTP atau File Manager, Anda harus menyalin kode berikut dan menyimpannya di direktori akar tema Anda:

 { “version”: 1, “settings”: { “color”: { “custom”: false, “customGradient”: false, “gradients”:[], “link”: false, “palette”:[ { “slug”: “vivadcyanblue”, “color”: “#0693E3” }, { “slug”: “vividgreencyan”, “color”: “#00D084”, }, { “slug”: “white”, “color”: “#ffffff” } ] }

Perlu diingat, Anda harus men-tweak kode di atas untuk mencerminkan preferensi Anda. Di sini, kami telah menonaktifkan gradien khusus dan opsi warna khusus.

Plus, kami telah menentukan satu set palet warna dari tiga warna berbeda. Oleh karena itu, saat pengguna membuat postingan dan halaman di situs, mereka hanya dapat mengakses nuansa ini.

Apa hebatnya membuat palet khusus di theme.json adalah WordPress juga akan menulis ulang semua CSS yang diperlukan. Dengan cara ini, setiap perubahan warna yang dilakukan di Editor Blok juga akan tercermin di ujung depan.

2. Konfigurasikan ukuran font khusus

Ini juga berguna untuk mengonfigurasi ukuran font tertentu untuk blok Paragraph. Tentu saja, blok tersebut menyediakan satu set ukuran font default, tetapi Anda dapat menggunakan theme.json untuk menggantinya dengan preferensi Anda.

Sekali lagi, Anda harus menemukan direktori root tema Anda dengan mengunjungi folder tema di wp-content . Kemudian, cari theme.json. Ukuran font ditambahkan ke theme.json di bawah pengaturan → tipografi → fontSizes.

Kemudian, Anda harus memasukkan nilai-nilai Anda. Anda akan menggunakan size untuk menambahkan nilai ukuran font CSS yang valid. Sementara itu, slug adalah pengenal yang digunakan WordPress di properti khusus CSS. Anda juga dapat menambahkan name , tetapi ini hanya untuk Anda gunakan sendiri karena itulah yang akan Anda lihat di editor.

Di WordPress, ukuran font "kecil" default memiliki nilai 13px, sehingga Anda dapat mendasarkan nilai Anda di sekitar ini. Secara keseluruhan, file theme.json Anda akan terlihat seperti ini setelah Anda menambahkan kode ini ke file:

 add_theme_support( 'editor-font-sizes', array(    array(        'name' => esc_attr__( 'Small', 'themeLangDomain' ),        'size' => 12,        'slug' => 'small'    ),    array(        'name' => esc_attr__( 'Regular', 'themeLangDomain' ),        'size' => 16,        'slug' => 'regular'    ),    array(        'name' => esc_attr__( 'Large', 'themeLangDomain' ),        'size' => 36,        'slug' => 'large'    ),    array(        'name' => esc_attr__( 'Huge', 'themeLangDomain' ),        'size' => 50,        'slug' => 'huge'    ) ) );

Cukup simpan perubahan untuk memperbarui pengaturan blok WordPress Anda.

3. Buat template kustom dan bagian template

Cara lain untuk mengedit theme.json adalah dengan membuat template kustom dan bagian template. Karena tema dapat mencantumkan templat khusus yang ada di folder templat , Anda dapat mendeklarasikan jenis kiriman yang dapat menggunakannya dan judul yang Anda perlihatkan kepada pengguna.

Untuk memulai, buka theme.json. Anda harus memikirkan nama, judul, dan jenis posting, meskipun pengaturan terakhir bersifat opsional. Kemudian, tambahkan kode berikut ke file:

 { “version”: 1, “customTemplates”: [ { “name”: “custom-template-example”, “title”: “The Custom Template Title”, “postTypes”: [ “page”, “post”, “my-cpt” ] } ] }

Pada titik ini, Anda telah membuat template untuk halaman, posting, dan jenis posting kustom Anda. Anda dapat melangkah lebih jauh dan membuat komponen template untuk tema Anda.

Dengan cara ini, Anda dapat mengonfigurasi theme.json untuk mendeklarasikan istilah area untuk bagian template, seperti blok header atau footer. Dengan mendefinisikan ini di theme.json , Anda dapat memastikan bahwa pengaturan diterapkan di semua penggunaan entitas bagian template tersebut, bukan hanya satu blok.

Sebelum memulai, Anda harus mempertimbangkan nama, judul, dan area bagian template Anda. Penting untuk diperhatikan bahwa jika Anda tidak menentukan area, area tersebut akan disetel ke "tidak dikategorikan" dan tidak memicu variasi blok.

Untuk membuat bagian template untuk tema Anda, tambahkan kode berikut ke theme.json :

 { “version”: 1, “templateParts”: [ { “name: “my-template-part”, “title”: “Footer”, “area”: “footer” } ] }

Kemudian, pastikan untuk menyimpan perubahan Anda sebelum keluar dari theme.json.

Pertanyaan umum tentang theme.json di WordPress

Sekarang Anda tahu cara mengedit theme.json, tetapi Anda mungkin masih ragu. Itu sebabnya kami telah menjawab beberapa pertanyaan theme.json yang paling umum di bawah ini!

Kapan theme.json pertama kali diperkenalkan di WordPress?

File theme.json pertama kali diperkenalkan dengan rilis WordPress 5.8. Ini adalah saat Pengeditan Situs Penuh (FSE) diluncurkan, bersama dengan kemampuan untuk menggunakan tema berbasis blok.

Rilis ini menunjukkan perubahan besar pada platform, karena pengguna memperoleh kemampuan untuk membuat perubahan di seluruh situs dan mendapatkan kontrol lebih besar atas pengaturan gaya. Kemudian, dengan WordPress 5.9, theme.json berevolusi menjadi versi kedua.

Apa yang dapat Anda lakukan dengan file theme.json?

Singkatnya, theme.json memungkinkan Anda untuk mengubah dan menerapkan pengaturan terkait gaya baru ke semua blok WordPress Anda. Oleh karena itu, Anda memperoleh tingkat kontrol yang lebih baik atas perubahan gaya. Selain itu, ini berarti Anda dapat menghindari kebutuhan untuk mengonfigurasi perubahan ini satu per satu di tingkat blok.

Misalnya, Anda dapat mengedit theme.json untuk menonaktifkan/mengaktifkan fitur seperti drop cap, padding, margin, dan custom line-height. Selain itu, Anda dapat menambahkan beberapa palet warna, duotone, dan gradien untuk mempercepat penerapan warna merek Anda ke elemen di halaman Anda.

Terlebih lagi, Anda dapat menentukan ukuran font yang tepat dan menerapkannya di seluruh situs Anda. Atau tambahkan lebar default untuk konten Anda dan tetapkan komponen template ke area komponen template.

Apa prasyarat untuk menggunakan file theme.json?

Mengedit theme.json adalah cara mudah untuk membuat perubahan gaya di seluruh situs. Tapi, sayangnya, itu bukan pilihan untuk semua pengguna.

Pertama, Anda harus menggunakan Editor Blok. Jika Anda lebih suka menggunakan pembuat halaman, Anda tidak akan dapat memanfaatkan fungsi ini. Selain itu, Anda harus memiliki pemahaman tentang CSS dan merasa nyaman mengedit file situs Anda.

Terakhir, Anda harus bisa mengakses theme.json. Seperti yang telah kita bahas sebelumnya, tidak semua tema memiliki file theme.json . Selain itu, pengaturan beberapa tema akan mengesampingkan perubahan apa pun yang Anda buat di theme.json .

Jika tema Anda memiliki theme.json , Anda dapat menemukannya di direktori akar situs Anda. Anda dapat menemukannya menggunakan SFTP atau mengunjungi File Manager Anda. Kemudian, temukan folder tema di dalam wp-content . Di sinilah theme.json berada. Jika tema Anda tidak memiliki theme.json, Anda dapat mengganti tema atau membuat file theme.json sendiri.

Gunakan file theme.json WordPress untuk desain web yang disederhanakan

Membuat perubahan khusus di seluruh situs sering kali berarti mengedit banyak file atau menyelesaikan banyak tugas manual. Namun, dengan theme.json, Anda akan mendapatkan ruang khusus untuk mengontrol dan mengelola semua pengaturan gaya untuk situs Anda.

File theme.json terletak di direktori root situs Anda dari WordPress 5.8 dan seterusnya. Anda dapat mengedit file untuk membuat perubahan besar seperti menerapkan palet warna khusus ke situs Anda dan mengganti ukuran font default WordPress.

Sebelum mengedit file theme.json , penting untuk membuat cadangan situs Anda. Jetpack VaultPress Backup adalah plugin yang mudah digunakan yang memungkinkan Anda memulihkan situs bahkan saat offline. Plus, itu mencadangkan semua file Anda, data WooCommerce, dan database Anda!