web-dev-qa-db-ja.com

テーマの "rtl.css"の後にスタイルシートをエンキューする

私は現在国際化対応のテーマを開発中で、スタイルシート after 私のテーマのrtl.css（右から左に読む順序で言語の代わりにロードされる代替のstyle.css）をロードしたいと思います。

私はwp_register_style()およびwp_enqueue_style()関数を使用してスタイルシートをエンキューし、依存関係でそれらのロード順を制御することに精通しています、しかしrtl.cssはロケールの言語方向がrtlであるときはいつでもWordPressによって自動的にロードされ依存関係として。

is_rtl()関数を使用して、条件付きでスタイルシートをエンキューできることはわかっていますが、これらのスタイルシートの<link>要素は、WordPressが自動的にrtl.cssを印刷する前に印刷されたままです。私のテーマの<link>ファイルでwp_head()を呼び出した直後にrtl.cssに依存したいスタイルシートに手動でheader.phpsを手動で挿入することもできますが、そうするのは悪い習慣であり、私のテーマは商用品質にしたいです。

WordPressがrtl.cssをロードした後にどのようにスタイルシートをロードすることができますか？

theme-developmentlocalizationstylesheet
6
Melika .A

スタイルシートの印刷順序

WordPressは、 テーマの代替rtl.css files をwp_register_style()またはwp_enqueue_style()を使用してロードしません。そのため、スタイルシートはWordPressのスタイルキューに追加されず、追加のスタイルシートを登録またはエンキューするときに依存関係として指定することはできません。

代わりに、このスタイルシートの<link>要素は、wp_headアクションに接続されている locale_stylesheet() function を介して追加されます。 wp_print_stylesは、wp_headの優先度で8アクションにフックされますが、locale_stylesheet()のデフォルトの優先度は10 です。つまり、wp_enqueue_style()を使用してエンキューするすべてのスタイルはalways印刷されるbeforertl.css。

注

locale_stylesheet()は get_locale_stylesheet() function を呼び出して、ロードするロケール関連のテーマスタイルシートを決定します。最初に{locale}.css（つまり、en_US.css）を探します-ファイルが存在しない場合は、次に{text-direction}.css（つまり、rtl.cssまたはltr.css）を探します。現在のロケールに{locale}.cssスタイルシートを指定した場合、WordPressは自動的にrtl.cssをロードしません

解決策

この動作を変更する方法はいくつかありますが、理由は存在することに注意する必要があります。すべてのエンキューされたスタイルシートの後にrtl.cssをロードすることにより、WordPressはテーマにCSSを上書きする機会を提供しますそれ以外の場合は左から右の言語のみをサポートするプラグインなどによって提供されるルール。以下で提供するすべてのソリューションは、ほとんどこの可能性を排除し、プラグインがWordPressのデフォルトの動作に依存している場合に競合を引き起こす可能性があります（多くの人がそうすることは想像できません）。

スタイルシートを手動でキューに入れる

WordPressがrtl.cssファイルを自動的にロードしないようにすると、他のスタイルシートと同様に扱うことができ、スクリプトのロードを制御できます。これを実現するには、2つの方法があります。

  • wp_head の前に起動するアクションにフックし、locale_stylesheet()のフックを削除します。

    function remove_locale_stylesheet() {
    remove_action( 'wp_head', 'locale_stylesheet' );
}
add_action( 'init', 'remove_locale_stylesheet' );

  • rtl.cssファイルの名前を別の名前に変更します（ltr.cssまたは{locale}.cssではありません）。

上記のいずれかを実行した後、通常どおりRTLスタイルシートをキューに入れます-LTR言語もサポートしたい場合は、is_rtl()を条件付きでキューに入れます。

wp_headのスタイルシートの印刷順序を逆にする

wp_headの前にアクションをフックし、locale_stylesheet()のフックにwp_print_stylesより低い優先度を与えることで、wp_enqueue_style()のスタイルシートの前に常にrtl.cssを強制的にロードさせ、すべてのエンキューされたスタイルシートがrtl.cssに依存しているようにできます：

function load_locale_style_first() {
    remove_action( 'wp_head', 'locale_stylesheet' );
    add_action( 'wp_head', 'locale_stylesheet', 7 );
}
add_action( 'init', 'load_locale_style_first' );
8
bosco