Kali ini akan membahas bagaimana cara menambahkan styles di child themes WordPress. Sebelumnya telah dipaparkan pemahaman dasar child theme WordPress, tetapi tidak menjelaskan secara terperinci mengenai styles. Banyak developer dan desainer yang masih menggunakan cara lama menambahkan style induk yaitu menggunakan @import.
Tutorial ini saya kutip dari Digging Into WordPress (1/1/2016) bagi orang-orang yang mungkin belum akrab dengan menggunakan fungsionalitas enqueue WordPress untuk Child Themes. Di sini Anda akan menemukan teknik copy-n-paste, contoh, peringatan, dan banyak sekali sumber. Pada dasarnya segala sesuatu Anda butuhkan untuk mengetahui tentang memasukkan styles dalam Child Themes Anda.
Cara Lama
Jika Anda telah lama menggunakan WordPress (atau pengembangan web) untuk sementara, Anda mungkin akrab dengan teknik berikut ini untuk menyertakan sebuah stylesheet theme induk.
/*
Theme Name: Example Child Theme
Template: themedirectory
*/
/* import default parent styles */
@import url("../themedirectory/style.css");
/* add child theme styles below */
Jadi Anda hanya menggunakan kueri @import di dalam style.css Child Theme dan selesai. Cara stylesheet induk itu termasuk, dan Anda dapat mengkustomisasi Child Theme sesuka Anda dengan menambahkan style Anda sendiri.
Metode ini masih bekerja secara umum, tetapi ada beberapa yang didapat dan peringatan sekarang dengan browser dan framework JavaScript tertentu. Ditambah aspek kinerja menggunakan @import tidak optimal.
Cara baru
Sebagaimana masalah kinerja dan kerugian lainnya penggunaan @import ditemukan, developer mulai menggunakan metode enqueue untuk memasukkan styles induk di Child Themes. Anda mungkin sudah akrab dengan penambahan script dan style.
function twentysixteen_scripts() {
// enqueue style
wp_enqueue_style('twentysixteen-style', get_stylesheet_uri());
// enqueue script
wp_enqueue_script('twentysixteen-script', get_template_directory_uri() .'/js/functions.js', array('jquery'), '20150825', true);
}
add_action('wp_enqueue_scripts', 'twentysixteen_scripts');
Contoh ini diambil dari theme WordPress baku, Twenty Sixteen. Ini menunjukkan bagaimana hook wp_enqueue_scripts digunakan untuk meanmbahkan baik scripts dan styles. Ini adalah cara yang direkomendasikan untuk penambahan scripts dan styles ke theme WordPress apapun, termasuk Child Themes.
Enqueue styles induk di dalam child themes
Sama seperti kita menggunakan metode enqueue untuk theme induk, kita juga seharusnya menggunakannya untuk child themes. Jadi, bukannya menggunakan @import di dalam file style.css child theme Anda, Anda dapat menambahkan kode berikut ini ke file functions.php child theme Anda.
// enqueue styles for child theme
function example_enqueue_styles() {
// enqueue parent styles
wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
}
add_action('wp_enqueue_scripts', 'example_enqueue_styles');
Function ini termasuk stylesheet theme induk di dalam Child Theme. Ada beberapa parameter yang mungkin didefinisikan ketika menggunakan wp_enqueue_style().
Jadi sekali lagi, bukannya menggunakan kueri @import untuk memasukkan stylesheet induk, gunakan metode enqueue malahan. Kedua teknik cukup mudah, tetapi enqueue optimal di banyak kasus berdasarkan masalah kinerja, masalah kompabilitas, dan nuansa yang didapat lainnya.
Enqueue stylesheet induk dan child
Untuk menyempurnakan tutorial ini sedikit lebih jauh, berikut ini adalah sebuah function yang akan menambahkan baik stylesheet induk dan child ke Child Theme. Anda dapat menambahkan function ini ke file function.php child theme Anda.
// enqueue styles for child theme
function example_enqueue_styles() {
// enqueue parent styles
wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
// enqueue child styles
wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
}
add_action('wp_enqueue_scripts', 'example_enqueue_styles');
Ketika menambakan Child Theme Anda, function ini akan memasukkan baik stylesheet induk dan child. Perhatian bahwa kita mendefiniskan parameter ketergantungan di dalam enqueue child-theme, aray(‘parent-theme’). Ini menyebutkan WordPress bahwa styles child tergantung pada styles induk, jadi WordPress akan memuat styles induk pertama. Ini hanya sebuah pencegahan, sebagaimana perintah urutan di mana functions enqueue disebut seharusnya mendikte urutan yang benar.
Untuk enqueue atau bukan untuk enqueue
Apakah seharusnya Anda enqueue styles child sebaik styles induk? Perlukah? Inilah di mana banyak kebingungan yang ada mengenai enqueue stylesheet di dalam child themes. Jawaban tergantung pada bagaimana styles induk dimasukkan di dalam theme induk. Contohnya, jika theme induk sedang digunakan get_stylesheet_uri() untuk styles enqueue, contohnya seperti di Twenty Sixteen:
wp_enqueue_style('twentysixteen-style', get_stylesheet_uri());
..kemudian Anda tidak memerlukan untuk enqueue styles child. Ini karena get_stylesheet_uri() mengembalikan URL dari theme yang aktif saat ini, yang mana dalam kasus ini adalah child theme.
Nasihat terbaik jika ada kebingungan apapun adalah untuk pertama hanya enqueue styles induk, dan kemudian periksa kode sumber dari halaman theme Anda untuk melihat jika styles child sudah dimasukkan. Jika mereka bukan, maka lakukanlah dan enqueue mereka menggunakan teknik yang disediakan pada bagian sebelumnya.
Register kemudian enqueue
Jika Anda sedang mengembangkan theme untuk distribusi, dipertimbangkan praktek terbaik untuk pertama register stylesheet Anda sebelum menerapkan enqueue stylesheet. Contohnya:
wp_register_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
wp_enqueue_style('child-theme');
Men-register script dan style memberikan fleksibilitas yang lebih besar dan dapat membantu untuk menjaga kode Anda bagus dan rapi.
Menonaktifkan stylesheet
Jika Anda perlu menonaktifkan style induk, Anda dapat melakukan ini:
// disable parent theme styles
function example_disable_parent_styles() {
wp_dequeue_style('parent-theme');
}
add_action('wp_enqueue_scripts', 'example_disable_parent_styles');
Jika Anda menggunakan slug berbeda digunakan untuk style induk, Anda akan perlu mengubah parent-theme demikian. Untul lebih lengkapnya, Anda dapat melihat sumber-sumber di akhir dari tutorial ini.
Referensi URL
Sebagai informasi tambahan untuk Anda mengenai output URL dengan berbagai fungsi yang digunakan dalam tutorial ini:
get_stylesheet_uri() = http://example.com/wp-content/themes/example-child/style.css get_template_directory_uri() = http://example.com/wp-content/themes/example-parent get_stylesheet_directory_uri() = http://example.com/wp-content/themes/example-child
Ini sangat berguna sekali ketika Anda mendiagnosis dan menguji konfigurasi yang berbeda, tema, dan sebagainya.
Sumber
Beberapa sumber Codex untuk fungsi yang digunakan dalam tutorial ini dan Anda bisa mengetahuinya lebih lanjut: