Cara Membuat Tema Anak WordPress (2021)

Apakah Anda tahu cara membuatnya? Tema Anak WordPress ?

Tentu saja, tema Anda akan terlihat cocok untuk situs web Anda, tetapi di beberapa titik, Anda perlu mengeditnya. Membuat perubahan pada tema anak adalah pilihan yang lebih baik untuk mengedit situs Anda. Selain itu, mempelajari tema anak adalah salah satu hal dasar WordPress yang harus Anda ketahui. Anda dapat mulai belajar tentang WordPress di sini.

Mari kita melalui proses untuk membuat tema anak WordPress.

Mengapa Anda Harus Menggunakan Tema Anak untuk WordPress?

Di WordPress, tema anak memperoleh semua fitur, fungsi, dan lainnya dari tema induk. Di sisi lain, mengedit tema anak tanpa mengubah tema induk dimungkinkan. Ini akan mempersingkat waktu dan upaya mengedit situs untuk Anda. Selain itu, pembaruan tema WordPress Anda tetap lebih aman dan stabil. Saat Anda menyesuaikan anak, semua perubahan dan penyesuaian pada induk akan tetap sama. Pengguna juga dapat menggunakan tema anak ini di situs web WordPress lainnya.

Pemberitahuan sebelum Membuat Tema Anak

Untuk membuat WordPress tema anak , keterampilan pengkodean diperlukan karena Anda akan bekerja dengan HTML dan CSS. Mengetahui apa yang harus diubah sangat penting. Selain itu, Anda akan memerlukan pengetahuan dasar tentang PHP, setidaknya menyalin/menempelkan cuplikan kode dari sumber lain.

Kami dengan tulus menyarankan Anda untuk berlatih di lingkungan pengembangan. Ini adalah tempat di mana Anda dapat melakukannya tanpa takut mengacaukan situs utama Anda. Ini seperti Anda membunuh 2 burung dengan satu batu: satu memindahkannya ke bidang pengujian dan satu lagi digunakan sebagai pengembangan tema.

Satu hal lagi, tema induk harus sesuai dengan tampilan dan fungsionalitas untuk tujuan Anda. Memang, semakin sedikit perubahan yang Anda buat, semakin baik situs Anda nantinya.

Pada bagian di bawah ini, kita akan menggunakan tema LearnPress sebagai contoh untuk ilustrasi yang lebih baik dari WordPress create child theme .

Membangun Tema Anak Pertama

Anda memiliki 2 opsi saat membuat tema anak WordPress. Anda dapat menggunakan cara manual untuk mengenal semua file. Jika tidak, menerapkan plugin akan bekerja dengan file dan folder yang rumit.

Sekarang, kita akan memulai kustomisasi.

Menggunakan Kode

Untuk memulai, Anda akan membuka /wp-content/themes/ di Instalasi WordPress dan membuat folder baru untuk tema anak Anda. Beri nama sesuka Anda.

Kemudian, Anda harus membuat 2 file pertama untuk tema anak Anda. Buka editor teks dan rekatkan kode di bawah ini ke dalam dokumen kosong:

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

Anda dapat mengubah informasi sesuai rencana dan menyimpan file ini ke file style.css Anda di folder tema anak terbaru. Nah, Anda baru saja membuat stylesheet utama tema anak.

Selanjutnya, Anda akan membuat file kedua untuk mengimpor ^stylesheet dari tema induk. Buat dokumen baru di editor teks Anda dan salin kode ini:

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

Saat Anda menggunakan LearnPress sebagai tema induk, kode ini akan mulai berfungsi. Dengan demikian, sebagian besar tema akan berfungsi seperti ini. Simpan file ini dan itu akan menjadi folder functions.php tema anak Anda.

Setelah langkah-langkah tersebut, Anda akan memiliki tema anak dasar. Di bagian "Tampilan", pilih "Tema" dan "Aktifkan". Oleh karena itu, situs Anda akan mulai menggunakan tema anak. Jika Anda perlu menyesuaikan, pindah ke bagian berikutnya.

Menggunakan Plugin

Kami menyarankan Anda dapat menggunakan plugin Child Theme Configurator. Karena tidak memerlukan pengkodean, Anda dapat dengan mudah membuat perubahan dan penyesuaian.

Pertama, instal plugin di situs Anda. Untuk panduan lebih lanjut tentang pemasangan plugin, klik di sini.

Saat mengaktifkan, Anda pergi ke "Alat" -> "Tema Anak" dan pilih LearnPress di tema induk yang meminta popup. Pilih "Analyze" untuk memeriksa kompatibilitas menjadi tema induk. Selanjutnya, Anda harus memberi nama folder tema anak untuk menyimpan file dan tempat menyimpannya. Dalam pengaturan default, pilih "Klik untuk Mengedit Atribut Tema Anak". Kemudian Anda akan memenuhi informasi tema anak.

Saat membuat tema anak secara manual, tema anak Anda tidak akan mewarisi menu dan alat dari tema induk. Untuk mengatasinya, gunakan Child Theme Configurator. Terakhir, pilih "Buat Anak Tema Baru" untuk menyelesaikan. Pada langkah ini, tema anak Anda akan memiliki fungsi.php dan style.css untuk pengembangan lebih lanjut. Rupanya, ingatlah untuk melihat pratinjau plugin anak Anda. Setelah itu, Anda memilih "Aktifkan & Terbitkan" untuk menerbitkan tema anak Anda.

Sekarang, kami akan mulai menyesuaikan tema anak Anda.

Kustomisasi Tema Anak WordPress

Kami akan membuat tema anak WordPress sedikit berbeda dengan tema induk dengan menambahkan kode ke file “style.css”.

Salin Kode dari Firefox/Chrome Inspector

Anda dapat menggunakan widget Inspektur Chrome dan Firefox untuk menemukan kode CSS yang diperlukan. Selain itu, Anda dapat menggunakan alat ini untuk mengakses elemen CSS dan HTML semua situs.

Untuk melihat file CSS dari sebuah posting atau situs, klik kanan dan pilih “Inspect”. Layar Anda akan terbelah menjadi 2 bagian dan Anda dapat melihat CSS dan HTML halaman tersebut. Saat Anda menggerakkan mouse di atas garis HTML, alat inspektur akan menampilkan Anda di jendela atas atas. Juga melakukan aturan CSS.

Akan ada perubahan warna sementara di bagian belakang. Untuk membuatnya permanen, salin baris aturan CSS ini dan tempel di file style.css tema anak:

 1 body { 2 background-color: #fdf8ef; 3 )

Simpan perubahan dan pratinjau situs. Selain itu, Anda dapat meluncurkan ulang ini untuk elemen apa pun di lembar gaya tema. Nah, kami memberikan stylesheet lengkap untuk tema anak di sini:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

Salin Kode dari File style.css Tema Induk

Seperti yang Anda lihat, dimungkinkan untuk menyalin dari file parent theme'style.css dan menempelkannya ke tema anak dan menyesuaikan.

Misalnya, kode untuk warna latar halaman adalah:

 1 background-color: var(--global--color-background);

'–global–color-background' adalah variabel yang digunakan di berbagai tempat tema. Anda harus mengubah nilai variabel jika Anda perlu mengubah warna di tempat-tempat itu secara bersamaan. Pindah ke /wp-content/themes/learnpress di folder instalasi WordPress dan buka file style.css di editor teks untuk mencari tempat –global–color-background. Variabel tersebut dapat diubah dengan variabel lain. Anda dapat menemukan banyak variabel warna dalam file style.css tema induk. Setelah memilih opsi warna yang sesuai, Anda menyalin dan menempelkan baris kode itu ke file style.css tema anak, dan mengganti yang lama dengan yang baru yang dipilih untuk kecenderungan warna Anda. Kemudian, warna akan dibagi berdasarkan skema warna yang direncanakan. Proses ini akan membuat skema warna Anda konsisten dan cepat diedit.

Menyesuaikan File Template

Dalam sebuah tema, area penanganan file di situs web disebut template. Templated biasanya dinamai bagian yang mereka tangani. Dengan demikian, beberapa bagian penting dikelola oleh berbagai file atau templat konten.

Untuk menyesuaikan template, temukan file itu di tema induk dan salin ke tema anak. Kemudian, buka di editor teks dan mulai memodifikasinya.

Kami akan menunjukkan tutorial untuk proses ini dengan file footer.php. Salin ke folder tema anak dan buka di editor teks biasa. Misalnya, mari kita hapus tautan “Proudly powered by WordPress” di footer dan tambahkan pemberitahuan hak cipta. Untuk memulai, hapus semua di antara tag <div class="powered-by">.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

Kemudian Anda akan menempelkan kode yang Anda temukan di bawah tag tersebut pada contoh di bawah ini.

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

Pilih "Simpan Perubahan" dan ketika Anda kembali ke situs, Anda akan melihat pemberitahuan hak cipta yang baru.

Menambahkan Fungsionalitas ke Tema Anak WordPress Anda

Untuk mengubah atau menambahkan fungsi ke situs Anda, Anda harus mencari file functions.php. File ini menggunakan kode PHP untuk menjalankan proses ini.

Biasanya, Anda dipandu untuk menyalin dan menempelkan potongan kode ke dalam file function.php tetapi akan dihapus saat Anda memperbarui PHP atau tema Anda. Oleh karena itu, kami menyarankan Anda untuk menggunakan tema anak untuk menambahkan cuplikan kode. Baiklah, mari kita beralih ke proses menambahkan widget. Tambahkan cuplikan kode ke file functions.php dari tema anak.

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

Simpan dan navigasikan ke "Tampilan" -> "Widget" untuk melihat alat baru. Selain itu, Anda dapat mencari informasi selengkapnya tentang menambahkan area fungsi. Anda dapat menambahkan banyak fitur dengan menambahkan potongan kode ke file functions.php situs Anda.

Itu saja tentang cara membuat tema anak di WordPress . Mari kita pindah ke bagian dari memperbaiki kesalahan.

Memperbaiki Kesalahan

Anda dapat menemui masalah apa pun saat membuat tema anak kapan saja. Karena itu, Anda tidak boleh mudah menyerah.

Masalah sintaks dapat disebabkan oleh beberapa yang hilang dalam proses pengkodean. Juga, ini adalah kesalahan paling populer yang dapat ditemui semua pengguna. Selain itu, jika ada yang tidak beres, Anda selalu dapat menghapusnya dan memulai dari awal.

Cara Membuat Tema Anak WordPress: Kesimpulan

Kami berharap Anda dapat memperoleh pengetahuan tentang membuat tema anak melalui artikel kami. Terima kasih atas bacaan Anda!

Baca lebih lanjut: Cara Memperbaiki HTTP Error 500 WordPress (2021)