Membuat Tema Anak WordPress

Seperti Membuat Tema Sendiri

0

Child Theme atau bahasa Indonesianya Tema Anak merupakan salinan kecil / clone dari tema utama yang digunakan dan tetap berbasis / menginduk kepada tema utama / tema induk. Tema anak pada WordPress biasa digunakan untuk para pengguna WordPress agar bisa mengkustom tema tersebut sesuai keinginan, misalnya : Warna khusus, Ukuran, Bentuk, Beberapa kinerja atau bahkan terjemahan bahasa.

Tapi secara umum, tema anak ini digunakan untuk pengguna yang ingin menggunakan desain sendiri pada tema WordPress dan tidak ingin hilang hasil desainnya ketika tema di update ke versi baru. Ketika kalian desain di tema anak, kemudian tema induk di update ke versi baru maka tidak akan hilang hasil desain yang sudah dibuat.

Saat ini banyak sekali tema WordPress yang menyulitkan penggunanya untuk menghapus footer credit / hak cipta bawaan tema tersebut pada bagian bawah website (footer). Jadi, selain kegunaan diatas yang saya sebutkan child theme ini juga bisa digunakan untuk para pengguna yang ingin menghapus credit footer sebuah tema.

ads by posciety

Cara membuat tema anak ini mudah sekali, pertama masuk ke dashboard admin WordPress seperti biasa kemudian masuk juga ke hosting yang kalian gunakan (disini saya contohkan menggunakan cPanel). Biarkan dulu dalam keadaan login biar gampang uploadnya nanti.

Sekarang silahkan buka aplikasi code editor (disini saya contohkan menggunakan Sublime Text), dan buat code seperti ini :

@import url("../namatema/style.css");

/*
Theme Name: Nama Tema
Theme URI: https://posciety.com/
Description: Deskripsi untuk tema anak yang kalian buat
Author: Rio Bermano
Author URI: https://posciety.com/
Template: namatema
Version: versi tema anak yang kalia buat (misalnya : 1.0.0)
*/

Tulis code diatas !

  • Pada /namatema/ didalam bagian @import adalah nama folder tema induk yang akan kalian buatkan anak temanya (pastikan nama sesuai dengan nama folder tema induk). (lihat gambar)
    /namatema/ tadi ganti dengan nama folder tema induk yang akan dibuatkan tema anak, harus sesuai huruf dan penulisannya jangan sampai salah. Disini saya contohkan menggunakan tema Twenty Thirteen, setelah di cek nama foldernya di hosting adalah “twentythirteen” seperti pada gambar.
    Maka codenya akan seperti ini :@import url("../twentythirteen/style.css");Dimana bisa lihat folder tema itu ? Kalian pergi ke hosting kalian kemudan pilih “File Manager” lalu masuk “public html” seperti biasa kemudian temukan folder “inc” pilih folder “themes“, nah keliahatan kan folder tema yang terinstal di dashboard WordPress kalian ?. Kalo kalian install WordPress di sub direktori maka setelah “public html” tadi kalian masuk dulu folder sub direktori (misalnya kalian instal di sub direktori /blog/, maka setelah “public html” pilih sub direktori /blog/ kemudian lanjutkan ke “inc” dan seterusnya). Hal ini juga berlaku untuk kalian yang install WordPress di subdomain, misalnya di https://www.business.riobermano.com maka setelah masuk “public html” tadi cari folder “business” baru lanjutkan ke tahap yang sama seperti diatas.
  • Pada bagian “Theme Name : Nama Tema” kalian bisa kasih nama tema sesuai keinginan kalian, yakni nama tema anak yang kalian buat.
  • Pada bagian “Theme URI : https://posciety.com” bisa kalian isi url pembuat tema anak (misalnya url kalian).
  • Pada bagian “Description :” silahkan isi deskripsi tentang tema anak yang kalian buat.
  • Pada bagian “Author :” silahkan isi dengan nama pembuat tema anak tersebut (nama kalian).
  • Pada bagian “Author URI :” silahkan isi url author biar semua orang yang menggunakan tema anak ini bisa tau identitas kalian.
  • Pada bagian “Template :” silahkan isi dengan nama folder tema yang digunakan (sama seperti penjelasan /namatema/). Karena saya menggunakan /twentythirteen/ maka saya juga tulis “twentythirteen” disini. Pastikan penulisan nama dengan nama folder seperti penjelasan tadi, jangan sampai salah tulis.
  • Pada bagian “Version :” silahkan tulis versi berapa tema anak yang kalian buat ini ? Misalnya 1.0.0.

Setelah yakin dengan semuanya silahkan save code tersebut di komputer kalian dengan nama file “style.css“. Kemudian upload ke hosting kalian di “inc/themes/namafolder” sejajar dengan tema-tema yang lainnya yang kalian install di dashboard WordPress. Sebelum di upload, kalian buat dulu folder untuk tempat tema anak yang di upload. Buat folder baru di “inc/themes/“.

Perhatian! Nama folder huruf kecil semua dan tanpa spasi, lihat contoh folder tema yang ada disana. Kasih nama folder sesuai keinginan kalian, misalnya : temasaya, tema_saya, tema-saya, dsb. Saya contohkan kasih nama tema ini “yotheme”. Maka saya buat folder baru namanya “yotheme”.

Masuk kedalam “yotheme” lalu upload file “style.css” tadi yang sudah kita buat. Sebaiknya nama folder ini sama dengan nama tema anak yang kita buat pada code diatas tapi dalam tulisan huruf kecil dan tanpa spasi.

Setelah upload selesai, silahkan buka dashboard WordPress kalian dan lihat hasilnya ! (lihat gambar)

Kalian bisa langsung aktifkan, kalo tema anak yang kalian buat gak muncul / ada keterangan error berarti ada langkah yang kalian lewati atau memang langkahnya salah silahkan di cek lagi satu persatu. Kalo soal gambar kenapa gak muncul gak ada gambarnya? Kalian tinggal upload aja gambarnya ke folder tema anak yang baru kalian buat tadi sejajar dengan file “style.css”, nanti juga akan otomatis nempel bergambar seperti tema2 lainnya.

Masih bingung ? Lihat : Video tutorial cara membuat tema anak WordPress.

Selesai sampai sini, kalian berhasil membuat tema anak. Sekarang kalian bisa desain tema WordPress yang kalian pakai sesuai keinginan. Setelah di aktifkan tema anak ini, cek website kalian. Pasti tidak ada perubahan apa-apa, betul ? Ya, karena file “style.css” nya tadi masih kosong. Kalian harus paham coding minimal HTML dan CSS untuk bisa mendesain tema anak ini.

Untuk kalian yang sudah paham, silahkan desain warna, ukuran, bentuk, posisi, dsb. melalui style.css tema anak yang kalian buat. Jadi, ketika ada update versi terbaru pada tema induk, tidak akan menghilangkan hasil desain yang kalian buat.

Perhatian! Setelah berhasil membuat tema anak, kalian jagan hapus tema induk yang bersangkutan dari WordPress kalian. Karena pasti jadi ERROR.

Males ? Ribet ? Download code yang saya susun diatas lewat link dibawah ini (4KB), nanti kalian tinggal ganti-ganti namanya aja.

Download Code Untuk Membuat Child Theme, Gratis !

Menambah Gambar

Setelah tema tampil di halaman tema yang terpasang di dashboard WordPress, masih kurang menarik karena tidak ada gambar / thumbnail nya. Cara membuatnya gampang sekali, siapkan gambar berjenis PNG dengan nama screenshot lalu upload gambar tersebut ke cPanel dibagian inc tema anak yang bersangkutan sejajar dengan file style.css.

Selamat mencoba !

Artikel Lainnya
Berikan Komentar

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya