web-dev-qa-db-ja.com

小さいCSSファイルを最後にロードできるようにstyle.cssの優先順位を特定する

私は少し時間ごとに変わるCSSを持っています、そして私はしたいです

  1. 2つ目のファイル（style.cssは別）に保存して

  2. after 私のテーマのstyle.cssファイルをロードしてください。

優先順位をstyle.css - 1に設定することで、style.cssの前にロードできるようになると思います（たとえば、メインのstyle.cssの優先順位が10の場合、コードの優先順位は9になります）。

しかし、ここに私の問題があります：試行錯誤を除いて私はプログラムでスタイルシートの優先順位を識別する方法を知りません。私は、価値を磨くために単純に半分にする方法を使うことができることを知っています、しかし私はむしろそれをしません。この問題を解決するための原則的な方法を学ぶのはいいでしょう。おそらくメインテーマのCSSファイルのデフォルトの優先順位はありますか？このような場合、私は簡単に試すことができます（$ defaultPriorityValue - 1）。これは可能ですか、そうでなければこれを行うための良い方法は何ですか？

p.s.このコードを別のファイルに保存する必要があるため、functions.phpでインラインスタイルをエンキューしたくありません

以下の答えにリストした機能的な解決策を見つけましたが、プログラムでシートの優先順位を指定する方法があるかどうか誰かが説明できるのであれば私はそれを望みます。ありがとうございます。

theme-developmenthooksorderwp-enqueue-stylewp-dependencies
3
CoderScissorhands

ファイルを正しくエンキューすると、 wp_styles （ 詳細はこちら ）クラスのインスタンスが作成されます。アクションの優先順位は無視されます。だからあなたが好きなものを書いても関係ありません

add_action ('wp_enqueue_scripts','function_adding_main_style',10);
add_action ('wp_enqueue_scripts','function_adding_small_style',11);

その理由は、まさに依存システムの存在です。 WPは、最初にエンキューされたスタイルファイルをすべて収集してから、それらの依存関係を確認します。 A.cssがB.cssの前にエンキューされているが、前者が後者に依存している場合、それらはそれに応じてロードされます。この並び替えが 親クラス のall_depsメソッドで起こることがわかります。

手短に言えば、WPが与える依存関係システムの外側のスタイルファイルの優先順位を台無しにすることは想定されていません。あなた自身の解決策が一番です。

そうは言っても、あなたはいつでもエンキューシステムを迂回して、あなたのファイルを直接wp_headフックの終わりに向かってエコーすることができます。容赦ないが効果的です。

2
cjbj

依存関係ソリューション

私が見つけてテストに成功した機能的な解決策の1つは、@ - helgathevikingの この質問への回答 からのものです。この解決策では、小さいCSSファイル（3番目の引数）への依存関係をエンキュー時に設定します。小さいCSSファイルの依存関係をメインCSSファイルのハンドル/ IDに設定します。

 wp_enqueue_style(
        'my-little-css-style',
        get_stylesheet_directory_uri() . '/my_little_style.css',
        'themename-style' // this is the dependency, which I set to  the handle of the main css stylesheet. It makes the small sheet load before the main one. 
    );
0
CoderScissorhands