Konteks
Saya membangun tema anak berdasarkan Twenty Thirteen yang bekerja dengan cukup baik. Setelah memperbarui tema induk ke versi 1.3, saya melihat perilaku aneh dengan gaya yang disebabkan oleh tema induk dalam cache style.css
.
Berikut adalah isi dari tema anak saya style.css
(menghilangkan header)
/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../twentythirteen/style.css');
Jadi tema anak style.css
tidak lebih dari mengimpor tema orang tua style.css
.
Saya juga memiliki file css lain dengan kustomisasi tema anak saya yang saya enqueue seperti di functions.php
:
// Enqueue parent theme's style.css (faster than using @import in our style.css)
$themeVersion = wp_get_theme()->get('Version');
// Enqueue child theme customizations
wp_enqueue_style('child_main', get_stylesheet_directory_uri() . '/css/main.css',
null, $themeVersion);
Ini memberi saya url css yang sangat bagus seperti ini: domain.com/wp-content/themes/toutprettoutbon/css/main.css?ver=1.0.1
yang memastikan style sheet dimuat ulang ketika tema anak diperbarui.
Sekarang masalahnya
Pernyataan @import url('../twentythirteen/style.css');
ini sepenuhnya independen dari versi tema induk yang mendasari. Bahkan, tema induk dapat diperbarui tanpa memperbarui tema anak tetapi browser masih akan menggunakan versi cache yang lama ../twentythirteen/style.css
.
Kode yang relevan di Twenty Thirteen yang memberikan style.css
:
function twentythirteen_scripts_styles() {
// ...
// Add Genericons font, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.03' );
// Loads our main stylesheet.
wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
// Note usage of get_stylesheet_uri() which actually enqueues child-theme/style.css
// Loads the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' );
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );
Saya dapat memikirkan beberapa cara untuk mengatasi masalah ini tetapi tidak ada yang benar-benar memuaskan:
Perbarui tema anak saya setiap kali tema induk diperbarui untuk mengubah string versi di
style.css
(misalnya@import url('../twentythirteen/style.css?ver=NEW_VERSION');
). Ini menciptakan tautan yang tidak perlu dan mengganggu antara versi tema induk dan anak.Pada anak saya
functions.php
, 1)wp_dequeue_style
tema termasuk anakstyle.css
dan 2)wp_enqueue_style
yang orangtua tema inistyle.css
langsung DENGAN string versi. Ini mengacaukan urutan css yang antri dalam tema induk.Gunakan
style_loader_tag
filter untuk memodifikasi<link>
tag css yang dihasilkan untukstyle.css
dan memodifikasi jalur untuk menunjuk langsung ke tema indukstyle.css
DENGAN string versi. Tampaknya agak tidak jelas untuk kebutuhan yang sama (penghilang cache).Buang tema orang tua di tema
style.css
anak sayastyle.css
. Sama seperti (1) sungguh, tetapi sedikit lebih cepat.Jadikan tema anak saya
style.css
menjadi symlink ke tema orang tuastyle.css
. Ini sepertinya cukup retas ...
Apakah saya melewatkan sesuatu? Ada saran?
sunting
Menambahkan genericicons.css
dan ie.css
style sheet dalam tema induk untuk menjelaskan mengapa saya tidak dapat mengubah @import
pernyataan css wp_enqueue_style
di dalam tema anak saya. Saat ini, dengan @import
pernyataan di tema anak saya style.css
, saya memiliki urutan ini di halaman yang dihasilkan:
- twentythirteen / genericons / genericons.css -> enqueued oleh theme induk
- child-theme / style.css -> enqueued oleh theme parent, @import twentythirteen / style.css
- dua puluh tiga belas / css / ie.css -> enqueued oleh tema induk
- child-theme / css / main.css -> enqueued oleh child theme
Jika saya menyatakan bahwa orang tua style.css
sebagai ketergantungan main.css
, ini akan menjadi:
- twentythirteen / genericons / genericons.css -> enqueued oleh theme induk
- child-theme / style.css -> kosong, enqueued oleh theme induk
- dua puluh tiga belas / css / ie.css -> enqueued oleh tema induk
- dua puluh tiga belas / style.css -> enqueued oleh tema anak sebagai ketergantungan dari main.css
- child-theme / css / main.css -> enqueued oleh child theme
Perhatikan bahwa ie.css sekarang disertakan sebelum tema induk style.css
. Saya tidak ingin mengubah urutan enqueuing file css tema orang tua karena saya tidak dapat menganggap bahwa ini tidak akan menyebabkan masalah dengan prioritas aturan css.
sumber
@import
, tetapkan stylesheet tema orangtua sebagai ketergantungan dari stylesheet Anda sendiri .style.css
tidak akan disertakan di tempat yang sama seperti sekarang. Induk menyertakan file css lain yang harus ada di antarastyle.css
css temanya dan anak saya.Jawaban:
Anda tidak harus menggunakan @import. Sebaiknya tidak. Menggunakan pendekatan enqueued mungkin lebih baik di sekitar.
Inilah bagian yang relevan dari kode dua puluh tiga:
Inilah yang Anda lakukan dalam kode Anda:
Jika main.css Anda harus mengikuti style.css induk, maka Anda hanya membuatnya bergantung pada itu.
Sekarang, jika Anda juga memiliki B.css pada anak, maka Anda mengatur dependensi sesuai:
Buat dependensi yang Anda tetapkan untuk setiap item sebenarnya mencerminkan apa sebenarnya dependensi itu. Jika main.css harus datang setelah B.css, maka itu tergantung padanya. Jika B.css harus berasal dari style.css induk, maka B tergantung pada itu. Sistem enqueue akan mengatasinya untuk Anda.
Dan jika Anda tidak benar-benar menggunakan style anak .css untuk apa pun, maka Anda tidak perlu mengubahnya sama sekali . Ini bisa menjadi pengganti untuk menyimpan informasi tajuk tema Anda. Tidak menggunakannya? Jangan memuatnya.
Juga, apa sebenarnya yang Anda lakukan sehingga sangat bergantung pada pemesanan di sini? CSS tidak peduli tentang urutan pemuatan di sebagian besar situasi. CSS lebih tergantung pada spesifisitas pemilih. Jika Anda ingin menimpa sesuatu, Anda membuat pemilih Anda untuk itu lebih spesifik. Itu bisa didahulukan, atau terakhir, atau apa pun di antaranya, pemilih yang lebih spesifik selalu menang.
Edit
Membaca komentar Anda dan melihat kodenya lebih dekat, saya melihat di mana kesalahannya. Kode dua puluh tiga belas adalah enqueueing "get_stylesheet_uri ()", yang dalam kasus tema anak, akan menjadi file style.css tema anak Anda, bukan file orangtua. Itulah sebabnya @import berfungsi, dan tetap memesan yang sama (yang lagi-lagi, tidak masalah sebanyak yang Anda pikirkan).
Dalam hal itu, jika Anda tidak ingin menggunakan impor, saya akan merekomendasikan enqueue style.css induk secara langsung. Seperti itu:
Kode di function.php tema anak berjalan terlebih dahulu, jadi wp_enqueue_scripts Anda sendiri akan berjalan terlebih dahulu, dan ini akan memunculkan style.css tema orangtua, yang tidak dilakukan sendiri oleh tema induknya (karena itu sebenarnya enqueueing style.css anak Anda). Dengan tidak membuatnya bergantung pada apa pun, sama seperti induknya, maka itu hanya akan dimasukkan ke dalam output dengan benar. Perhatikan bahwa urutan file ini dan genericons.css tidak masalah, karena asli "gaya dua puluh tiga belas" tidak memiliki genericons.css sebagai ketergantungan terdaftar.
Style.css anak Anda sendiri akan dimuat, dan jujur, di sinilah Anda harus meletakkan perubahan Anda untuk tema anak, bukan ke main.css terpisah. Tidak ada yang mencegah Anda menempatkan perubahan di sana, tetapi tidak ada alasan nyata untuk memiliki file css tambahan.
sumber
@import
ini bukan cara terbaik untuk pergi. Silakan lihat bagian "edit" saya untuk informasi yang lebih tepat. Saya tidak memiliki kebutuhan khusus mengenai pemesanan css. Saya hanya tidak ingin memodifikasi urutan internal file css tema induk yang dapat menyebabkan masalah dengan prioritas aturan css.Jawaban saya sebelumnya terlalu rumit dan berpotensi tidak menghargai rantai ketergantungan tema orang tua (lihat catatan di jawaban lain).
Berikut ini cara lain yang lebih sederhana yang seharusnya bekerja lebih baik:
Idenya adalah dengan hanya memfilter panggilan ke
get_stylesheet_uri()
dalam tema induk untuk mengembalikan stylesheet itu sendiri alih-alih tema anak. Stylesheet tema anak kemudian enqueued kemudian di hook tindakanmy_theme_styles
.sumber
@import
versi lama , tidak ada dampak pada kinerja sama sekali, akan ada dua permintaan style.css terpisah ke server 2) Jawaban ini menjatuhkan seluruh ketergantungan semuanya bersama-sama ... 3) Anda dapat memeriksa apaget_template_directory_uri
danget_template_stylesheet_uri
lakukan di sini: core.trac.wordpress.org/browser/tags/4.8/src/wp-includes/... Sekali lagi, tidak perlu untuk sebagian besar kode itu.wp_enqueue_style
secara otomatis menambahkan string kueri penghilang cache ke url yang dihasilkannya (misalnya?ver=2013-07-18
) berdasarkan versi tema. Ini tidak dilakukan dengan@import
pernyataan.peringatan
Solusi ini tidak menghargai ketergantungan tema orang tua ! Mengubah nama pegangan tema induk memengaruhi rantai ketergantungan yang ditetapkan dalam tema induk. Lihat jawaban saya yang jauh lebih sederhana .
jawaban orignal
Meskipun jawaban Otto cukup bagus, saya berakhir dengan ini di functions.php tema anak saya
Ini mempertahankan
style.css
urutan dan nomor versi tema orang tua sambil mengontrol versi tema anakstyle.css
.sumber
[$parentNewHandle]
kearray($parentNewHandle)
@import
metode lama juga berfungsi, harap bandingkan kedua metode ini. Adapun ketergantungan tema anak pada tema orang tua, tidak perlu untuk itu juga. Anakstyle.css
selalu dimuat setelah orangtua, setidaknya dari tes saya. Cinta terbukti salah.