！importantを使用しない子テーマのCSS優先順位の問題

子テーマを使用するようにWordPressサイトを変更しましたが、子テーマCSSで行った変更よりも親テーマスタイルが優先されます。私はを使用して回避できます!importantが、これはパッチのようなソリューションであり、子テーマはサイトの最初のリソースとして機能するはずです。

たとえば、私のサイトでは、を含む境界線.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' );
}

css child-theme

— ダルコフ
ソース

子テーマのstyle.cssをどのように追加しますか？

— ミロ

この投稿でWordPressが推奨

— Dharkov

子テーマのスタイルシートが非常に早く読み込まれるようです。それをエンキューするか、ヘッダーに直接リンクタグを追加しますか？親のスタイルシートの後に表示されるようにキューに登録する必要があります。そのため、同じCSSセレクターを使用して、！重要性またはより高い特定性なしで親をオーバーライドできます。下のランビロの答えを見てください。

— ミロ

回答:

子テーマの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（）これは、親ではなく子テーマのテンプレートフォルダーを指します。CSSを通常はテーマのサブフォルダーに保持するため

、サブフォルダーもそこに追加しました/styles/。

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

— ランビロ
ソース

おかげで、新しいアレイは完全に機能し、よりクリーンで明確になります。

— ダルコフ2015

まだ動かない..とても変。少なくとも20の16のテーマに関する40分と20のチュートリアル。オーバーライドするスタイルを取得できません。body, select { color: red !important; font-size:200% !important; }

— roberthuttinger 2016年

さあ、コードペンを投稿してください。

— rambillo 2016年

PHP_INT_MAXは私の場合それを解決しました。子のcssが親のcssの後にロードされるように強制します。

— mefiX 2016年

roberthuttingerこの問題を解決したことがありますか？

— gjnave

TLDR回答：それぞれの最初のパラメーターはwp_enqueue_style()、「親スタイル」および「子スタイル」のままにしないでください。親テーマとその子の名前と一致するように、名前を変更する必要があります。

問題

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

期待

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

解決

パラメータの名前を変更します。私は以下のようにして（少し）より多くの制御を取得します。20と16の子をテーマと子テーマの名前に置き換える必要があることに注意してください。

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プラグインのリンク順序を制御できないことに注意してください。後でリンクされます。）

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

— ヘンリック・アーランソン
ソース

何も強制せずにWordpressフレームワークを正しく使用しているため、これが正しい答えだと私には思われます。

— 準

子テーマのCSSでより具体的なセレクターを使用して、それを優先させることができます。

だから代わりに：

.wp-caption {
     背景：＃2d2d2d！重要;
}

使用する：

.entry .wp-caption {
     背景：＃2d2d2d;
}

また、子テーマスタイルシートをfunctions.phpファイルにエンキューしていない場合は、必ずエンキューする必要があります。

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

— Twodogstar
ソース