Cara Membuat Tema Anak di WordPress

Menyesuaikan tema WordPress yang sudah ada adalah kebutuhan umum, namun mengedit tema secara langsung dapat menimbulkan masalah.

Jika tema diperbarui, perubahan Anda akan ditimpa! Cara yang lebih baik adalah dengan membuat tema anak yang diwarisi dari tema induk.

Tema anak memungkinkan Anda memodifikasi dan memperluas tema dengan aman dan terjamin.

Dalam panduan terperinci ini, kita akan membahas cara membuat tema anak di WordPress. Anda akan mempelajari tujuan tema anak, cara menyiapkannya, dan cara menyesuaikannya untuk menggantikan desain dan fungsionalitas tema induk.

Dengan beberapa metode, Anda dapat membuat tema anak dan mulai menerapkan perubahan Anda tanpa menyentuh file tema induk.

Jadi, tanpa basa-basi lagi, mari kita mulai.

1 Apa itu Tema Anak?

Tema anak adalah tema WordPress yang mewarisi fungsionalitas dari tema induk. Ini memungkinkan Anda untuk mengubah atau menambahkan fitur baru tanpa mengubah file tema induk.

Hal ini berguna karena jika Anda memodifikasi file tema induk secara langsung, perubahan Anda akan hilang saat tema diperbarui.

Dengan tema anak, Anda dapat membuat perubahan tanpa memengaruhi tema induk dan menerima pembaruan tanpa kehilangan modifikasi.

Di bagian ini, Anda akan melihat kami telah menyebutkan tema induk, tapi apa sebenarnya itu?

2 Apa yang dimaksud dengan Tema Induk?

Tema induk adalah tema pra-desain yang berfungsi sebagai fondasi situs WordPress. Ini menyediakan struktur dasar, tata letak, dan fungsionalitas situs.

Tema induk dapat disesuaikan agar sesuai dengan kebutuhan situs web tertentu dengan menambahkan atau memodifikasi fitur-fiturnya.

Menggunakan tema induk dapat menghemat waktu dan tenaga saat membangun situs web, memberikan titik awal untuk desain dan fungsionalitas.

Pada titik ini, kita dapat mengatakan bahwa semua tema WordPress secara teknis adalah tema induk kecuali dirancang khusus untuk menjadi tema anak.

Berikut hal penting yang perlu diingat: Tema induk dapat ada dan berfungsi secara independen, sedangkan tema anak selalu bergantung pada tema induk untuk menyediakan fungsionalitas dan fitur inti.

3 Mengapa Menggunakan Tema Anak?

Ada beberapa alasan utama untuk menggunakan tema anak daripada memodifikasi tema secara langsung:

• Membuat tema anak melindungi modifikasi Anda agar tidak ditimpa saat tema induk diperbarui.
• Itu memisahkan file tema induk dan anak. Ini membantu menghindari kebingungan karena file sudah diatur.
• Beberapa tema anak dapat digunakan untuk tujuan berbeda, seperti mengubah gaya atau fungsi. Namun perlu diingat bahwa sebuah situs web hanya dapat memiliki satu tema aktif dalam satu waktu.
• Ini juga merupakan cara yang bagus untuk mulai mengembangkan tema WordPress lengkap yang baru.

Catatan: Penyesuaian ekstensif pada tema anak dapat menyebabkan masalah manajemen. Untuk proyek yang lebih besar, membuat tema lengkap/induk berdasarkan tema asli seringkali lebih baik daripada terus memodifikasi tema anak.

4 Prasyarat untuk Membuat Tema Anak

Sebelum membuat tema anak, penting untuk memiliki beberapa persyaratan.

Pertama, Anda memerlukan instalasi WordPress yang berfungsi dan tema induk yang ingin Anda buatkan tema anak.

Memahami HTML, CSS, dan PHP juga berguna karena Anda akan mengubah kode untuk menyesuaikan tema anak.

Selain itu, Anda juga dapat menyalin dan menempelkan cuplikan kode dari sumber lain.

Disarankan untuk berlatih di lingkungan pengembangan lokal dengan menggunakan konten tiruan atau memindahkan situs WordPress aktif ke server lokal untuk tujuan pengujian. Ini memungkinkan Anda menguji tema anak Anda sebelum menerapkannya di situs langsung.

Terakhir, penting untuk memiliki cadangan situs web jika terjadi kesalahan selama proses berlangsung.

Jadi, setelah Anda menetapkan semua persyaratan ini, Anda dapat membuat tema anak. Yang perlu Anda lakukan hanyalah mengikuti proses penyiapan tema anak yang diuraikan dalam panduan ini.

Namun untuk panduan ini, kami akan menggunakan tema WordPress default Twenty Twenty-four.

5 Membuat Tema Anak di WordPress

Sekarang setelah Anda memahami konsep tema anak, mari pelajari cara membuat tema anak di WordPress.

Kami akan mempelajari dua metode umum yang dapat Anda pilih, yang memenuhi tingkat kenyamanan berbeda:

5.1 Membuat Tema Anak Menggunakan Kode

Pertama, akses instalasi WordPress Anda melalui FTP atau pengelola file yang disediakan oleh panel kontrol hosting Anda. Arahkan ke direktori wp-content/themes dan buat folder baru dengan nama unik untuk tema anak Anda.

Untuk tutorial ini, kita akan menggunakan nama “mtschild” untuk folder tema anak.

Direktori ini bertindak sebagai ruang penyimpanan utama untuk komponen tema anak Anda.

Di dalam folder tema anak, buat file baru berjudul style.css . File ini akan berisi detail penting untuk mengenali dan mengaktifkan tema anak Anda. Buka file style.css dan masukkan kode berikut:

 Theme Name: MTS Child Theme Theme URI: https://www.mythemeshop.com/ Description: Child theme for the Twenty Twenty-Four Theme Author: MyThemeShop Author URI: https://www.mythemeshop.com Template: twentytwentyfour Version: 1.0.0 Text Domain: mtschild

Kode ini memberi tahu WordPress bahwa tema anak Anda memperluas tema induk yang ditentukan. Gantikan “MTS Child Theme” dengan nama tema anak pilihan Anda dan kolom template dengan nama folder tema induk.

Langkah selanjutnya adalah memastikan bahwa tema anak Anda mewarisi gaya dari tema induk. Untuk mencapai hal ini, Anda harus memasukkan stylesheet tema induk ke dalam antrean.

Untuk melakukan ini, akses file function.php di direktori tema anak Anda (buat jika tidak ada) dan terapkan salah satu kode berikut.

Jika tema induk Anda tidak memuat stylesheet apa pun, gunakan kode berikut untuk memuat style.css melalui function.php:

 <?php add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' ); function mts_child_theme_enqueue_styles() { wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() ); }

Kode ini juga dapat berfungsi jika tema induk hanya memuat stylesheetnya.

Namun, jika tema induk hanya memuat stylesheet tema aktif, Anda juga harus mengantrekan stylesheet tema induk melalui functions.php menggunakan kode di bawah ini:

 <?php add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' ); function mts_child_theme_enqueue_styles() { wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) ); }

Untuk tema Dua Puluh Dua Puluh Empat yang digunakan dalam panduan ini, kami akan menerapkan kode pertama karena tema tersebut tidak memuat stylesheet apa pun sama sekali.

Ingatlah untuk memulai dengan tag <?php saat menambahkan kode. Ubah kode ini sesuai kebutuhan Anda, terutama jika nama tema mts_child_theme digunakan.

Setelah Anda menyelesaikan langkah-langkah di atas, masuk kembali ke dashboard WordPress Anda dan lanjutkan ke Appearance → Themes . Arahkan kursor ke tema anak dan klik tombol Aktifkan .

Karena Anda belum melakukan perubahan apa pun pada tema anak, situs web Anda akan mempertahankan fungsionalitas dan tampilan tema induknya.

Namun, kami akan memandu Anda dalam menyesuaikan tema anak untuk mempersiapkan Anda melakukan modifikasi lebih lanjut.

Ini adalah proses manual membuat tema anak menggunakan kode di WordPress. Jika metode ini tampak rumit, Anda dapat menjelajahi pendekatan plugin yang akan kita bahas di bagian selanjutnya.

5.2 Membuat Tema Anak Menggunakan Plugin

Membuat tema anak menggunakan plugin itu sederhana dan mudah. Pertama, Anda perlu menginstal dan mengaktifkan plugin Child Theme Configurator. Untuk lebih jelasnya, lihat panduan langkah demi langkah kami tentang cara menginstal plugin WordPress.

Setelah plugin diaktifkan, buka dashboard WordPress dan navigasikan ke Tools → Child Themes .

Pada tab Pilih Tema Induk, pilih tema induk dari menu tarik-turun untuk pembuatan tema anak. Biasanya, tema aktif di situs Anda telah dipilih sebelumnya.

Selanjutnya, klik tombol Analisis . Plugin akan memeriksa tema induk yang dipilih untuk menentukan apakah tema tersebut dapat menghasilkan tema anak dan apakah memerlukan file style.css untuk tampilannya.

Selanjutnya, berikan nama untuk tema anak Anda. Anda dapat menyesuaikan stylesheet, fungsi, dan konfigurasi lainnya sesuai keinginan Anda.

Namun, jangan mengubah pengaturan sampai Anda mencapai bagian 7.

Di bagian 7, klik tombol berlabel Klik untuk Mengedit Atribut Tema Anak .

Dari sana, Anda dapat memasukkan detail tema anak Anda.

Saat membuat tema anak secara manual, Anda mungkin kehilangan menu dan widget tema induk.

Namun, plugin Child Theme Configurator dapat mentransfernya dari tema induk ke tema anak.

Jika Anda ingin melanjutkan, tandai kotak centang di Bagian 8. Terakhir, klik tombol Buat Tema Anak Baru untuk membuat tema anak.

Setelah selesai, plugin akan membuat folder untuk tema anak Anda yang berisi file penting style.css dan fungsi.php untuk penyesuaian di masa mendatang.

Sebelum mengaktifkan tema, pratinjau tema tersebut dengan mengeklik tautan “Pratinjau tema anak Anda” di bagian atas layar untuk memverifikasi tampilannya dan memastikan tema tersebut tidak berdampak buruk pada situs Anda.

Setelah memverifikasi semuanya berfungsi dengan benar, klik tombol Aktifkan & Publikasikan . Ini akan membuat tema anak Anda aktif di situs web Anda.

Setelah Anda mengaktifkan tema anak di situs web Anda, sekarang saatnya untuk mulai menyesuaikannya. Kami akan membahas ini di bagian selanjutnya.

6 Cara Menyesuaikan Tema Anak Anda

Sebelum mempelajari penyesuaian, identifikasi elemen situs web yang ingin Anda modifikasi, seperti gaya, templat, fungsi, area widget, atau templat halaman khusus.

Memiliki visi yang jelas tentang tujuan Anda akan menyederhanakan proses penyesuaian. Ada berbagai metode untuk menyesuaikan tema anak Anda, termasuk:

6.1 Menyesuaikan Gaya Dengan CSS

File style.css tema anak Anda berfungsi sebagai platform untuk mengubah tampilan situs web Anda. Di sini, Anda dapat memasukkan aturan CSS khusus untuk mengubah atau menyempurnakan gaya tema induk.

Sebelum melanjutkan, pemahaman dasar tentang HTML dan CSS diperlukan.

Anda dapat secara efektif menggunakan alat Inspeksi browser Anda atau langsung menyalin gaya dari file style.css tema induk.

Untuk mengakses kode CSS halaman web menggunakan browser Anda, cukup klik kanan pada halaman tersebut dan pilih Periksa dari opsi yang muncul. Alat ini menampilkan kode gaya CSS, memungkinkan Anda menentukan elemen yang ingin Anda modifikasi.

Saat Anda mengeklik kanan dan memilih “Periksa”, layar browser Anda akan terbagi dua, menampilkan HTML dan CSS untuk laman tersebut.

Tergantung pada pengaturan browser Anda, detail HTML dan CSS mungkin muncul di sisi kanan atau bawah layar.

Saat Anda mengarahkan kursor ke berbagai baris HTML, pemeriksa Chrome akan menyorotnya di tab Elemen dan menampilkan aturan CSS terkait yang terkait dengan elemen yang disorot.

Anda dapat bereksperimen dengan mengedit CSS secara langsung untuk melihat pratinjau tampilannya. Misalnya, jika Anda ingin mengubah warna latar belakang beranda default tema Dua Puluh Dua Puluh Empat dari #f9f9f9 menjadi #6841ea.

Setelah Anda menyesuaikan warna latar belakang di inspektur browser, perubahan tersebut bersifat sementara. Untuk menjadikannya permanen, Anda harus mentransfer aturan CSS ini ke file style.css tema anak Anda:

 body { background-color: #6841ea; }

Setelah memasukkan kode, ingatlah untuk menyimpan modifikasi Anda. Anda dapat meniru proses ini untuk elemen halaman web lain yang ingin Anda sesuaikan.

Misalnya, Anda ingin mengubah warna di situs web Anda. Kami dapat memberi Anda beberapa kode CSS yang memungkinkan Anda melakukannya.

Untuk mengubah warna teks menjadi abu-abu tua, tambahkan kode berikut ke file CSS Anda:

 body { color: #3b3b3b; }

Untuk mengubah warna judul menjadi biru, gunakan kode berikut:

 h1, h2, h3 { color: #007bff; }

Untuk warna latar belakang header, gunakan kode berikut:

 #header { background-color: #f5f5f5; } /* Light grey background for header */

Dan untuk area konten, gunakan kode ini untuk mengatur warna latar belakang menjadi putih:

 .site-container { background-color: #fff; }

Anda dapat menyalin gaya CSS ini ke file style.css tema anak Anda baik melalui direktori tema anak situs web Anda atau dari dasbor WordPress Anda.

Saat Anda menambahkan kode CSS, formatnya akan menyerupai ini:

Setelah menyimpan perubahan Anda, coba segarkan halaman situs web Anda. Jika perubahan tidak muncul, kosongkan cache browser Anda untuk memastikan Anda melihat CSS versi terbaru.

6.2 Mengganti File Templat

Meskipun penyesuaian CSS mengontrol tampilan situs web Anda, tema anak menawarkan fitur yang lebih canggih: mengganti file templat.

Kemampuan tingkat lanjut ini memungkinkan Anda membentuk ulang tata letak dan struktur halaman dan elemen situs web Anda. Namun, berhati-hatilah karena memerlukan pemahaman lebih dalam tentang template WordPress, HTML, dan PHP.

Untuk mengganti templat, salin file .php asli dari folder tema induk ke tema anak Anda, pertahankan nama file persisnya.

Misalnya, untuk mengganti header.php, Anda perlu menyalin file header.php dari direktori /parent-theme/ dan menempelkannya sebagai header.php di direktori /child-theme/.

Anda sekarang dapat mengedit header.php di tema anak Anda.

Beberapa templat umum yang perlu diganti:

• header.php – Berisi tag <header> dan branding situs, navigasi, dll.
• footer.php – Tag dan markup <footer> penutup.
• page.php – Templat default untuk halaman.
• single.php – Template yang digunakan untuk posting tunggal.
• index.php – Templat beranda.

Misalnya, Anda dapat memodifikasi footer.php dengan menampilkan hak cipta khusus untuk situs Anda:

 <!-- Modified child footer.php --> <footer> <p>&copy; <?php echo date('Y'); ?> My Company</p> <?php if ( is_active_sidebar('footer-1') ) : ?> <?php dynamic_sidebar('footer-1'); ?> <?php endif; ?> </footer>

6.3 Memperluas Fungsi

File functions.php di tema anak memungkinkan Anda memperkenalkan fungsi, kait, filter, dan kode PHP baru untuk memperluas fitur default tema induk.

Fleksibilitas ini memberdayakan Anda untuk mendaftarkan jenis posting khusus, memasukkan widget khusus, membuat kode pendek baru, memasukkan skrip tambahan ke dalam antrean, dan banyak lagi.

Misalnya, jika Anda menginginkan bagian khusus di situs WordPress Anda untuk widget khusus, gunakan cuplikan kode berikut untuk membuat area widget bernama “Area Widget Khusus”:

 function register_custom_widget() { register_sidebar( array( 'name' => 'Custom Widget Area', 'id' => 'custom_widget_area', 'description' => 'Add widgets here to appear in the custom widget area', 'before_widget' => '<div class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'register_custom_widget' );

Setelah menyimpan kode ini di file function.php tema anak Anda, navigasikan kembali ke situs WordPress Anda dan akses Appearance → Widgets . Anda akan melihat widget “Area Widget Khusus” tersedia untuk digunakan.

7 Pertanyaan yang Sering Diajukan

8 Kesimpulan

Membuat tema anak di WordPress adalah keterampilan berharga yang dapat membantu Anda menyesuaikan situs web Anda tanpa risiko kehilangan perubahan selama pembaruan tema. Meskipun awalnya tampak menakutkan, jangan menyerah terlalu cepat jika Anda melakukan kesalahan.

Kesalahan paling umum yang mungkin Anda temui adalah kesalahan sintaksis yang disebabkan oleh hilangnya sesuatu dalam kode. Jika terjadi kesalahan, Anda selalu dapat memulai dari awal.

Misalnya, jika Anda secara tidak sengaja menghapus sesuatu yang diperlukan oleh tema induk, Anda cukup menghapus file tersebut dari tema anak Anda dan memulai lagi.

Ingat, dengan sedikit ketekunan, membuat tema anak dapat memberi Anda fleksibilitas untuk menciptakan tampilan dan nuansa unik untuk situs web Anda sekaligus menjaga stabilitas dan keamanan tema induk Anda.

Jadi, cobalah dan lihat perbedaannya pada situs WordPress Anda.

Kami harap panduan ini membantu Anda membuat tema anak untuk situs web Anda. Jika demikian, beri tahu kami dengan menge-Tweet @rankmathseo.