Ini adalah panduan lengkap tentang step by step cara membuat child theme wordpress.
Di sini anda akan belajar tentang:
- Apa Itu Child Theme WordPress
- Mengapa harus membuat Child Theme
- Langkah-langkah membuat Child theme wordpress
- Cara mengaktifkannya
- Cara mengubah tampilan tema dengan Child Theme
So, buat anda yang ingin mengetahui semua hal tentang Child Theme di CMS wordpress, simak penjelasannya sampai habis ya!
Apa Itu Child Theme WordPress?
Child Theme WordPress adalah sebuah theme (tema) yang dibuat sebagai turunan dari tema induk di WordPress.
Misalnya, di blog ini saya menggunakan tema Generatepress.
Maka saya bisa membuat theme turunan dari Generatepress tersebut misalnya dengan nama Generatepress_Child.
Child theme di WordPress memungkinkan pengguna untuk membuat perubahan pada tampilan website tanpa perlu mengubah kode assli dari tema tersebut. Seperti mengubah gaya (stye) dan fungsi (function) untuk dimodifikasi sesuai selera.
Dengan menggunakan Child theme, pengguna bisa memodifikasi tema wordpress dengan aman. Pasalnya jika terjadi update pada tema induk, maka modifikasi yang dilakukan pada child theme tidak akan hilang atau tertimpa oleh pembaruan tersebut.
Mengapa Perlu Membuat Child Theme?
Membuat child theme (anak tema) pada wordpress bisa memberikan beberapa keuntungan.
Diantaranya…
Modifikasi theme gak hilang
Sebagaimana disebutkan sebelumnya, dengan menggunakan child theme, memungkinkan anda untuk membuat perubahan pada tema wordpress tanpa perlu mengubah kode asli dari tema induk (parent theme).
Ini penting.
Karena jika Anda mengubah kode asli tema induk, maka perubahan tersebut akan hilang atau tertimpa ketika ada update theme dari developer. Dengan demikian modifikasi yang dibuat akan hilang.
Menjaga keamanan website
Membuat child theme wordpress juga dapat meningkatkan keamanan pada website. Hal ini karena sebagai pengguna, kita tidak perlu mengutak-atik kode asli dari tema induk.
Tentu jika mengubah kode asli ini, bisa berpotensi untuk membuka cela bagi hacker untuk mengerang situs kita.
Mempercepat Membangun Website
Child theme juga akan membuat anda bisa membangun website dengan cepat dan mudah.
Anda tidak harus mengembangkan theme dari nol. Cukup memodifikasi child theme ini jika ingin mengubah tampilan.
Selebihnya anda bisa fokus pada konten dan hal-hal penting lainnya.
Langkah-Langkah Membuat Child Theme WordPress
Nah, selanjutnya mari kita bahas tentang langkah demi langkah cara membuat child theme wordpress ini.
Langkah-langkah ini sangat mudah untuk dilakukan, bahkan oleh anda yang tidak terbiasa dengan kode-kode dan pemrograman.
berikut panduan lengkapnya…
1. Membuat Folder Child theme
Hal pertama yang harus dilakukan untuk membuat child theme wordpress adalah membuat folder khusus untuk child theme di cpanel.
(Atau kalau anda menggunakan plesk atau yang lainnya, silahkan disesuaikan saja. Caranya kurang lebih sama kok).
- masuk ke cPanel website anda
- cari dan klik menu “File Manager“
- Selanjunya pilih opsi “public_html“
- Kemudian cari folder “wp-content” dan buka
- Dalam folder wp-content, cari folder “themes” dan buka
- Buat folder baru di dalam folder themes dan beri nama folder baru tersebut dengan nama child theme yang diinginkan. Misalnya, jika tema induk Anda bernama “Generatepress“, Anda dapat membuat folder baru bernama “Generatepress-child“.
Nantinya pada laman dashboard wordpress anda akan muncul theme baru bernama “Generatepress-child” sesuai dengan yang anda buat sebelumnya.
2. Membuat File style.css
Langkah kedua adalah emmbuat file style.css pada folder tersebut.
Setelah folder tersebut jadi, maka selanjutnya buatlah sebuah file baru dengan nama “style.css”.
Caranya…
Pada bagian kiri atas klik menu “+ File“. Selanjutnya kemudian pada kolom “New File Name” ketikkan “style.css”.
Klik “Create New File“.
Selanjutnya, pada file tersebut masukkan kode di bawah ini. Caranya klik pada file dan klik “edit” pada menu bagian atas.
Copy dan paste code berikut ini:
/*
Theme Name: Nama Child Theme Anda
Theme URI: URL untuk Child Theme Anda
Description: Deskripsi Child Theme Anda
Author: Nama Anda
Author URI: URL Anda
Template: nama tema induk
Version: nomor versi child theme Anda
*/
/* Mulai menambahkan gaya kustom Anda di bawah ini */Ganti keterangan di atas sesuai dengan data dari theme induk yang anda gunakan.
contohnya seperti berikut ini:
/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Description: Default GeneratePress child theme
Author: Tom Usborne
Author URI: https://tomusborne.com
Template: generatepress
Version: 0.1
*/3. Membuat File Function.php
Masih di dalam folder child theme tersebut, selanjutnya buat lagi file baru dengan nama “function.php” (tanpa tanda petik).
Selanjutnya, tambahkan kode berikut ini pada file tersebut:
<?php
function nama_child_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'nama_child_theme_enqueue_styles' );
?>File ini akan berfungsi untuk menarik data dari theme induk anda.
4. Simpan perubahan dan aktifkan Child Theme anda.
Setelah semua selesai, selanjutnya anda bisa mengaktifkan child theme wordpress anda.
Caranya sama ketika anda menginstall theme di dashboard wordpress.
Masuk ke dashboard wordpress, pilih Tampilan/Appearance kemudian klik “Activate” pada theme tersebut. Selesai!
Baca juga: Setting Dasar WordPress Agar Optimal
Verifikasi Child Theme Anda
Verifikasi child theme pada WordPress sangat penting untuk memastikan bahwa child theme bekerja dengan benar dan tidak ada kesalahan dalam pengkodean atau penerapan fungsi kustom. Berikut adalah cara verifikasi child theme:
Pastikan child theme diaktifkan.
Sebelum memulai verifikasi, pastikan child theme yang ingin Anda verifikasi sudah diaktifkan pada situs web WordPress Anda.
Gunakan alat verifikasi tema.
Anda dapat menggunakan alat verifikasi tema seperti Theme Check untuk memeriksa kesalahan pada child theme. Alat ini akan memindai semua file child theme dan memberi tahu Anda tentang kesalahan apa saja yang ditemukan.
Verifikasi dengan manual.
Anda juga dapat melakukan verifikasi secara manual dengan menguji fitur dan fungsi child theme secara menyeluruh. Pastikan bahwa semua fungsi kustom yang Anda tambahkan ke file functions.php bekerja dengan benar dan tidak menyebabkan kesalahan.
Uji responsifitas tema.
Pastikan bahwa child theme berfungsi dengan baik pada semua perangkat dan ukuran layar dengan menguji responsifitas tema. Hal ini dapat dilakukan dengan menguji tema pada berbagai perangkat dan layar yang berbeda.
Uji kompatibilitas dengan plugin dan tema lain.
Pastikan bahwa child theme tidak menyebabkan konflik dengan plugin atau tema lain pada situs web Anda. Anda dapat menguji kompatibilitas dengan memasang plugin atau tema lain dan memastikan bahwa child theme berfungsi dengan benar.
Dengan melakukan langkah-langkah di atas, Anda dapat memastikan bahwa child theme berfungsi dengan benar dan tidak ada kesalahan dalam pengkodean atau penerapan fungsi kustom.
Baca juga: Google Trend Punya Tampilan Baru, Apa Saja Yang Berubah?
Mengubah Tampilan Tema dengan Child Theme
Selanjutnya dari child theme ini anda bisa mengubah tampilan tema dan fungsi dari website anda sesuai dengan keinginan. Perubahan yang dibuat tidak akan merusak kode asli dari tema induk, sehingga aman untuk dilakukan.
Berikut beberapa contoh cara mengubah tampilan tema menggunakan child theme:
1. Mengubah Warna Latar
Untuk mengubah warna latar belakang tema menggunakan child theme, ikuti langkah-langkah ini:
Buka file style.css pada child theme dan tambahkan kode CSS seperti berikut:
css
Copy code
body {
background-color: #F7F7F7;
}Ganti #F7F7F7 dengan kode warna yang ingin Anda gunakan untuk latar belakang situs web Anda.
Simpan perubahan dan refresh halaman untuk melihat perubahan.
2. Mengubah Font
Untuk mengubah font pada tema menggunakan child theme, ikuti langkah-langkah ini:
Buka file style.css pada child theme dan tambahkan kode CSS seperti berikut:
css
Copy code
body {
font-family: 'Open Sans', sans-serif;
}Ganti ‘Open Sans’ dengan nama font yang ingin Anda gunakan.
Simpan perubahan dan refresh halaman untuk melihat perubahan.
3. Menambahkan Widget Baru
Untuk menambahkan widget baru menggunakan child theme, ikuti langkah-langkah ini:
Buka file functions.php pada child theme dan tambahkan kode PHP seperti berikut:
php
Copy code
function child_theme_widgets_init() {
register_sidebar( array(
'name' => __( 'Widget Area', 'child-theme' ),
'id' => 'widget-area',
'before_widget' => '
', 'after_widget' => '',
'before_title' => '
', 'after_title' => '
',
) );
}
add_action( 'widgets_init', 'child_theme_widgets_init' );Simpan perubahan dan refresh halaman untuk melihat perubahan.
Setelah menambahkan kode PHP tersebut, buka halaman Widget di panel admin WordPress dan Anda akan melihat widget baru bernama “Widget Area” yang bisa Anda gunakan.
Dengan melakukan langkah-langkah di atas, Anda dapat mengubah tampilan tema WordPress dengan child theme dan menyesuaikan tampilan situs web Anda dengan mudah tanpa merusak kode tema induk.
Kesimpulan: Cara Membuat Child Theme WordPress
Nah demikianlah panduan lengkap tentang cara membuat child theme wordpress sendiri.
Yakni:
- Membuat folder child theme
- membuat file style.css
- membuat file function.php
Dari poin-poin di atas, mana yang paling menarik untuk anda?
Share di kolom komentar ya!
Sumber:
