Bu yazı, bu iş parçacığı ve bu iş parçacığında ortaya çıkan stil sayfası sıralama yöntemleri ile ilgili son değişikliklerle ilgili karşılaştığım birkaç soruyu gündeme getiriyor .
Karşılaştığım sorunlar, WP 4.0 yüklemesinde özellikle çocuk temasına hazır olan yaygın olarak kullanılan ve bakımlı bir ana tema kullanarak genel bir kullanım senaryosu senaryosunda ortaya çıktı. Alt temamın function.php dosyası yalnızca Codex'ta ayrıntılıwp_enqueue_style olarak açıklanan işlevi içerir .
Aşağıda belirtilen kodun bu temaya özel olmasına rağmen, çoğunun üst temalar tarafından kullanılan geçerli kodlama kurallarını kullandığını lütfen unutmayın. Ayrıca, endişe duyduğum alanlar şu anda vahşi doğada bulunan çok sayıda ana tema üzerinde çoğaltılabilir. Ayrıca, bu ana sorular hangi ana temanın kullanıldığına bakılmaksızın evrensel düzeyde uygulanabilir.
KONU 1: İki sıralı
Önerilen Kurulum:
Ana tema, kancaları kullanarak stilleri ve komut dosyalarını sıralamaktır wp_enqueue_scripts, ilgili bölüm aşağıdaki gibidir:
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'); }
}Çocuğum teması functions.phpson kodeksi değişiklikleri başına stilleri enqueues:
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' );
}Başvurulan kod tarafından kullanılan aşağıdaki kimliklere dikkat edin:
id='dm-parent-style-css'alt temamın stili, alt öğe tema işlevim tarafından sıralandığı şekliyleid='avia-style-css'ana tema işlevinde olduğu gibi alt temamın stil sayfasıid='dm-child-style-css'çocuğumun tema işlevi tarafından sıralandığı şekliyle alt temamın stil sayfasıdır
Sonuçlar:
İlk bakışta, her şey iyiydi, <head> şu sırayı gösteriyor:
<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' />Bir eklenti yükledikten sonra, enqueue sırası şu şekilde değişti:
<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 -->Nihayetinde, herhangi bir eklenti sonra yüklemek için benim çocuk tema css gerekir, bu yüzden benim çocuk tema fonksiyonuna bir öncelik numarası eklemek zorunda kaldı (öncelik numarası ile ilgili önceki tartışma bakınız) .
Ancak işlevim yalnızca ana temanın css'sini enqueque ettiğinden, sonuç artık ana tema css sonuna taşındı ve alt temamın css'sini öncekinden daha da kötü bir tahminde bıraktı.
<!-- 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' />Şimdi, çocuk teması stilini enqueueing'e başvurmak zorundayım, çizginin ön kısmına geri taşınmasını sağlamak için, iki tema (yeni terim? Lol) alt tema css sorununa neden oluyor .
Onaylanmayan Kurulum:
Çocuk temasında gözden geçirilmiş işlev:
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' );
}Sonuçlar:
Aşağıdaki siparişin üretilmesi <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' />Alt stil sayfasını işlevime dahil etmek iki kez enqueque olmasına rağmen , ana temanın çocuk stil sayfamızı bizim için doğru şekilde sıralayacağı varsayımı altında kodlamaya göre tercih edilen IMHO . Kimliği her bir stile atanan kimliğe bağlı olarak, ana temanın WP Çekirdeğindeki hiçbir şeyi değil, onu enquequeladığı görülüyor.
Shivm'im:
Bunun tavsiye edilen araçlar olmasını pek tavsiye etmememe rağmen (ve eminim ki bu çözümde kendimden daha fazla kodlama deneyimine sahip geliştiriciler), kendi temsimin hemen üstünde ana temanın kimliğini (çocuk temamın stilini enqueue etmek için kullanılır) kandırdım gösterildiği gibi alt temamın işlevler dosyasında:
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' );
}Sonuçlar:
Bu, eldeki sorunları çözdü ve sonuç olarak:
<!-- 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' />Tabii ki, bu ana tema tarafından kullanılan kimliği bilmeyi gerektiriyordu - standart alt tema geliştirme metodolojisi olarak daha genel bir şeye ihtiyaç duyulacaktı.
SORUN 2: Taşınan alt stil sayfaları
(Bunun başka bir iş parçacığında ortaya çıkmadığına inanmak zor görünüyor, ancak bakarken belirli bir tane görmedim ... kaçırdıysam, dikkatimi çekmekten çekinmeyin.)
Ben asla varsayılan kullanmak style.cssbelli ki orada olmak zorunda, ama bütün gerçek stilleri a / css / dizininde bir .css minified dosya olarak SCSS derlenmektedir - benim tema stilleri için çocuk tema kök dizininde. Bunun, çocuk teması gelişimi için evrensel düzeyde "beklenen norm" olmadığını fark etsem de , bildiğim en ciddi WordPress geliştiricileri benzer bir şey yapıyor. Bu, elbette, ana temanın enqueque olup olmadığına bakılmaksızın , bu stil sayfasını işlevimde el ile sıkmayı gerektirir .
Hepsini özetlemek gerekirse ...
- Ana temaların alt tema stilleri açısından alt tema temasını gerektiği gibi içermesi varsayımı güvenli midir?
- Önceliği kaldırmak, alt tema stilleri bir eklenti tarafından üzerine yazılmaya başladığında WordPress topluluğunun bir kısmı için daha fazla karışıklık yaratabilir. Temaların stillerin üzerine yazmasını bekliyoruz, ancak eklentilerle çok fazla değil.
- Gerçek alt tema stilleri için özel bir stil sayfası kullanırken (bunları önceden tanımlanmış olması gerektiği gibi
style.css), bu dosyayı manuel olarak sıralamak gerekli hale gelir. Geniş bir geliştirici yelpazesinde sürekliliği sağlamak açısından, olası yinelemeden bağımsız olarak alt stil sayfasını manuel olarak sıralamayı teşvik etmek mantıklı olmaz mı?