親テーマのstyle.cssの@importのバージョン管理

コンテキスト

Twenty Thirteenに基づいた子テーマを作成しましたが、これは非常にうまく機能します。親テーマをバージョン1.3に更新した後、キャッシュされた親テーマのによって引き起こされたスタイリングの奇妙な動作に気付きましたstyle.css。

子テーマのコンテンツは次のとおりですstyle.css（ヘッダーを省略）

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

そのため、子テーマのstyle.cssは、親テーマのをインポートするだけstyle.cssです。

子テーマのカスタマイズを含む別のcssファイルもあります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);

これにより、次のような非常に優れたcss URLが得られますdomain.com/wp-content/themes/toutprettoutbon/css/main.css?ver=1.0.1。子テーマが更新されたときにスタイルシートが確実に再読み込みされます。

今、問題

ステートメント@import url('../twentythirteen/style.css');は、基礎となる親テーマのバージョンから完全に独立しています。実際、子テーマを更新せずに親テーマを更新できますが、ブラウザは古いバージョンのキャッシュバージョンを引き続き使用します../twentythirteen/style.css。

以下をキューに入れるTwenty Thirteenの関連コード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' );

この問題を解決する方法はいくつか考えられますが、実際に満足できるものはありません。

1. 親テーマが更新されるたびに子テーマを更新して、バージョン文字列を変更しますstyle.css（例：）@import url('../twentythirteen/style.css?ver=NEW_VERSION');。これにより、親テーマのバージョンと子の間に不要で迷惑なリンクが作成されます。

2. 私の子供のではfunctions.php、1）wp_dequeue_style付属の子テーマのstyle.cssと2）親テーマだバージョン文字列を直接。これにより、親テーマのキューに入れられたcssの順序が乱れます。wp_enqueue_stylestyle.css

3. style_loader_tagフィルタを使用して、生成されたcss <link>タグをstyle.css変更し、パスを変更して、親文字style.css列のWITH文字列を直接指すようにします。このような一般的なニーズ（キャッシュの無効化）については、かなりわかりにくいようです。

4. 親テーマをstyle.css子テーマにダンプしstyle.cssます。（1）と同じですが、少し高速です。

5. 子テーマをstyle.css親テーマのシンボリックリンクにしstyle.cssます。これはかなりハックらしい...

私は何かを見逃しましたか？助言がありますか？

編集する

追加されましたgenericicons.cssし、ie.css私は変更することはできませんなぜ親テーマでのスタイルシートは、明確にする@importためにCSS文をwp_enqueue_style自分の子のテーマで。現在、@import私の子テーマのステートメントで、style.css生成されたページにこの順序があります：

1. twentythirteen / genericons / genericons.css->親テーマによってキューに入れられました
2. child-theme / style.css->親テーマ、@ imports twentythirteen / style.cssによってキューに入れられました
3. twentythirteen / css / ie.css->親テーマによってキューに入れられました
4. child-theme / css / main.css->子テーマによってキューに入れられました

親のstyle.cssをの依存関係としてキューに入れるとmain.css、これは次のようになります。

1. twentythirteen / genericons / genericons.css->親テーマによってキューに入れられました
2. child-theme / style.css->空、親テーマによってキューに入れられます
3. twentythirteen / css / ie.css->親テーマによってキューに入れられました
4. twentythirteen / style.css-> main.cssの依存関係として子テーマによってキューに入れられます
5. child-theme / css / main.css->子テーマによってキューに入れられました

ie.cssが親テーマのの前に含まれていることに注意してくださいstyle.css。親テーマのcssファイルのエンキュー順序を変更したくないのは、これがcssルールの優先度に問題を引き起こさないと推測できないためです。

@importを使用する必要はありません。実際にはしないことをお勧めします。エンキューされたアプローチを使用することは、おそらくあらゆる点で優れています。

次に、23番目のコードの関連部分を示します。

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' );

コードで行うことは次のとおりです。

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' );

main.cssが親のstyle.cssの後に来る必要がある場合は、それに依存するようにします。

子にB.cssもある場合、それに応じて依存関係を設定します。

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' );

各アイテムに定義する依存関係を、それらの依存関係が実際に何であるかを実際に反映するようにします。main.cssがB.cssの後に来る必要がある場合、それに依存します。B.cssが親のstyle.cssの後に来る必要がある場合、Bはそれに依存します。エンキューシステムが自動的に整理します。

また、実際に子のstyle.cssを使用していない場合は、キューに入れる必要はまったくありません。テーマのヘッダー情報を保持するための単なるプレースホルダーになります。それを使用していませんか？ロードしないでください。

また、ここでの注文に非常に依存していることを正確に何をしていますか？CSSは、ほとんどの状況でロード順を気にしません。CSSは、セレクターの特異性により依存しています。何かをオーバーライドする場合は、そのセレクターをより具体的にします。より具体的なセレクターが常に勝ち、それが最初、最後、またはその間に来ることができます。

編集

コメントを読んでコードを詳しく見ると、間違いがどこにあるかわかります。13個のコードは「get_stylesheet_uri（）」をキューに入れています。これは、子テーマの場合、親のファイルではなく、子テーマのstyle.cssファイルになります。@importが機能し、同じ順序を維持するのはそのためです（これも、考えているほど重要ではありません）。

その場合、インポートを使用したくない場合は、親のstyle.cssを直接キューに入れることをお勧めします。そのようです：

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

子テーマのfunctions.phpのコードが最初に実行されるため、独自のwp_enqueue_scriptsが最初に実行され、これにより親テーマのstyle.cssがキューに登録されます。親と同じように何にも依存しないようにすることで、出力に正しく配置されます。元の「twentythirteen-style」にはリストされた依存関係としてgenericons.cssがないため、このファイルとgenericons.cssの順序は重要ではありません。

自分の子供のstyle.cssが読み込まれますが、正直なところ、これは別のmain.cssではなく、子テーマの変更を置くべき場所です。そこに変更を加えることを妨げるものは何もありませんが、追加のcssファイルを用意する本当の理由はありません。

私の以前の答えは非常に複雑であり、親テーマの依存関係チェーンを尊重しない可能性があります（他の答えの注を参照）。

はるかによく機能する別のもっと単純なテイクを次に示します。

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);

アイデアはget_stylesheet_uri()、親テーマでの呼び出しを単純にフィルタリングして、子テーマではなく独自のスタイルシートを返すことです。子テーマのスタイルシートは、アクションフックで後でキューに入れられmy_theme_stylesます。

警告

このソリューションは、親テーマの依存関係を尊重しません！親テーマのハンドル名を変更すると、親テーマに設定された依存関係のチェーンに影響します。私のもっと簡単な他の答えを見てください。

元の答え

オットーの答えはかなり良いですが、私は私の子テーマのfunctions.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);

style.css子テーマのバージョンを制御しながら、親テーマの順序とバージョン番号を維持しstyle.cssます。