11

私は自分の子テーマの親として、Chip Bennettが書いたOenologyテーマを使用しています。

私の開発プロセスの中で、スタイルを制御することに関して、Childテーマを書く人々にとっていくつかの課題があることを発見しました。

メインのstyle.cssファイルが<head>内の他のすべてのスタイルシートリンクまたはステートメントの前に読み込まれることを発見しました。これが、親スタイルの一部を上書きできない問題を説明しています。

問題をさらに調査すると、さまざまな親スタイルシートとスタイルが<head>の3つの場所でキューに入れられることが示されています。add_action('wp_print_styles',、add_action('wp_enqueue_scripts',、そしてadd_action('wp_head',。

簡単にするために、2つのスタイルシートを作成することを計画しています。最初のメインの「style.css」シートには、@import url()Oenologyのメインスタイルシートをロードするために必要なコマンドのみが含まれます。

2番目のスタイルシートには、子ルールが含まれます。他のすべてのルールの後に読み込まれるようにするには、を使用してキューに入れますadd_action( 'wp_head',。

これは合理的に聞こえますか？またはそれを行うためのより良い（より正しい）方法はありますか？

~~ところで、誰かが ' /parent-theme/style.css？MRPreviewRefresh = 723 'の意味を知っていますか？~~

更新

wp_enqueue_style（）がwp_head（）で機能しないようです。

乾杯、
グレゴリー

child-theme css parent-theme

— グレゴリー
ソース

21

ちなみに、この問題は、ワイン醸造学のテーマに固有のものであるため、ローカライズが多すぎると考えられます。

そうは言っても、ここで問題が発生していると思います。Oenologyは2つのスタイルシートをキューに入れます。

style.css、直接文書の頭の中で（これの前に wp_head()解雇されました）

{varietal}.css、でwp_enqueue_scripts、優先度付き11、でfunctions/dynamic-css.php：

/**
 * Enqueue Varietal Stylesheet
 */
function oenology_enqueue_varietal_style() {

// define varietal stylesheet
global $oenology_options;
$oenology_options = oenology_get_options();
$varietal_handle = 'oenology_' . $oenology_options['varietal'] . '_stylesheet';
$varietal_stylesheet = get_template_directory_uri() . '/varietals/' . $oenology_options['varietal'] . '.css';

wp_enqueue_style( $varietal_handle, $varietal_stylesheet );
}
// Enqueue Varietal Stylesheet at wp_print_styles
add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );

「スキン」を適用する品種スタイルシートは、優先順位でエンキューし、正しいカスケードを発生させるために11、ベーススタイルシートstyle.cssが最初に読み込まれ、品種スタイルシートが2番目に読み込まれるようにします。

したがって、品種スタイルシートをオーバーライドする必要がある場合は、品種スタイルシートの後に 2番目のスタイルシートをエンキューするだけです。つまり、少なくとも12それ以上の優先度を持ちます。

編集

より一般的な質問に、より一般的な答えを提供するには：

親テーマのスタイルシートのエンキューをオーバーライドするには、次の2つのことを知っておく必要があります。

アクションフックスタイルシートがエンキューされました
優先コールバックフックに追加されます

エンキュー関数（wp_enqueue_script()/ wp_enqueue_style()）は、フックと/ フックの間のどこでも適切に実行できます。（現在、関数を実行する意味的に正しいフックはです。）このリストには、次のアクションが含まれています（特に、これらは通常の容疑者です）。initwp_print_scriptswp_print_styleswp_enqueue_*()wp_enqueue_scripts

init
wp_head
wp_enqueue_scripts
wp_print_scripts/wp_print_styles

（、、およびのすべてが特定の優先順位での内部で発火することwp_enqueue_scriptsに注意してください。wp_print_styleswp_print_scripts wp_head

したがって、Parent-Themeスタイルシートをオーバーライドするには、次のいずれかを実行する必要があります。

デ・エンキューを経由して、親-テーマスタイルシートをwp_dequeue_style( $handle )
スタイルをキューに入れる親テーマのコールバックを削除します。remove_action( $hook, $callback )
CSSカスケードを使用して、親テーマのスタイルシートをオーバーライドします。子テーマのスタイルシートwp_enqueue_style()呼び出しを、優先度の低い同じフックまたは後のフックにフックします。

この最後のオプションで、親テーマが使用する場合：
```
`add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority )`
```
...次に、Child Themeは次のものを使用します。
```
`add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`
```

— チップベネット
ソース

チップありがとうございます。実際、wp_enqueue_scriptsと高い序数を使用して、子スタイルシートを最後にロードすることができます。ただし、Childスタイルシートステートメントの後には3つの異なるスタイルステートメントがあります。2つはWP自体によって出力されます!!!、1つはwpのadd_custom_image_header（）関数を介してOenologyによって出力されます。

— グレゴリー

body.custom-backgroundスタイルステートメントはWP自体によって出力されますが、 'BACKGROUND_COLOR'を定義することでカスタムの背景色を指定できるようです。奇妙なことに、カスタムのWP定数を介して基本的なCSSルールを設定する必要があります。

— グレゴリー

1

最後のコメントチップ。この質問はあまりにもローカライズされていません。多くのテーマは、利用可能なすべてのフックを使用してスタイルをエンキューまたは印刷します。Childテーマの開発者は、スタイルを必ずしも無効にすることなく、それらのスタイルをオーバーライドする方法を知る必要があります。乾杯。

— グレゴリー

これで私が目にする問題は、child_theme_enqueue_styleがより高い優先度で子スタイルをロードし、さらにwp_headの下で子スタイルシートを複製することです-Wordpressは通常の優先度で自動的に子スタイルシートをロードしてから、再度ロードします。新しい優先順位でさらに下に。他のすべてのスタイルシートを上書きした結果は得られますが、ページにスタイルシートが複製されます。

— php-b-grader

2

私のスタイルがカスケードで最終的な発言権を持っていることを保証する唯一の方法は、wp_headフックを介して<head>の最後にそれらを含めることでした。wp_enqueueはwp_head内では機能しないため、リンクを直接エコーする必要がありました。

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    echo '<link rel="stylesheet" href="'.$base.'/style-gregory.css" type="text/css" media="all">';
    return;
}
add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 );

最後に、スタイルを比較的簡単に設定できます。高いレベルの具体性や、最後の手段としてのみ使用される！importantルールを使用する必要はありません。

WPには、より優れたスタイルのエンキューシステムが必要です。ファイルリンクであれ、インラインスタイルであれ、すべてのスタイルは同じフックを介して渡され、優先順位がそれらの順序を決定できるようにする必要があります。オプションでデバッグの目的で、フックが各スタイルのPriority値をおそらくコメント形式で出力する場合に役立ちます。

更新

で説明されているようにスタイルシートを2つに分割することで、（メインスタイルシート、サブスタイルシート、およびいくつかのスタイルステートメントを使用する）親テーマの元のカスケードを維持しながら、子テーマのスタイルの制御を保持できました質問。私はwp_head（）フックをもう使用していません。代わりに、適切な標準のwp_enqueue_scripts（）フックを高い序数で使用して、スタイルシートが最後に読み込まれるようにします。

私の子テーマのデフォルトのスタイルシート：

/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/

@import url("/wp-content/themes/oenology/style.css");

メインのスタイルシートをエンキューする関数：

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    wp_enqueue_style( 'style-gregory', $base.'/style-gregory.css' );
    return;
}
add_action( 'wp_enqueue_scripts', 'gregory_enqueue_stylesheets', 18 );

ただし、スタイルシートの後に記載されているWPで生成されたスタイルステートメント（つまり、親テーマではない）がいくつかあります。私は、高特異性のCSSルールを使用して、自分に関係のあるルールを上書きするか、それらを無効にするフック、特にbody.custom-backgroundルール。

コメントありがとうございます。

乾杯、
グレゴリー

— グレゴリー
ソース

1

あなたは、必要があり、常に使用しwp_enqueue_style()、あなたのスタイルシートをロードし、機能を夢中にされるべきであるとするwp_enqueue_scriptsのでフック頭の中で実行されます。あなたはそれをそこに引っ掛けていなかったので、あなたの問題だと思います。（WP 3.3以降、wp_enqueue_style()他のものにフックされている場合、WP_Debugがオンの状態で通知がスローされます）。

— mrwweb
ソース

@Chipの答えは私のものよりも優れており、Oenologyテーマについて議論するのに間違いなく適任です;）これは、私が正しいとはいえ、私の答えを削除する必要があるケースですか？

— mrwweb

いいえ、私はあなたの答えを残します。それは正しく、質問の特定の部分に対応します。

— チップベネット

すべての親スタイルシート/ステートメントの「後」に子スタイルシートをキューに入れる方法を教えてください。

更新

編集

更新