Tutorial Membuat Tema Anak WordPress

Banyak dari kita ingin menyesuaikan sesuatu dalam tema. Apakah Anda juga ingin menambahkan atau mengedit sesuatu dalam tema yang Anda gunakan? Jika ya, maka Anda telah datang ke tempat yang tepat, sobat. Posting ini adalah tutorial sederhana dan komprehensif tentang cara membuat tema anak WordPress.

Jika tema memiliki banyak opsi penyesuaian maka ini dapat membantu memenuhi kebutuhan Anda. Tetapi terlepas dari berapa banyak opsi yang tersedia, mungkin masih ada sesuatu yang tidak dapat dilakukan atau tidak sesuai dengan keinginan Anda saat ini oleh tema yang Anda miliki. Jadi, jika Anda merasa nyaman dengan kode dan WordPress, maka Anda dapat masuk ke file tema dan mulai mengeditnya selama beberapa menit, berjam-jam untuk menambahkan perubahan yang Anda suka ke dalam tema, hanya untuk mengetahui bahwa Anda telah kehilangan perubahan itu saat tema Anda berikutnya pembaruan bergulir.

Jadi untuk menghindari hal ini muncullah hero kita yang disebut Child Theme . Membuat tema anak memungkinkan Anda membuat perubahan pada situs Anda tanpa mengubah apa pun dalam kode tema asli. Bahkan jika Anda hanya membuat beberapa penyesuaian kecil, Anda perlu meluangkan beberapa menit untuk membuat tema anak.

Catatan : Untuk membuat perubahan CSS sederhana di situs web Anda, Anda dapat menggunakan kotak CSS tambahan yang ditambahkan di WordPress 4.7 alih-alih membuat Tema anak. Perubahan yang dilakukan melalui kotak CSS tambahan ini akan tetap ada meskipun Anda memperbarui tema. Tetapi jika Anda mencari perubahan tambahan lainnya seperti mengedit file PHP, tema anak harus dibuat.

Jadi, saya pikir ini akan mencakup ' Mengapa Membuat Tema Anak?' pertanyaan. Jadi, mari kita lanjutkan dan buat tema anak.

Bagaimana cara membuat Tema Anak WordPress?

Dalam tutorial ini, kita akan menunjukkan cara membuat tema anak untuk tema populer kita sendiri Spacious .

Langkah pertama:

Buat folder baru di direktori tema Anda. Anda dapat melakukannya menggunakan cPanel atau melalui FTP. Direktori tema adalah wp-content/themes. Jadi, beri nama folder sebagai anak luas. Anda dapat memberi nama apa pun yang Anda suka tetapi ingat tidak boleh ada spasi di nama folder. Ini adalah pendekatan umum untuk menamai tema anak sebagai tema induk ditambah -anak ditambahkan di akhir.

Langkah Kedua:

Di dalam folder anak yang luas buat file bernama style.css dan isi informasi seperti yang ditunjukkan di bawah ini.

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

Tambahkan ini dan simpan file.

Poin yang perlu diingat :

• Nama template (dalam hal ini luas) harus sesuai dengan nama folder tema induk dan juga pastikan tidak ada ruang kosong setelah nama.
• Detail lainnya dapat ditambahkan atau diubah sesuka Anda.

Langkah ketiga:

Buat file bernama functions.php saat Anda membuat 'style.css' di Langkah Dua. Dan isikan informasi seperti gambar di bawah ini.

<?php
/**
 * Child theme functions file.
 */
function spacious_child_enqueue_styles() {
	// Parent theme style handle 'spacious_style'.
	$parent_;

	// Enqueue parent and child theme style.css.
	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'spacious_child_style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->( 'Version' ) );
}

add_action( 'wp_enqueue_scripts', 'spacious_child_enqueue_styles' );

Dalam membuat tema anak, file style.css dan functions.php adalah wajib sedangkan file template, dan file lainnya bersifat opsional dan dapat dibuat jika diperlukan.

Terakhir , untuk mengaktifkan tema anak, di dasbor buka Penampilan-> Tema. Cari tema anak yang Anda buat dan aktifkan. Itu dia. Juga, pastikan tema induk juga ada di tema yang diinstal agar tema anak berfungsi. Jika Anda sekarang mengunjungi situs Anda, itu akan terlihat sama seperti ketika tema induk diaktifkan. Namun, Anda mungkin perlu mengatur ulang beberapa pengaturan di Customizer.

Memodifikasi CSS Tema Anda

Jika Anda ingin memodifikasi CSS tema, Anda dapat menambahkan CSS di akhir file style.css dan menyimpannya. Baris CSS ini akan menimpa CSS tema induk.

Misalnya, kita ingin mengubah ukuran font judul situs untuk tema luas untuk nilai default 36px menjadi 42px dan juga mengubah warnanya dari #444444 default menjadi biru ( #0000FF ). Kemudian Anda bisa menambahkan baris CSS di bawah ini.

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */
#site-title a {
	color: #0000FF;
	font-size: 42px;
}

Membuat Perubahan Lebih Lanjut

Mengedit file tema lainnya
Anda juga dapat membuat perubahan struktural pada file tema dengan menyesuaikan file template. Katakanlah, Anda ingin beberapa perubahan atau ingin menambahkan beberapa kode tambahan di header. Kemudian Anda dapat menyalin file header.php dari tema induk, menempel di dalam tema anak dan membuat/menambahkan perubahan di sana dan menyimpan file. File header.php ini akan memuat alih-alih file header.php dari tema induk.

Membungkus

Semoga sekarang kamu sudah bisa membuat child theme dan melakukan kustomisasi yang kamu suka. Ingin mengatakan sesuatu? Tambahkan di komentar dan saya akan menghubungi Anda kembali. Menikmati!