Ana temanın style.css'ın içe aktarılması

bağlam

Oldukça iyi çalışan Yirmi Onüçü temel alan bir çocuk teması kurdum. Ana temayı 1.3 sürümüne güncelledikten sonra, önbelleğe alınmış ana temanın neden olduğu stil ile garip davranışlar gördüm style.css.

İşte çocuğumun temasının içeriği style.css(başlıkları atlayarak)

/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../twentythirteen/style.css');

Yani, çocuk teması style.css, ana temayı ithal etmekten başka bir şey yapmaz style.css.

Ayrıca, çocuğumun temalarını özelleştirdiğim ve bunlardan daha fazla istediğim başka bir css dosyası daha var 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);

Bu bana çok güzel bir css URL'si veriyor: domain.com/wp-content/themes/toutprettoutbon/css/main.css?ver=1.0.1çocuk teması güncellendiğinde stil sayfasının yeniden yüklenmesini sağlıyor.

Şimdi sorun

Bu ifade @import url('../twentythirteen/style.css');, alttaki ana temanın sürümünden tamamen bağımsızdır. Aslında, üst tema, alt tema güncellenmeden güncellenebilir, ancak tarayıcılar eski önbelleğe alınmış sürümlerini kullanmaya devam eder ../twentythirteen/style.css.

Yirmi Onüç'deki ilgili kod 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' );

Bu sorunu çözmek için birkaç yol düşünebilirim ama hiçbiri gerçekten tatmin edici değil:

1. Alt tema, style.css(örneğin @import url('../twentythirteen/style.css?ver=NEW_VERSION');) içindeki bir sürüm dizesini değiştirmek üzere her güncellendiğinde alt temalarımı güncelle . Bu, ana tema sürümü ve çocuk arasında gereksiz ve can sıkıcı bir bağlantı oluşturur.

2. Çocuğumun yıllarda functions.php, 1) wp_dequeue_styledahil çocuk teması en style.cssve 2) ana tema sürüm dizesinin İLE doğrudan. Bu, ana temada kuyruğa alınmış css sırasını bozar.wp_enqueue_stylestyle.css

3. style_loader_tagOluşturulan css <link>etiketini style.cssdeğiştirmek ve doğrudan üst temanın style.cssWITH sürüm dizesiyle işaret etmek için yolu değiştirmek için filtreyi kullanın . Böyle yaygın bir ihtiyaç için oldukça belirsiz görünüyor (önbellek bozma).

4. Ana temayı style.cssçocuğumun temasına at style.css. (1) ile gerçekten aynı, ancak biraz daha hızlı.

5. Çocuğumu style.cssana temanın ana temasının bir parçası haline getir style.css. Bu oldukça garip görünüyor ...

Bir şey mi kaçırdım? Baska öneri?

Düzenle

Eklenen genericicons.cssve ie.cssben değiştiremem neden ana tema stil sayfaları netleştirmek için @importiçin css deyimi wp_enqueue_styleÇocuğum tema. Şu anda, @importçocuğumun temasındaki bir ifadeyle style.css, oluşturulan sayfalarda şu sırayı aldım:

1. yirmi onüç / genericons / genericons.css -> ana tema tarafından çoğaltılmıştır
2. child-theme / style.css -> ebeveyn teması tarafından sıkıştırılmış, @ yirmi on üç / style.css içeriyor
3. yirmi on üç / css / ie.css -> ana tema tarafından çoğaltılmıştır
4. child-teması / css / main.css -> alt tema tarafından çoğaltılmıştır

Ebeveynin style.cssbağımlılığını zorlarsam main.css, bu olur:

1. yirmi onüç / genericons / genericons.css -> ana tema tarafından çoğaltılmıştır
2. child-theme / style.css -> boş, üst tema tarafından çoğaltılmıştır
3. yirmi on üç / css / ie.css -> ana tema tarafından çoğaltılmıştır
4. yirmi onüç / style.css -> çocuk teması tarafından main.css bağımlılığı olarak eklendi
5. child-teması / css / main.css -> alt tema tarafından çoğaltılmıştır

İe.css'nin şimdi ana temanın önüne eklendiğine dikkat edin style.css. Ana temanın css dosyalarının düzenleme sırasını değiştirmek istemiyorum çünkü bunun css kurallarının önceliği ile sorunlara neden olmayacağını düşünemiyorum.

@Port kullanmanız gerekmez. En iyisi aslında değil. Sıkıştırılmış bir yaklaşım kullanmak muhtemelen her yerde daha iyidir.

İşte yirmi üçüncü kişinin kodunun ilgili kısmı:

function twentythirteen_scripts_styles() {
...
    // Loads our main stylesheet.
    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
...
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );

İşte kodunuzda yaptığınız şey:

function child_scripts_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Eğer main.css ebeveyninizin style.css'inden sonra gelmek zorundaysa, o zaman buna bağlı olursunuz.

Şimdi, çocuğunuzda bir Bcs varsa, o zaman bağımlılıkları buna göre ayarlayın:

function child_scripts_styles() {
    wp_enqueue_style( 'child-B-style', get_stylesheet_directory_uri().'/B.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('child-B-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Her bir madde için tanımladığınız bağımlılıkları, aslında bu bağımlılıkların gerçekte ne olduklarını yansıtıcı yapın. Main.css, B.css'den sonra gelmek zorundaysa, o zaman buna bağlıdır. B.css ebeveynin style.css'inden sonra gelmelidir, o zaman B buna bağlıdır. Enqueue sistemi sizin için halledecektir.

Ve eğer aslında style.css'yi bir şey için kullanmıyorsanız, onu sıkmak zorunda değilsiniz . Temanızın başlık bilgisini tutmak yalnızca bir yer tutucu olabilir. Kullanmıyor musun? Yüklemeyin.

Ayrıca, burada tam olarak ne sipariş ediyorsun? CSS çoğu durumda yük sırasını önemsemez. CSS, seçicilerin özgünlüğüne daha fazla bağlıdır. Bir şeyi geçersiz kılmak istiyorsanız, seçicinizi daha belirgin hale getirirsiniz. İlk veya sonuncu olabilir veya aradaki herhangi bir şey, daha belirgin olan seçici her zaman kazanır.

Düzenle

Yorumlarınızı okuduktan ve koda daha yakından baktığımda, hatanın nerede olduğunu görüyorum. Yirmi on üç kod, bir alt tema durumunda, ana temanın dosyasında değil, çocuğunuzun stilinin style.css dosyasında olacak olan "get_stylesheet_uri ()" yi içerir. Bu nedenle @port çalışır ve aynı sıralamayı korur (yine, düşündüğünüz kadar önemli değil).

Bu durumda, içe aktarma kullanmak istemiyorsanız, ebeveynin style.css kodunu doğrudan eklemenizi öneririm. Gibi:

function child_scripts_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css', array() );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Önce çocuk temasının işlevleri.php kodunu çalıştırır, böylece kendi wp_enqueue_scripts ilk önce çalışır ve bu, ana temanın kendisinin yapmadığı ana temanın stilini. Bunu, ana ile aynı olan herhangi bir şeye bağlı kılmaksızın, doğru şekilde çıkışa alır. Bu dosyanın ve genericons.css'in sırasının önemli olmadığını unutmayın, çünkü orijinal "yirmi on üç stil", listelenen bir bağımlılık olarak genericons.cs'lere sahip değildir.

Çocuğunuzun style.css dosyası yüklenecek ve dürüst olmak gerekirse, değişikliklerinizi ayrı bir main.css içine değil, çocuk teması için yapmanız gereken yer burasıdır. Değişikliklerinizi oraya koymayı engelleyen hiçbir şey yoktur, ancak fazladan bir css dosyası oluşturmak için gerçek bir neden yoktur.

Benim daha önceki cevabı aşırı ebeveyn temanın bağımlılık zincirini (diğer yanıtında bkz not) saygı duymayan potansiyel karmaşık ve kapanır.

İşte çok daha iyi çalışması gereken çok daha basit bir yaklaşım:

function use_parent_theme_stylesheet() {
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}

function my_theme_styles() {
    $themeVersion = wp_get_theme()->get('Version');

    // Enqueue our style.css with our own version
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
        array(), $themeVersion);
}

// Filter get_stylesheet_uri() to return the parent theme's stylesheet 
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');

// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

Buradaki fikir, get_stylesheet_uri()alt temanın yerine kendi stil sayfasını döndürmek için çağrıyı ana temada filtrelemek . Alt tema stil sayfası daha sonra eylem kancasına yerleştirilir my_theme_styles.

uyarı

Bu çözüm ana temanın bağımlılıklarına saygı göstermiyor ! Ana temanın tanıtıcı adının değiştirilmesi, ana temada ayarlanan bağımlılık zincirini etkiler. Daha basit olan diğer cevabımı görün .

oryanal cevap

Otto'nun cevabı oldukça iyi olmasına rağmen, çocuğumun işlevlerinde bununla bitirdim.php

function my_theme_styles() {
    global $wp_styles;
    $parentOriginalHandle = 'twentythirteen-style';
    $parentNewHandle = 'parent-style';

    // Deregister our style.css which was enqueued by the parent theme; we want
    // to control the versioning ourself.
    $parentStyleVersion = $wp_styles->registered[$parentOriginalHandle]->ver;
    $parentDeps = $wp_styles->registered[$parentOriginalHandle]->deps;
    wp_deregister_style($parentOriginalHandle);

    // Enqueue the parent theme's style.css with whatever version it used instead
    // of @import-ing it in the child theme's style.css
    wp_register_style($parentNewHandle, get_template_directory_uri() . '/style.css',
        $parentDeps, $parentStyleVersion);

    // Enqueue our style.css with our own version
    $themeVersion = wp_get_theme()->get('Version');
    wp_enqueue_style($parentOriginalHandle, get_stylesheet_directory_uri() . '/style.css',
        [$parentNewHandle], $themeVersion);
}

// Run this action action the parent theme has enqueued its styles.
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

Alt temanın style.csssürümünü kontrol ederken ana temanın sıralamasını ve sürüm numaralarını korur style.css.