web-dev-qa-db-ja.com

子供のテーマCSSを使用せずに優先順位の問題!重要

私は自分のWordPressサイトを子テーマを使うように変更しましたが、親テーマのスタイルは私が子テーマのCSSに加える変更よりも優先されます。私は!importantを使用してそれを回避することができますが、これは厄介な解決策であり、子テーマはサイトの最初のリソースとして動作するはずです。

たとえば、 my site では、.wp-captionを含む境界線は!importantタグを使用した背景と同じ色ですが、それがないと機能しません。

これはfunctions.phpファイルと関係がありますか?

これは私のPHPファイルの内容です:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
7
Dharkov

そのようにあなたの子供のテーマのCSSをキューに入れてみてください。

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/styles/child-style.css', array( 'parent-style' ) );
}

いくつか注意してください。

1)これが最後に実行されるように、優先順位としてPHP_INT_MAX

2)get_stylesheet_directory_uri()とget_template_directory_uri()は、親の代わりに子テーマのテンプレートフォルダを指します。

そこにサブフォルダを追加しました。/styles/もCSSを自分のテーマのサブフォルダに通常どおりに置いているためです。

3)の後にarray( 'parent-style' )を続けて、子CSSが親CSSを依存関係として持つようにします。これは、親テーマを先頭に、子テーマCSSを後に置くという効果があります。そのため、すでに親テーマにある子テーマにも表示されているものは、親テーマのバージョンを上書きします。

15
rambillo

TLDR回答:各wp_enqueue_style()の最初のパラメーターは、「親スタイル」および「子スタイル」のままにしてはなりません。親テーマとその子の名前と一致するように、それらはrenamedでなければなりません。

問題

パラメーターの名前を変更しないと、子テーマが2回キューに入れられ、Firebugでルールが2回表示され、間違った値が変更されて明らかな効果が得られないため、子ルールが間違っていると思われる可能性がありますtは親をオーバーライドします。

期待値

子テーマのコーデックスページ は、何もしなければ、子CSSが自動的にリンクされることを正しく示しています。それはしますが、それだけです。 CSSのワークフローは少し異なります。置き換えるのではなく、オーバーライドする必要があります。それは論理的です(他のテーマファイルと同じように機能します)が、メモがあったかもしれません。

ソリューション

パラメーターの名前を変更します。 (少し)より多くの制御を得るために、以下のようにしますnotetwentysixteenおよびtwentysixteen-childテーマと子テーマの名前:

function theme_enqueue_scripts() {
    //FIRST
    wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );

    //...custom queueing of .js and .css for Javascript plugins and such here

    //LAST
    wp_enqueue_style( 'twentysixteen-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'twentysixteen-style' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

(このアクションでは、一部の(すべて?)WPプラグインのリンク順序を制御できないことに注意してください。これらは後でリンクされます。)

幸せなセレクター狩り;)

1

優先されるように、子テーマのCSSでより具体的なセレクタを使用できます。

だから代わりに:

 
。wp-caption {
背景:#2d2d2d!重要; 
} 
 

つかいます:

 
。entry .wp-caption {
背景:#2d2d2d; 
} 
 

まだしていない場合は、functions.phpファイルに子テーマのスタイルシートを確実にエンキューすることも必要になります。

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

0
Twodogstar