Posting ini memunculkan beberapa pertanyaan yang saya temui berkaitan dengan perubahan terbaru di sekitar metode enqueueing stylesheet yang dibesarkan di utas ini dan utas ini .
Masalah yang saya temui muncul dalam skenario kasus penggunaan umum, menggunakan tema induk yang banyak digunakan dan dipelihara dengan baik yang secara khusus tema anak siap pada instalasi WP 4.0. Function.php tema anak saya hanya berisi wp_enqueue_stylefungsi seperti yang dijelaskan dalam Codex .
Harap perhatikan bahwa meskipun kode yang dirujuk di bawah ini khusus untuk tema ini, sebagian besar menggunakan konvensi pengkodean saat ini yang digunakan oleh tema induk. Selain itu, area kekhawatiran saya kemungkinan besar dapat diduplikasi pada sejumlah besar tema orang tua yang ada saat ini di alam liar. Selain itu, pertanyaan yang diajukan ini berlaku pada tingkat universal, terlepas dari tema induk yang digunakan.
MASALAH 1: Twoqueueing
Pengaturan yang Direkomendasikan:
Tema induk adalah gaya enqueueing dan skrip menggunakan wp_enqueue_scriptshook, bagian yang relevan adalah sebagai berikut:
add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
wp_register_style( 'avia-style' , $child_theme_url."/style.css", array(), '2', 'all' );
wp_enqueue_style( 'avia-base');
if($child_theme_url != $template_url) { wp_enqueue_style( 'avia-style'); }
}Tema anak saya functions.phpmemerlukan gaya per perubahan codex terbaru:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
}Perhatikan ID berikut yang digunakan oleh kode referensi:
id='dm-parent-style-css'adalah stylesheet tema orangtua, seperti yang diuraikan oleh fungsi tema anak sayaid='avia-style-css'adalah stylesheet tema anak saya, seperti yang diuraikan oleh fungsi tema indukid='dm-child-style-css'adalah stylesheet tema anak saya, seperti yang diutarakan oleh fungsi tema anak saya
Hasil:
Pada pandangan pertama, semuanya baik-baik saja, dengan <head> menunjukkan urutan berikut:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Setelah menginstal plugin, urutan enqueue sekarang berubah sebagai berikut:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->Pada akhirnya, saya perlu css tema anak saya untuk memuat setelah plugin apa pun, jadi saya terpaksa menambahkan nomor prioritas ke fungsi dalam tema anak saya (lihat diskusi sebelumnya mengenai nomor prioritas) .
Namun, karena fungsi saya hanya menggambarkan css tema orang tua, hasilnya adalah sekarang css tema orangtua dipindahkan ke akhir, meninggalkan css tema anak saya dalam keadaan yang lebih buruk daripada sebelumnya.
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />Sekarang saya terpaksa menggunakan enqueueing theme style anak saya juga, untuk memastikan itu dipindahkan kembali ke garis depan, menyebabkan masalah duaqueueing (istilah baru? Lol) child theme css.
Pengaturan yang Sudah Habis:
Fungsi yang direvisi dalam tema anak:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Hasil:
Memproduksi pesanan berikut di <head>:
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Meskipun menyertakan stylesheet anak dalam fungsi saya menyebabkannya enqueued dua kali, IMHO yang lebih disukai daripada pengkodean dengan asumsi bahwa tema induk akan dengan benar memberikan enseue stylesheet anak kami untuk kami. Berdasarkan ID yang ditugaskan untuk setiap gaya enqueued, tampak bahwa tema induk enqueues itu, bukan apa pun di WP Core.
Shivm saya:
Meskipun saya tidak akan menyarankan ini menjadi cara yang disarankan (dan saya yakin devs dengan lebih banyak pengalaman pengkodean daripada saya akan mengeluh pada solusi ini), saya mengeluarkan ID tema orang tua (digunakan untuk enqueue gaya tema anak saya) tepat di atas enqueue saya sendiri dalam file fungsi tema anak saya seperti yang ditunjukkan:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_dequeue_style( 'avia-style' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Hasil:
Ini menyelesaikan masalah yang dihadapi, menghasilkan:
<!-- Multiple individual parent theme styles here -->
<!-- Plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Tentu saja, ini diperlukan untuk mengetahui ID yang digunakan oleh tema induk - sesuatu yang lebih generik diperlukan untuk digunakan sebagai metodologi pengembangan tema anak standar.
MASALAH 2: Lembar gaya anak yang direlokasi
(Tampaknya sulit untuk percaya ini belum muncul di utas lain, meskipun saya tidak melihat yang spesifik ketika melihat ... jika saya melewatkannya, jangan ragu untuk membawanya ke perhatian saya.)
Saya tidak pernah menggunakan default style.cssdi direktori root tema anak untuk gaya tema saya - itu jelas harus ada di sana, tetapi semua gaya aktual saya dikompilasi dari SCSS sebagai file .css yang diperkecil dalam direktori / css /. Meskipun saya menyadari ini bukan "norma yang diharapkan" pada tingkat universal untuk pengembangan tema anak, pengembang WordPress paling serius yang saya tahu melakukan sesuatu yang serupa. Ini, tentu saja, memerlukan enqueue secara manual bahwa stylesheet dalam fungsi saya terlepas dari apakah tema induk enqueued atau tidak.
Singkatnya semuanya ...
- Apakah aman untuk memasukkan asumsi bahwa tema induk dengan benar mengubah gaya tema anak, dari sudut pandang standar tema anak?
- Menghapus prioritas berpotensi membuat lebih banyak kebingungan untuk bagian dari komunitas WordPress, ketika gaya tema anak mulai ditimpa oleh plugin. Kami berharap tema untuk menimpa gaya, tetapi tidak terlalu banyak dengan plugin.
- Saat menggunakan lembar gaya khusus untuk gaya tema anak yang sebenarnya (seperti yang seharusnya menempatkannya di yang telah ditentukan
style.css), enqueue secara manual file itu menjadi perlu. Dalam hal mempertahankan kontinuitas di berbagai spektrum pengembang, tidakkah masuk akal untuk mendorong secara manual membagikan lembar gaya anak terlepas dari kemungkinan duplikat?