Pernahkah Anda memperbarui tema WordPress Anda hanya untuk menemukan bahwa semua perubahan khusus yang Anda buat pada tema itu sendiri telah hilang?
Mari kita pergi
Daftar isi
Apa itu Tema Anak WordPress
Tema anak WordPress tidak dianggap sebagai tema lengkap seperti yang dapat ditemukan di direktori tema WordPress. Sebaliknya, itu sepenuhnya bergantung pada tema lain (disebut Tema Induk) agar dapat diaktifkan dan berfungsi dengan baik
Saat diaktifkan, itu mewarisi semua fungsi, fitur, dan kode tema induknya tanpa membuat perubahan apa pun pada file tema induk
WordPress akan menyajikan kode tema induk kecuali bagian yang ditimpa oleh tema anak yang akan disajikan dari folder tema anak. Hasil dari ini berarti bahwa ketika tema induk diperbarui, setiap modifikasi/penambahan dan seterusnya yang dilakukan pada tema anak tidak hilang
Membuat Tema Anak (Langkah-demi-Langkah)
Sebelum melanjutkan, pastikan
- Anda memiliki akses ke file situs web Anda melalui klien FTP (seperti WinSCP atau Filezilla)
- Anda memiliki editor teks yang tersedia (seperti notepad ++)
Untuk memulai, kami akan mengaktifkan tema default yang juga disebut sebagai Tema Induk. Dalam contoh ini akan menjadi tema Dua Puluh Dua Puluh. Jika kita menuju ujung depan situs web kita, kita akan melihat sesuatu seperti ini
Sekarang mari buat dan aktifkan tema anak 'Twenty Twenty'
Tambahkan Direktori
Pertama, kita harus membuat direktori 'dua puluh dua puluh anak' baru di dalam /wp-content/themes. Perhatikan bahwa folder anak dapat diberi nama sesuka Anda selama Anda tidak menggunakan spasi atau tanda baca
Tambahkan gaya. file css
Selanjutnya, kita harus membuat gaya. css dan tambahkan tajuk tema yang sesuai. Sebelum melanjutkan, mari kita lihat gayanya. css dari tema induk
Mari kita lihat di mana informasi ini tercermin di area admin
Pertama, buka detail tema di Appearance > Themes dan perhatikan kolom kanan lebih dekat
Jika kita membandingkannya dengan stylesheet, kita akan melihat dari mana berbagai elemen dari informasi ini diambil
Kita perlu mulai menambahkan beberapa informasi ini ke stylesheet tema anak kita. Informasi minimum yang diperlukan yang harus dimasukkan sebagai tajuk adalah 'Nama Tema' dan 'Templat'.
/* Theme Name: Twenty Twenty - Child Template: twentytwenty */- Nama Tema. Nama yang diinginkan dari Tema Anak Anda yang akan ditampilkan di bagian belakang WordPress
- Templat. Ini harus identik dengan nama direktori dari tema induk. Ini adalah tajuk paling penting untuk tema anak karena sebenarnya memberi tahu WordPress apa tema induknya dan dengan demikian menentukan ketergantungannya. Tanpanya, tema anak Anda tidak akan berfungsi
Setelah tema anak diaktifkan, yang akan Anda lihat di backend adalah ini
Anda juga dapat memasukkan informasi opsional berikut
- Versi (versi tema)
- Membutuhkan setidaknya (versi WP minimum yang diperlukan agar tema berfungsi dengan baik)
- Membutuhkan PHP (versi WP PHP minimum agar tema berfungsi dengan baik)
- Deskripsi (detail terkait tema)
- Tag (tag tema)
- Penulis (nama pengembang Tema)
- dll.
Pada titik ini, jika Anda membuka ujung depan situs web Anda, Anda mungkin menemukan itu rusak dan terlihat seperti ini
Ini sepenuhnya normal karena stylesheet (style. css) yang sekarang menjadi referensi WordPress sekarang dari tema anak dan lembar gaya ini kosong, kecuali informasi yang Anda masukkan di atas. Anda dapat memulai gaya Anda sendiri dari awal atau memuat gaya tema induk dan mulai dari sana. Jika Anda ingin mengimpor lembar gaya tema induk, Anda dapat melakukannya dengan salah satu dari dua cara
Opsi Satu. Impor lembar Gaya Induk dengan Cara Klasik
Yang harus Anda lakukan hanyalah menambahkan baris ini ke gaya tema anak Anda. file css
@import url('../twentytwenty/style.css');_Perintah ini memberi tahu WordPress ke mana harus mencari untuk mengambil file CSS asli. Sekarang jika Anda me-refresh homepage Anda sepertinya kembali normal. Apa pun yang Anda tambahkan sekarang dalam gaya. css akan menimpa gaya induk yang diimpor. Coba misalnya untuk menambahkan ukuran font yang berbeda untuk judul h2 “Hello world. ”
Segarkan halaman dan lihat pemeriksa elemen pada tab pengembang.
Anda akan melihat bahwa nilai tambah dihitung dan default (gaya induk) "font-size. 6. 4rem;”
Apa yang harus Anda pertimbangkan adalah bahwa menggunakan metode ini memiliki pengaruh negatif pada kecepatan situs Anda karena file dipaksa untuk memuat satu demi satu dan tidak secara paralel. Lebih khusus lagi, browser harus mengunduh, mengurai, dan mengeksekusi file pertama sebelum "diberitahu" bahwa ia perlu mengunduh file kedua
Untuk alasan ini, mengimpor gaya induk. file css dengan cara ini tidak lagi direkomendasikan
Opsi Dua. Impor Lembar Gaya Induk dengan Cara yang Benar
Untuk mengimpor gaya induk. file css 'dengan cara yang benar' kita harus menambahkan file functions.php kosong di dalam folder tema anak Anda
Setelah Anda selesai melakukannya, buka dengan editor Anda dan tambahkan tag PHP pembuka (