Mempercantik Website Menggunakan Child Theme

Pendahuluan

Apa itu Child Theme? Child Theme adalah suatu trik yang biasa digunakan para pengembang desain website untuk mempercantik proyek website yang sedang dikerjakannya. Mari pelajari trik ini secara perlahan tapi pasti.

Tujuan

Beberapa alasan menggunakan child theme adalah:

  1. Tidak memodifikasi script dari pengembang aslinya.
  2. Tidak khawatir jika terjadi pembaruan template.
  3. Script yang telah dimodifikasi sebelumnya tidak akan hilang.
  4. Apabila template utama melakukan pembaharuan atau update theme, script yang telah diubah sebelumnya tidak akan hilang atau di-replace.

Saya harap sampai sini semua sudah mengerti tentang pengertian dan tujuan mengapa Child Theme perlu digunakan.

Pre-Instalasi

Tutorial ini ditujukan untuk website yang menggunakan wordpress, untuk pengguna non-wordpress bisa disesuaikan sendiri langkah-langkahnya.

Instalasi

Langkah 1: Membuat File CSS

Langkah ertama, masuk ke file direktori template di (wp-content/themes/), dan buat folder baru seperti nama theme-nya dengan tambahan “-child” (twentyfifteen-child). Setelah membuat folder, tambahkan file css (style.css) didalam folder yang telah dibuat sebelumnya. Copy dan paste-kan juga file (screenshot.jpg) di folder (twentyfifteen-child) supaya preview pada pilihan template di wordpress tidak kosong.

Langkah 2: Konfigurasi File CSS

Langkah kedua, tambahkan script berikut karena sifatnya memang wajib ada

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

Sesuaikan beberapa field dengan theme yang akan dibuat child-nya.

Langkah 3: Import Theme CSS

Langkah 3, lakukan import file css dengan script berikut:

@import url('../twentyfifteen-child/style.css');

Dengan script diatas, file asli dari template twentyfifteen akan di-import sepenuhnya oleh file css (style.css) yang telah dibuat sebelumnya.

Langkah 4: Mengaktifkan Child Theme

Langkah 4, login ke halaman admin wordpress, pilih opsi Appearance dan klik Themes. Kemudian aktifkan theme Child yang telah dibuaat tadi (Twenty Fifteen Child Theme). Jika langkah-langkah diatas telah dilakukan dengan baik dan benar, maka tampilan website yang sekarang tidak perubahan apapun.

Langkah 5: Memodifikasi Child Theme

Langkah 5, sekarang masuk menu Editor dengan memilih opsi Appearance dan klik Editor. Nah, pada bagian sisi kanan yang tampil hanya berupa file css yang baru (twentyfifteen-child/style.css). Sekarang, tulis script css yang akan dimodifikasi pada bagian bawah script Langkah 3 tadi, tentunya dengan aman dan nyaman karena tidak perlu khawatir script modifikasi yang telah ditulis akan hilang.

Hasil

Sebagai tambahan penjelasan, gambar diatas adalah contoh penerapan Child Theme yang telah dilakukan pada website ini.

Kesimpulan

Dengan menggunakan trik diatas, para pengembang yang ingin memodifikasi theme-nya tidak perlu gusar jika ada pembaruan theme dari pengembang resminya, serta yang paling penting, para pengembang bisa tidur dengan nyenyak.

Sekian dari tutorial ini, terima kasih :).

Add a Comment

Your email address will not be published. Required fields are marked *