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?
sumber
Jawaban:
PERTANYAAN 1
Aturan umum, ya. Tapi , Anda tidak boleh berasumsi . Sebagian besar bencana dan kegagalan dalam hidup disebabkan oleh asumsi atau fakta berdasarkan asumsi
FAKTA TANPA ASUMSI
Function.php tema anak dimuat pertama kali, lalu functions.php induknya. Ini memastikan bahwa stylesheet utama tema orangtua dimuat sebelum stylesheet utama tema anak dari kode yang diperbarui dalam codex
Mari kita lihat tema yang dibundel, dua puluh dua belas. Keajaiban terjadi di sini
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );. Ini adalah bagaimana stylesheet utama di enqueued. Ketika tema aktif sebagai tema induk, style.css akan dimuat dari tema induk seperti yangget_stylesheet_uri()akan diarahkan ke style.css direktori induk.Ketika Anda beralih ke tema anak,
get_stylesheet_uri()"mengubah" jalurnya untuk menunjuk ke style.css tema anak, yang berarti sekarang bahwa alih-alihwp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );memuat style orangtua.css, sekarang memuat anak style.cssSemua gaya lain dari tema induk dimuat seperti biasa sesuai urutan yang mereka tulis
POTHOL
Gaya dan lembar gaya sebaris yang ditambahkan langsung ke templat tajuk Anda. Saya telah melakukan beberapa pengujian pada masalah ini. Jika stylesheet induk tidak enqueued menggunakan
wp_enqueue_scriptsdan langsung dimuat di header, maka stylesheet utama tema anak dimuat pertama. Sebagai solusi di sini, saya sebelumnya merekomendasikan untuk menyalin header.php dari orangtua ke tema anak dan menghapus panggilan-panggilan itu. Anda kemudian harus enqueueu gaya tema induk dan anak dan semua stylesheet lainnya yang langsung dimuat di header.php seperti yang dijelaskan dalam fungsi terdepresiasi OPSaya telah menemukan ini sekali atau dua kali di mana gaya (dan skrip) langsung dimuat di header, dan karena itu panggilan untuk
wp_headdihilangkan. Ini akan membuat Anda gagal bertindak diam-diam, sehingga gaya Anda tidak akan muncul.Prioritas salah ditetapkan. Tidak perlu menetapkan prioritas adalah tindakan orang tua dan anak saat Anda mengaitkan fungsi enqueueu Anda. Ketika keduanya memiliki prioritas default yang sama, aturan first come, first served berlaku. Ini akan memastikan bahwa urutan pemuatan benar
CATATAN UNTUK PENULIS TEMA ORANG TUA
Metode diterima yang tepat untuk menambahkan gaya dan skrip ke tema adalah melalui
wp_enqueue_scriptskait tindakan. Jangan pernah menambahkan gaya dan skrip langsung di templat tajuk, dan jangan menetapkan prioritas apa pun dalam tindakan Anda saat mengaitkan fungsi AndaSelalu juga memuat stylesheet utama sebagai berikut:
Ini akan memastikan bahwa stylesheet utama anak dimuat ketika tema anak sedang digunakan
TANGGUNG JAWAB ANDA SEBAGAI PENULIS TEMA ANAK
Luangkan waktu Anda dan bekerja melalui tema orang tua. Ketahui tema orang tua Anda, pastikan Anda merasa nyaman dengan struktur tema dan bagaimana fungsi dan kaitan digunakan dalam tema tersebut. Anda tidak dapat membuat tema anak yang sukses jika Anda tidak memiliki pengetahuan orang dalam tentang bagaimana tema induk berfungsi. Adalah tanggung jawab Anda untuk memastikan bahwa gaya dan skrip dimuat dengan benar agar kode Anda berfungsi seperti yang diharapkan.
Selalu buat pembuat tema orang tua mengingatkan kode apa pun yang tidak Anda sukai. Misalnya, jika penulis menambahkan gayanya langsung ke tajuk, buat dia waspada dan buat dia sadar bahwa ini adalah cara yang salah untuk melakukannya, dan minta dia untuk memperbaikinya di rilis mendatang
PERTANYAAN 2
Sayangnya tidak ada metode langsung untuk safegaurd terhadap ini. Intinya di sini adalah, gaya plugin tidak boleh menimpa gaya tema default tanpa persetujuan pengguna akhir. Menurut pendapat saya, ini hanya praktik buruk atau neglet dari pembuat plugin. Saya menyarankan agar dalam kasus seperti ini, hubungi pembuat plugin dan buat dia waspada tentang ini
Anda juga selalu memiliki opsi untuk mengeluarkan dan membatalkan registrasi gaya (dan skrip) yang tidak Anda butuhkan, atau yang perlu Anda ubah prioritasnya dan meminta kembali dan mendaftar ulang mereka seperti pada kode Anda di atas (yang benar-benar bagus). Hanya sebuah catatan pada Anda shivm , itu adalah praktek terbaik untuk dequeue dan deregister gaya dan script.
PERTANYAAN 3
Saya tidak berpikir ada jawaban langsung hitam dan putih untuk masalah ini. Saya akan menjawab dengan mengatakan, lakukan apa yang Anda nyaman selama itu dalam pedoman tertentu yang mengatur tindakan.
Lembar gaya tidak ada untuk menambah fungsionalitas, tetapi ada untuk menambah pengalaman visual kepada pengguna. Gaya juga langsung dikirim apa adanya ke browser yang sedang diproses. Wordpress tidak berperan di sini.
Berdasarkan fakta ini, saya benar-benar tidak melihat bendera merah yang mengancam dalam memuat stylesheet dua kali. Ini mungkin memerlukan biaya beberapa milidetik. Sejujurnya, terlepas dari ini, saya tidak begitu yakin bagaimana duplikat ditangani di browser yang berbeda. Ini adalah sesuatu yang Anda sebagai pembaca dapat pergi dan menguji
IMHO, duplikat tidak pernah baik dan harus selalu dihindari. Saya akan menyarankan bahwa jika Anda benar-benar ingin memberikan secara manual lembar gaya utama anak untuk alasan apa pun, Anda harus menggunakan kode Anda dalam shivm Anda . Dequeue dan deregister duplikat ditambahkan secara default dan kemudian membagikan lembar gaya seperti biasa.
Hanya satu hal yang perlu diingat juga, fungsi enqueue dan register memiliki
$dependancyparameter yang juga dapat Anda manfaatkan. Jadi mudah untuk memuat stylesheet sekunder dan membuatnya bergantung pada stylesheet utama tema anak AndaKESIMPULANNYA
Sejak pembaruan codex baru-baru ini, umpan baliknya luar biasa dan saya ingin mengucapkan terima kasih kepada semua orang atas ini. Saya ingin mendorong semua orang untuk berpartisipasi dalam semua jenis umpan balik untuk pertanyaan ini khususnya. Jika Anda memiliki sesuatu untuk ditambahkan atau dikomentari, silakan lakukan.
sumber