Panduan Utama Anda Untuk Bekerja Dengan Tema Anak WordPress

Jika Anda ingin menyesuaikan tema yang Anda beli dari kami di HeroThemes, mungkin jika Anda membuat situs web untuk diri sendiri atau klien Anda menggunakan desain yang dipesan lebih dahulu, maka dapat memanfaatkan kekuatan tema anak WordPress adalah sesuatu yang Anda perlukan.

Pada dasarnya, menggunakan tema anak akan membuat Anda lebih efisien – menyimpan kode yang Anda gunakan untuk setiap proyek dalam tema induk Anda sendiri, atau menggunakan tema induk yang tersedia seperti milik kami, berarti Anda mematuhi prinsip KERING (Jangan Ulangi Diri Sendiri).

Tetapi lebih jauh, Anda dapat menggunakan tema anak dan induk untuk membuat jaringan situs dengan basis kode inti, Anda dapat membangun tema khusus berdasarkan kerangka kerja tema pihak ketiga, atau Anda bahkan dapat membuat tema induk lanjutan Anda sendiri untuk digunakan sebagai kerangka kerja tema . Dalam artikel ini saya akan memberikan gambaran singkat tentang esensi tema anak dan kemudian saya akan menunjukkan beberapa teknik yang lebih maju. Anda akan belajar:

• cara menggunakan tema anak untuk mengadaptasi tema induk atau kerangka tema pihak ketiga dengan kebutuhan proyek Anda
• bagaimana WordPress memprioritaskan file template di masing-masing tema induk dan anak
• cara mengganti fungsi tema induk di file fungsi tema anak Anda.

Memahami Tema Orang Tua dan Anak

Secara teori, tema apa pun dapat bertindak sebagai tema induk, meskipun beberapa di antaranya dirancang lebih baik untuk peran ini (termasuk milik kita!). Jika Anda menggunakan salah satu tema kami dan ingin mengubahnya untuk proyek Anda sendiri, lebih baik menggunakan tema anak untuk melakukan ini daripada meretas tema utama, yang berarti Anda akan kehilangan semua perubahan saat memperbarui tema untuk versi mendatang. Untuk membuat tema anak, Anda cukup membuat tema baru dan menambahkan yang berikut ini ke awal lembar gayanya. Contoh saya di bawah ini menggunakan tema HeroThemes HelpGuru sebagai induknya, tetapi Anda dapat menggunakan tema apa saja, termasuk produk HeroTheme lain seperti KnowAll.

Mulailah membangun Basis Pengetahuan Anda hari ini!

Tema KnowAll kami menyertakan tema anak untuk membantu Anda menyesuaikan situs basis pengetahuan Anda

Dapatkan Tema

/*
Theme Name: My child theme
Theme URI: URL of the theme or site it's used for
Description: Description of what the theme is for and its main features.
Author: Your name
Template: helpguru
Version: 1.0
*/
@import url("../helpguru/css/style.css");

Garis penting adalah dua ini:

Template: helpguru
@import url("../helpguru/css/style.css");

Bagian pertama menentukan template, yang memberi tahu WordPress bahwa ini adalah tema anak dan induknya adalah tema HelpGuru. Perhatikan bahwa Anda menggunakan nama folder tema induk di sini dan bukan nama tema (jadi di atas saya menggunakan 'helpguru', bukan 'HelpGuru').

Bagian kedua mengimpor lembar gaya dari tema induk, artinya semua gaya tema induk akan diaktifkan di tema anak Anda. Anda kemudian menambahkan gaya Anda sendiri di bawah deklarasi @import ini – ini berarti gaya dari kedua tema akan digunakan tetapi jika ada deklarasi di kedua lembar gaya untuk elemen yang sama, CSS tema anak akan berlaku karena kaskade (sebagai styling datang setelah styling dari tema induk).

Tema anak dapat terdiri dari lembar gaya dan tidak ada yang lain jika Anda suka, dalam hal ini yang akan Anda lakukan hanyalah mengganti beberapa gaya tema induk. Atau Anda dapat menambahkan file template tambahan dan/atau file fungsi, dalam hal ini Anda harus memahami bagaimana WordPress mengakses file template dari tema induk dan anak Anda.

File Template Tema Orang Tua dan Anak

Cara WordPress menggunakan file template dalam tema induk dan anak cukup sederhana. Ketika halaman tertentu (atau posting, atau jenis konten lainnya) sedang ditampilkan, WordPress akan menggunakan file template yang paling relevan baik dari induk atau tema anak sesuai dengan hierarki template. Jika menemukan dua versi dari file template yang sama, itu akan menggunakan salah satu dari tema anak. Ini berarti bahwa file templat tema anak Anda akan menggantikan file templat tema induk dalam dua skenario:

• jika tema anak Anda berisi file templat yang lebih tinggi dalam hierarki daripada yang ada di tema induk;
• atau jika tema induk dan anak Anda berisi versi file template yang diperlukan.

Memutuskan File Template Tema Orang Tua atau Anak

WordPress akan menggunakan hierarki templat untuk menentukan file templat mana yang akan digunakan, tetapi ini berinteraksi dengan file yang Anda miliki di setiap tema induk dan anak Anda. Sederhananya, WordPress melewati tiga langkah:

1. Ini mengidentifikasi jenis konten yang ditampilkan.
2. Ini bekerja melalui hierarki templat hingga menemukan file untuk menampilkan konten itu, baik dalam tema induk atau anak.
3. Jika file ada dalam tema induk dan anak, file tersebut menggunakan salah satu dari tema anak.

Mari kita ilustrasikan ini dengan sebuah contoh. Tabel di bawah ini menunjukkan kumpulan file template dalam dua tema hipotetis, salah satunya adalah anak dari yang lain. File yang saya soroti diutamakan.

Jadi pada contoh di atas, mari kita lihat file template mana yang akan digunakan untuk menampilkan jenis konten tertentu:

• Posting tunggal untuk jenis posting kustom 'produk' akan ditampilkan menggunakan single-product.php dari tema anak.
• Posting tunggal untuk jenis posting lain (termasuk posting normal) akan ditampilkan menggunakan single.php dari tema anak.
• Halaman Statis akan ditampilkan menggunakan page.php dari tema induk.
• Daftar untuk kategori widget akan ditampilkan menggunakan category-widgets.php dari tema anak.
• Daftar kategori lainnya akan ditampilkan menggunakan category.php dari tema induk.
• Daftar arsip lainnya akan ditampilkan menggunakan archive.php dari tema induk.
• Hasil pencarian akan ditampilkan menggunakan search.php dari tema induk.
• 404 halaman akan ditampilkan menggunakan 404.php dari tema induk.
• Halaman lain tanpa file template tertentu akan ditampilkan menggunakan index.php dari tema anak.

Mengambil Lebih Jauh – Mengganti Fungsi Tema Induk

Selain mengganti atau melengkapi CSS dan/atau file template dalam tema induk, Anda dapat menggunakan tema anak untuk mengganti fungsionalitas dalam tema induk atau untuk menambahkan fungsionalitas tambahan.

Peringatan! Jika semua yang Anda gunakan untuk tema anak Anda adalah untuk menambahkan fungsionalitas tambahan, Anda mungkin lebih baik menulis sebuah plugin. Sayangnya file fungsi dalam tema induk dan anak tidak berinteraksi dengan cara yang sama seperti lembar gaya, sebenarnya mereka bekerja dengan cara yang berlawanan (membingungkan, saya tahu). WordPress memanggil fungsi dari tema induk Anda setelah yang berasal dari tema anak Anda, yang berarti bahwa fungsi tersebut dapat menggantikan fungsi tema anak. Saya tahu ini terdengar agak merepotkan: Anda membuat tema anak karena itulah yang Anda inginkan di situs Anda, bukan? Nah, untungnya ada cara untuk mengatasi hal ini. Metode pertama adalah yang Anda gunakan dalam tema anak Anda, dan itu untuk menetapkan prioritas saat melampirkan fungsi Anda ke tindakan yang relevan atau kait filter. Yang kedua dilakukan di tema induk, dan itu untuk membuat fungsi Anda dapat dicolokkan. Saya akan membahasnya sebentar lagi, tetapi pertama-tama mari kita lihat metode dalam tema anak Anda.

Menggunakan Prioritas Untuk Mengganti Fungsi Tema Induk

Untuk mengaktifkan setiap fungsi yang Anda tambahkan di tema anak Anda, Anda harus melampirkannya ke kait tindakan atau kait filter menggunakan add_action() atau add_filter() . Fungsi add_action() dan add_filter() memiliki tiga parameter:

• $tag – pengenal unik untuk action atau filter hook
• $function_to_add – nama fungsi Anda
• $priority – prioritas yang ingin Anda kaitkan dengan fungsi Anda (lebih banyak lagi akan segera)

Dengan add_filter() Anda dapat menggunakan parameter opsional keempat, $arguments , tetapi itu tidak terlalu relevan dengan tema anak. Dalam kebanyakan kasus, hanya dua parameter pertama (keduanya diperlukan) yang digunakan, tetapi Anda dapat menggunakan parameter $priority opsional untuk mengganti fungsi dalam tema induk dengan fungsi dalam tema anak Anda. Semakin tinggi prioritas, semakin lambat dimuat: defaultnya adalah 10 , jadi jika tema induk tidak menentukan prioritas, Anda cukup mengatur prioritas dalam tema anak Anda ke angka yang lebih tinggi dari 10. Mari kita lihat bagaimana ini bekerja. Bayangkan Anda bekerja dengan anak dari tema HelpGuru dan Anda ingin mengganti fungsionalitas menu dan menambahkan milik Anda sendiri. Tema ini menyertakan fungsi ht_theme_setup() untuk mengatur tema (termasuk mendaftarkan menu, menambahkan dukungan gambar unggulan, dan lainnya), yang dilampirkan ke kait tindakan after_setup_theme . Kode dalam file fungsi HelpGuru adalah sebagai berikut:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}
add_action( 'after_setup_theme', 'ht_theme_setup' );

Untuk mengganti elemen fungsi ht_theme_setup() (tetapi tidak semuanya: kami akan segera membahasnya) di tema anak Anda, Anda akan menulis fungsi yang menggantikan elemen fungsi yang disediakan oleh HelpGuru dan melampirkannya ke tindakan after_setup_theme hook, menentukan prioritas lebih tinggi dari 10:

function my_theme_setup() {
// contents of function
}
add_action( 'after_setup_theme', 'my_theme_setup', 15 );

Ketika WordPress menemukan fungsi-fungsi ini yang dilampirkan ke kait yang sama, itu akan mengaktifkan prioritas yang lebih rendah terlebih dahulu, yaitu yang dari tema induk. Ini kemudian akan memecat yang berprioritas lebih tinggi dari tema anak Anda, yang berarti dapat menimpa fungsi dari tema induk. Seperti yang saya sebutkan di atas, ada metode lain, yang merupakan praktik yang baik untuk menulis ke dalam tema Anda sehingga mereka dapat lebih mudah digunakan sebagai tema induk, dan itu untuk membuat fungsi Anda pluggable.

Menggunakan Fungsi Pluggable untuk Mengizinkan Penggantian Tema Anak

Saat WordPress meneruskan fungsi di tema induk setelah yang ada di tema anak Anda, Anda dapat mengkodekan fungsi tema induk Anda sehingga mereka memeriksa fungsi dengan nama yang sama di tema anak dan jika ada, fungsi tema induk tidak lulus. Anda melakukan ini dengan pernyataan bersyarat, seperti yang kita lihat di atas di HelpGuru:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}

Jika tidak ada fungsi dengan nama yang sama yang telah diteruskan (misalnya dalam tema anak), fungsi dari tema induk akan diteruskan. Tetapi jika WordPress telah menemukan fungsi dengan nama ini, itu akan mengabaikan fungsi pluggable (yaitu yang ada di tema induk). Untuk membuatnya berfungsi, Anda cukup membuat fungsi di tema anak Anda dengan nama yang sama dengan yang ada di tema induk yang ingin Anda timpa. Jadi untuk mengganti fungsi ht_theme_setup() secara keseluruhan, Anda akan menggunakan ini di tema anak Anda:

function ht_theme_setup() {
// contents of function
}

Itu dia! Cukup tulis fungsi lain dengan nama yang sama dan itu akan menimpa yang ada di tema induk. Catatan: Teknik ini hanya akan berfungsi jika Anda membuat tema induk Anda sendiri – jangan tergoda untuk mengedit file fungsi dalam tema induk pihak ketiga agar dapat dipasang. Lagi pula, inti dari membuat tema anak adalah Anda tidak menyentuh induknya!

Ringkasan

Seperti yang saya harap telah saya tunjukkan, bekerja dengan tema anak dapat meningkatkan efisiensi dan efektivitas Anda sebagai pengembang WordPress, terutama jika Anda mengembangkan situs kustom untuk klien atau diri Anda sendiri. Paling tidak, menggunakan tema anak dari tema yang ada seperti salah satu HeroThemes kami dapat membuat alur kerja pengembangan Anda lebih cepat dan lebih efisien, karena menghemat Anda melakukan pekerjaan yang sama berulang-ulang.

Anda dapat mengambil ini lebih jauh dengan menggunakan file template tema anak dan file fungsi untuk menimpa atau menambah fungsionalitas dari tema induk. Dan jika Anda benar-benar ingin mengambil tema anak secara maksimal, Anda dapat membangun tema induk Anda sendiri, memberi Anda titik awal yang cepat untuk semua proyek baru dan memungkinkan Anda untuk menambahkan lebih banyak ke tema anak Anda dengan lebih sedikit usaha daripada memulai dari awal. .