Cara membuat tema blok anak di WordPress

Diterbitkan: 2023-07-14

Bayangkan skenario ini: Anda baru saja menemukan tema yang hampir sempurna untuk digunakan di situs web Anda. Ini dirancang dengan baik, termasuk tata letak yang Anda inginkan, tetapi Anda ingin mengubah palet warna dan membatasi klien untuk memodifikasi beberapa area. Sayangnya, tema yang Anda gunakan tidak memungkinkan Anda menghapus warna default atau blok kunci.

Meskipun Anda dapat mengedit file tema secara langsung, semua modifikasi Anda akan hilang saat Anda menjalankan pembaruan tema. Anda dapat menambahkan sedikit CSS khusus menggunakan plugin cuplikan kode, tetapi itu tidak akan mengubah opsi gaya yang tersedia untuk pengguna yang masuk.

Jadi apa yang dapat Anda lakukan? Bagaimana Anda mengubah opsi Global Style yang tersedia? Untuk itu, Anda memerlukan tema blok anak.

Apa itu tema anak WordPress?

Menurut dokumentasi Pengembang WordPress :

Tema anak mewarisi tampilan dan nuansa dari tema induk dan semua fungsinya, tetapi dapat digunakan untuk membuat modifikasi pada bagian mana pun dari tema. Dengan cara ini, kustomisasi disimpan terpisah dari file tema induk. Menggunakan tema anak memungkinkan Anda memutakhirkan tema induk tanpa memengaruhi penyesuaian yang telah Anda buat pada situs Anda.

Jadi untuk menggunakan tema anak di WordPress, Anda juga harus memasang tema induk. Tema anak Anda mewarisi segalanya dari induknya, dengan beberapa variasi ditambahkan.

Cara membuat tema anak

Apakah Anda lebih suka opsi kode untuk menyesuaikan gaya di situs Anda? Seperti mengganti tema WordPress lainnya, menggunakan tema anak adalah cara terbaik untuk mengganti kode. Saat tema Anda diperbarui, kode tema anak Anda akan tetap ada.

Pada artikel ini, kami membahas komponen kunci dari apa yang membuat tema anak WordPress bagus dan menyediakan sumber bacaan yang mendalam.

1. Kapan menggunakan tema blok anak

Tema anak seringkali merupakan solusi yang bagus. Namun, jika Anda hanya ingin menambahkan sedikit kode CSS, keseluruhan tema anak mungkin berlebihan. Pertimbangkan plugin seperti Cuplikan Kode untuk menambahkan sedikit penyesuaian.

Menyesuaikan situs klien

Saat Anda membuat situs untuk klien, ada beberapa penyesuaian tambahan yang mungkin ingin Anda tawarkan.

Jika Anda ingin mengontrol kemampuan pengguna untuk memasukkan blok baru, memindahkan blok yang ada, atau menghapus blok, Anda mungkin ingin menerapkan penguncian blok. Anda dapat mempelajari cara mengunci blok dan lainnya di tutorial pengantar ini.

Membuat variasi tema

Selain menentukan wilayah mana dari tata letak tema yang dapat diubah oleh klien, Anda mungkin juga ingin mengubah opsi palet warna mereka, menghilangkan apa yang datang secara default dengan tema atau WordPress dan menambahkan opsi unik. Anda juga dapat menentukan opsi gradien dan duotone yang juga harus tersedia di tema Anda.

2. Pilih tema WordPress yang bagus

Tidak semua tema dibuat sama. Selain apa yang Anda lihat dalam desain tema, memilih tema induk melibatkan faktor tambahan seperti frekuensi pembaruan, kualitas dukungan, dokumentasi, dan reputasi pengembang tema. Pelajari lebih lanjut di Cara menggunakan tema WordPress untuk membuat situs web.

3. Buat lingkungan pengujian

Sekarang Anda telah memilih tema induk, mengumpulkan aset merek, dan memutuskan setelan yang ingin Anda ganti. Selanjutnya, Anda harus menyiapkan lingkungan pengujian.

Jika Anda menggunakan penyedia hosting WordPress terkelola seperti Hosting WordPress Terkelola GoDaddy, Anda dapat menggunakan situs pementasan sekali klik sebagai lingkungan pengembangan. Jika Anda menggunakan sesuatu seperti cPanel atau VPS untuk hosting, Anda dapat menyiapkan penginstalan WordPress terpisah dan mengkloning atau menyalin situs yang ada ke penginstalan baru.

Jika Anda tidak menerapkan tema anak ke situs yang sudah ada, atau jika Anda lebih suka membangun dari awal, Anda dapat membuat lingkungan pengembangan WordPress lokal di komputer menggunakan alat seperti MAMP atau DesktopServer dari ServerPress.

4. Buat direktori tema Anda

Pertama, Anda harus menginstal tema induk. Kemudian, menggunakan klien FTP, sambungkan ke lingkungan pengembangan Anda dan arahkan ke tempat file WordPress Anda berada.

Anda sedang mencari folder berikut:

 /wp-konten/tema/

Di situlah Anda dapat menemukan semua tema WordPress yang Anda instal. Setiap tema memiliki folder atau direktori sendiri yang berisi semua file tema. Anda akan menambahkan direktori baru ke dalam daftar, yang akan menampung tema anak Anda. Anda akan berakhir dengan sesuatu seperti:

 /wp-content/themes/tema-anak-anda/

5. Buat file tema Anda

Sebagai contoh kita, kita asumsikan kita menggunakan tema Twenty Two Two. Anda harus memasang tema itu untuk tema anak untuk merujuk kembali ke sana.

Di dalam folder direktori tema anak baru Anda, Anda akan membuat dua file baru:

 style.css
theme.json

Kedua file ini melayani tujuan tertentu. File style.css digunakan untuk memberi WordPress informasi tentang tema, seperti nama, penulis, tag, dan ID tema induk.

File theme.json digunakan untuk menentukan banyak pengaturan di Global Styles dan lainnya. Pelajari lebih lanjut tentang theme.json dari buku pegangan pengembang.

Di tema Klasik sebelumnya, file functions.php diperlukan di tema anak. Blokir tema anak tidak memerlukan langkah ini.

Gaya.css

Apa yang termasuk dalam file style.css Anda? Dokumentasi pengembang mengatakan:

Lembar gaya Anda harus berisi komentar tajuk yang diperlukan di bawah ini di bagian paling atas file. Ini memberi tahu info dasar WordPress tentang tema tersebut, termasuk fakta bahwa itu adalah tema anak dengan induk tertentu.

Anda harus menyertakan boilerplate di file style.css yang berisi informasi header Anda. Nama Template: sesuai dengan nama folder (direktori) dari tema induk yang Anda buat di atasnya. Domain Teks : nama unik untuk tema anak WordPress Anda.

Di bawah ini adalah contoh tema anak menggunakan Twenty Twenty Two:

 /*
Nama Tema: Dua Puluh Dua Puluh Dua Anak
URI Tema: https://example.com/
Penulis: Nama Anda
URI Penulis: https://example.com/
Deskripsi: Tema Dua Puluh Dua Puluh Dua Anak
Membutuhkan setidaknya: 5.8
Diuji hingga: 5.9
Membutuhkan PHP: 5.6
Versi: 0.1
Lisensi: Lisensi Publik Umum GNU v2 atau lebih baru
URI Lisensi: http://www.gnu.org/licenses/gpl-2.0.html
Domain Teks: dua puluh dua puluh dua anak
Templat: dua puluh dua puluh dua
Tag: warna khusus, menu khusus, logo khusus, gaya editor, gambar unggulan, pengeditan situs lengkap, pola blok

Dua Puluh Dua Puluh Dua Anak Tema WordPress, (C) 2021 WordPress.org
Dua Puluh Dua Puluh Dua Anak didistribusikan di bawah ketentuan GNU GPL.
*/

Theme.json

Lihat dokumentasi developer untuk mengetahui lebih dalam tentang theme.json. Mari kita lihat file theme.json Twenty Twenty Two:

 {
 "versi": 2,
 "pengaturan": {},
 "gaya": {},
 "customTemplates": {},
 "templateParts": {}
}

Di dalam masing-masing ini ada gaya lebih lanjut yang tersedia untuk Anda. Misalnya, di area gaya, Twenty Twenty Two menggunakan:

 {
 "pengaturan": {
 "appearanceTools": benar,
 "warna": {
 "dua nada": [
 {
 "warna": [
 "#000000",
 "#ffffff"
 ],
 "slug": "latar depan-dan-latar belakang",
 "nama": "Latar depan dan latar belakang"
}

Perlu bantuan membuat file theme.json? Lihat themegen.app untuk panduan membuat banyak pilihan untuk file theme.json Anda.

6. Menyesuaikan tema blok anak Anda

Meskipun Anda dapat membuat file theme.json dengan mudah dan menambahkannya ke tema Anda, ada beberapa pilihan lain yang harus dibuat. Tema anak dan bahkan tema blok adalah area baru untuk WordPress. Editor Situs jelas memiliki label beta pada saat posting ini. Anda ingin merujuk kembali untuk melihat apa yang berfungsi dan tidak berfungsi di tema anak, seperti bagian template.

Selain itu, Anda mungkin menemukan pengaturan yang belum didukung oleh Global Styles dan theme.json. Jika Anda menambahkan CSS tambahan, seperti batas blok grup dengan bayangan kotak, Anda mungkin ingin menambahkannya ke file style.css Anda.

 .has-primary-border-color {
 bayangan kotak: .1rem .1rem .05rem #647BAF ;
}

7. Uji tema anak Anda

Setelah Anda merasa bahwa situs Anda terlihat bagus di lingkungan pengembangan Anda saat ini, saatnya untuk mengujinya sebelum mengunggahnya ke situs langsung.

  • Uji dalam berbagai ukuran browser, seperti area pandang seluler
  • Tes di berbagai browser atau gunakan alat seperti BrowserStack
  • Tinjau standar aksesibilitas. Mulailah dengan WebAim

8. Bersiaplah untuk mengunggah tema blok anak Anda

Jika Anda telah mengembangkan di situs pementasan, file Anda tepat berada di tempat yang seharusnya. Anda dapat mengunjungi opsi hosting untuk mengaktifkan situs pementasan. Jika Anda telah membuat file di lingkungan pengembang lokal, saatnya untuk meng-zip file style.css dan theme.json menjadi satu file zip dan mengunggahnya ke situs Anda.

Rekap untuk membuat tema blok anak Anda

  1. Putuskan apakah Anda memerlukan tema blok anak
  2. Pilih tema induk
  3. Konfigurasikan lingkungan pengujian Anda
  4. Buat direktori tema Anda
  5. Buat file tema Anda
  6. Sesuaikan tema blok anak Anda
  7. Uji tema anak Anda
  8. Unggah mereka ke situs langsung

Seperti tema Klasik di WordPress, tema Blok masih memerlukan tempat untuk menyimpan penyesuaian yang tidak akan ditimpa saat tema induk menerima pembaruan. Membuat tema blok anak memungkinkan Anda untuk menambah, mengunci, dan menghilangkan opsi yang tersedia untuk pengguna lain di situs.