WordPress

Cara Membuat Child Theme WordPress

Cara Membuat Child Theme WordPress

Pengenalan

Programmer WordPress telah menambahkan kemampuan untuk membuat child theme WordPress agar Anda bisa membuat sub-theme berdasarkan karakteristik dari theme utama. Child theme akan memungkinkan Anda untuk menggunakan dan memodifikasi theme utama, kemudian menyimpan child theme terpisah tanpa mempengaruhi theme utama. Dalam tutorial ini, Anda akan belajar bagaimana cara membuat dan mengkustomisasi child theme WordPress.

Mengapa Anda harus menggunakan Child Theme WordPress?

Child theme memungkinkan Anda untuk memodifikasi theme utama sesuai yang Anda inginkan. Anda kemudian bisa mengganti child theme tanpa mempengaruhi theme utama.

Cara Kerja Child Theme

Child theme berada di direktori terpisah dari theme utama dan setiap direktori child harus memiliki file style.css dan functions.php sendiri. File tambahan yang dikustomisasi bisa ditambahkan sesuai dengan kebutuhan, namun file tersebut direkomendasikan agar theme bisa berfungsi dengan normal.

Dengan menggunakan file .css dan .php yang relevan, Anda bisa memodifikasi apapun mulai dari styling dan parameter layout hingga coding yang sebenarnya dan sscript yang digunakan oleh child theme WordPress, bahkan jika script tersebut tidak terdapat di direktori utama.

Bayangkan child theme WordPress sebagai lapisan yang berada di atas theme utama. Jika pengunjung membuka website Anda, WordPress pertama kali akan me-load child theme dan kemudian menurunkan style dan fungsi yang hilang dari theme utama. Hasilnya, mayoritas coding Anda tetap akan mengambil dari direktori utama, namun sudah dimodifikasi sesuai dengan parameter pada child theme sebelum konten ditampilkan di halaman. Siap mulai membuat child theme WordPress Anda?

Yang Anda butuhkan

Sebelum memulai, yang Anda butuhkan adalah:

  • Akses ke halaman admin WordPress
  • Akses ke File Manager atau aplikasi FTP

Langkah 1 – Membuat Child Theme di WordPress

Membuat sebuah child theme tidak lebih sulit daripada membuat 1 theme khusus.

Anda bisa membuat sebuah direktori untuk child theme di dalam direktori wp-content/themes. Untuk menjaga agar susunan direktori Anda tetap baik, Anda bisa menambahkan -child di bagian akhir nama theme utama. Anda juga bisa menambahkan nama dari project tertentu jika Anda mau. Pastikan Anda tidak menggunakan spasi dalam nama file, karena akan berakibat munculnya error. Untuk membuat direktori baru, Anda bisa lakukan dengan menggunakan aplikasi FTP atau File Manager.

Contoh berikut menggunakan File Manager untuk membuat child theme berdasarkan theme Twenty Seventeen, jadi alamat lengkap folder child theme nya adalah wp-content/themes/twentyseventeen-child.

1. Buka Control Panel Hostinger dan klik File Manager.
2. Buka direktori instalasi WordPress Anda (biasanya bernama public_html) dan buka folder wp-content/themes.
3. Klik icon Create New Folder, masukkan nama child theme Anda dan klik Create.

Create Folder for WordPress Child Theme

4. Buka folder child theme yang baru dibuat.
5. Klik tombol New File dan masukkan style.css sebagai namanya, klik Create.

Creating style.css file
6. Tambahkan kode berikut ini:

7. Ganti semua isinya menjadi sesuai dengan nama theme dan domain Anda. Bagian yang paling penting adalah bagian Templates dan @import, karena bagian tersebut akan menyatakan pada sistem WordPress, child theme Anda berbasis dari theme utama yang mana. Setelah selesai, klik Save.

Adding code to child theme css

8. Tambahkan file functions.php baru di dalam folder yang sama, namun jangan copy/paste kode dari file theme utama, karena perlu dipisahkan dari modifikasi apapun yang Anda lakukan untuk child theme. Buat file baru dan tambahkan fungsi .php yang dibutuhkan untuk child theme Anda.

9. Dari halaman admin WordPress, buka menu Appearance -> Themes untuk melihat child theme baru yang sudah Anda buat dan klik Activate.

Activating WordPress Child Theme

10. Buka website Anda dan Anda akan melihat theme Anda dengan beberapa keanehan seperti gambar berikut. Jangan khawatir, karena file functions.php belum diikutkan dengan theme utama.

WordPress without CSS

11. Dari halaman admin WordPress, buka menu Appearance -> Editor dan pilih functions.php.

12. WordPress memiliki fungsi untuk memanggil CSS dari theme utama. Copy dan paste kode berikut ke file functions.php pada child theme Anda:

13. Klik Update di bagian bawah halaman untuk menyimpan perubahan.

14. Buka kembali website Anda. Anda akan melihat CSS yang sudah bisa dipanggil dan theme Anda sekarang sudah terlihat sama persis dengan theme utama.
WordPress Child Theme with CSS

Seperti yang Anda lihat, pembuatan child theme WordPress sangat sederhana jika prosesnya dipecah menjadi beberapa bagian.

Langkah 2 – Mengkustomisasi Child Theme WordPress

Anda tentu ingin mengubah tampilan child theme WordPress menjadi sesuai dengan keinginan Anda, kan?

Langkah 2.1 – Mengkustomisasi tampilan child theme

Untuk mengkustomisasi tampilan theme Anda, Anda harus mengedit file custom.css milik child theme Anda. Anda bisa menggunakant ext editor atau aplikasi FTP, file manager atau menggunakan editor WordPress (Appearance -> Editor). Anda juga setidaknya harus memahami prinsip dasar dari CSS dan paham bagamana cara inspect element menggunakan web browser.

Sebagai contoh, untuk mengganti warna background child theme WordPress anda, tambahkan kode berikut ke file style.css:

Lihatlah bagaimana perubahan ini mengubah tampilan WordPress Anda. Ikuti proses yang sama untuk mengganti element lain yang ingin Anda ganti.

WordPress Changed Background Color

Langkah 2.2 – Menambahkan dan menghapus fitur

Kelebihan lainnya yang bisa Anda dapatkan dengan menggunakan child theme adalah kemampuannya untuk memiliki file functions.php yang terpisah, yang seperti Plugin, digunakan untuk menambahkan atau menghapus fitur tertentu. Dengan memiliki file functions.php di child theme yang terpisah, Anda bisa memastikan perubahan apapun tidak akan hilang bila theme di-update.

Untuk menambahkan fitur baru ke theme Anda, tambahkan kode PHP ke file functions.php pada child theme Anda. Contohnya, kode berikut akan menon-aktifkan fitur pencarian pada WordPress:

Kesimpulan

Child theme WordPress menawarkan cara yang powerful untuk membuat project baru berdasarkan parameter theme utama, tanpa mengubah file theme utama dan sebaliknya. Dengan sedikit code sederhana dan manajemen direktori, Anda bisa memodifikasi child theme sedikit maupun banyak sesuai yang Anda inginkan, sehingga Anda bisa memiliki desain dengan berbagai variasi. Selamat membuat child theme WordPress perdana Anda!

Gabung bersama ratusan ribu pelanggan di seluruh dunia

dan dapatkan tutorial baru langsung di email Anda

Please wait...

Abone olduğunuz için teşekkürler!

Dapatkan harga hemat!

Web Hosting Gratis Domain mulai dari

Rp.10.275
/bln