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' );
}
csschild-theme
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
Henrik Erlandsson

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

だから代わりに：

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

つかいます：

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

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

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

0
Twodogstar