web-dev-qa-db-ja.com

どのようにしてすべての親スタイルシート/ステートメントの後に*自分の子スタイルシートを*キューに入れることができますか？

私は自分の子供のテーマの親としてChip Bennettによるよく書かれたOenologyのテーマを使っています。

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

私のメインのstyle.cssファイルが他のすべてのスタイルシートへのリンクや<head>内のステートメントの前にロードされることを発見したところです。

この問題をさらに調査すると、さまざまな親スタイルシートおよびスタイルを<head>の3か所にキューイングできることがわかります。 add_action('wp_print_styles',、add_action('wp_enqueue_scripts',、そしてadd_action('wp_head',です。

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

2番目のスタイルシートは私の子のルールを含みます。それが他のルールの all の後にロードされることを確実にするために、私はadd_action( 'wp_head',を使用してそれをキューに入れます。

この表現は妥当ですか？それとももっと良い（もっと正しい）方法がありますか？

ところで、誰もが知っていますか '/parent-theme/style.css？MRPreviewRefresh = 723' 手段？

更新

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

乾杯、
グレゴリー

csschild-themestylesheetparent-theme
10
Gregory

ちなみに、この質問はおそらくtooローカライズに隣接しています。これは、Oenologyテーマに固有のものです。

とはいえ、ここで私はあなたが問題を抱えていると思う：Oenologyは2つのスタイルシートをキューに入れます：

  1. style.css、ドキュメントヘッドに直接（したがってbeforewp_head()が実行されます）

  2. {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がfirstをロードし、正しいカスケードを発生させるために、品種スタイルシートがsecondを読み込みます。

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

編集

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

Parent Themeスタイルシートのエンキューをオーバーライドするには、次の2つのことを知る必要があります。

  1. スタイルシートがキューに登録されるactionフック
  2. コールバックがフックに追加されるpriority

エンキュー関数（wp_enqueue_script()/wp_enqueue_style()）は、initフックとwp_print_scripts/wp_print_stylesフックの間のどこでも正しく実行できます。 （wp_enqueue_*()関数を実行する意味的に正しいフックは、現在wp_enqueue_scriptsです。） このリストには以下のアクションが含まれています （とりわけこれら;いつもの容疑者です）：

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts/wp_print_styles

（注：wp_enqueue_scripts、wp_print_styles、およびwp_print_scripts特定の場所でwp_headのすべてのinside優先度 。

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

  • De-enqueueParent-Themeスタイルシート、 wp_dequeue_style( $handle ) 経由
  • remove_action( $hook, $callback ) を使用して、スタイルをキューに入れる親テーマコールバックを削除します

  • CSSカスケードを使用してoverrideChild-Themeスタイルシートをフックすることにより、Parent-Themeスタイルシートwp_enqueue_style()優先度の低い同じフックまたは後のフックを呼び出します。

    この最後のオプションで、親テーマが使用する場合：

    `add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority )`

    ...次に、子供のテーマは以下を使用します。

    `add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`
20
Chip Bennett

私のスタイルがカスケードで最後に言ったことを保証する唯一の方法は、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 );

最後に、私は自分のスタイルを比較的簡単に設定することができます、そして高レベルの特定性、または最後の手段としてのみ使用されるべきである！重要なルールを使用せずに。

WPはより良いスタイルのエンキューシステムを必要としています。ファイルリンクであろうとインラインスタイルであろうと、 every styleは、Priorityがそれらの順序を決定することを可能にする同じフックを通して渡されるべきです。オプションでデバッグを目的としている場合は、フックが各スタイルの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で生成されたスタイルステートメントがいくつかあります（つまり、親テーマではありません）。 after /私のスタイルシートです。または、それらを無効にするフック、特にbody.custom-backgroundルールを探します。

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

乾杯、
グレゴリー

2
Gregory

あなたのスタイルシートをロードするにはalways _ wp_enqueue_style() を使うべきで、その関数は wp_enqueue_scripts hook）に頭の中で走るでフックすべきです。 （WP 3.3以降、wp_enqueue_style()が他のものにフックされている場合、WP_Debugがオンの状態でNoticeがスローされます。）.

1
mrwweb