functions.phpから子テーマのCSSを読み込む際の書き方について

解決済

(@mokeco)

親テーマやサーバと、下記コードには相性のようなものがあるのでしょうか？

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles',10 );
function theme_enqueue_styles() {
	wp_dequeue_style( 'hoge-style' );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

これは @important を使わずに functions.php から子テーマのCSSを呼び出すときのコードとしてよく紹介されているものですが、適用すると

<link rel='stylesheet' id='parent-style-css'  href='親テーマのスタイル' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='子テーマのスタイル' type='text/css' media='all' />
<link rel='stylesheet' id='twentytwelve-style-css'  href='子テーマのスタイル' type='text/css' media='all' />

という出力をします。

また、GeneratePressを使った子テーマでは

<link rel='stylesheet' id='parent-style-css'  href='親テーマのCSS' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='子テーマのCSS type='text/css' media='all' />
<link rel='stylesheet' id='generate-style-css'  href='親テーマのCSS' type='text/css' media='all' />
<link rel='stylesheet' id='generate-child-css'  href='子テーマ/style.css?ver=1479396177' type='text/css' media='all' />

のような出力をしていることもありました。

親テーマが先、子テーマが後に読み込まれてはいるので、CSSの読み込みによる崩れなどはありませんが、気になってしまいます。
確実に parent-style-css と child-style-css のみを出力する書き方はあるでしょうか。
以前は、上に書いたコードでこの２つだけ読み込んでいたような気もするのですが…。

確認環境は
WordPress：4.7.1 & 4.6.1
親テーマ：twentytwelve、level、generatepress
サーバ：MAMP（PHP5.5.18） & CPI（PHP5.5.27、PHP7.0.2）

です。
ご回答いただければ幸いです。よろしくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)

CG
(@du-bist-der-lenz)

9年、 3ヶ月前

こちら「 CSS が反映されない」の nobita さんの回答が参考になりそう。
Toro_Unit (Hiroshi Urabe)
(@toro_unit)

9年、 3ヶ月前
@mokeco さん

generatepress の functions.php を参照したところ、generate_scripts という関数が wp_enqueue_scripts にフックされています。

この中で、

wp_enqueue_style( 'generate-style', get_template_directory_uri() . '/style.css', array( 'generate-style-grid' ), GENERATE_VERSION, 'all' );

及び、
```
if ( is_child_theme() )
	wp_enqueue_style( 'generate-child', get_stylesheet_uri(), true, filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
```
というのが実行されているので、CSSが親テーマからも出力されているようです。
この場合は、theme_enqueue_stylesをしなくても良いということですかね。

また、親テーマ側のCSSの読み込みを無効にする場合は、
```
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11 );
function theme_enqueue_styles() {
    wp_dequeue_style( 'generate-style' );
}
```
を実行すれば良いですが、これは登録されているCSSの読み込みを無効にするというモノなので、wp_enqueue_style( 'generate-style' ); より後に実行する必要があります。

なので、add_action の第3引数を11にして、実行の優先順位を下げています。
munyagu
(@munyagu)

9年、 3ヶ月前
こんにちは

テーマによる相性というか、子テーマになっている場合に親テーマのスタイルを読み込むのか、子テーマのスタイルを読み込むのかは違いがあるのかもしれないですが・・・
実際にどのように出力されているのかを確認して対応するしかないのでは、と思います。

Twenty Twelveではスタイルシートの読み込みにget_stylesheet_uri()が使われており、子テーマのcssを読み込むようになっているようです。
そのままでは親テーマのcssは読み込まれないので、親テーマのstyle.cssも参照する場合にはenqueueする必要があります。

functions.phpをお使いになっている例では、子テーマのcssが重複しているので、
```
wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
```
は不要なんではないでしょうか。

GeneratePressは使ったことがないですが、親のstyle.cssも子のstyle.cssも自動的に読み込んでくれる仕組みがそもそも備わっているんじゃないでしょうか。
そのようなテーマではenqueueする必要がないのでしょうね。

そうすると、どのテーマでもこれをやっておけば両方を確実に一回だけ読み込まれる、というやり方は無い気がします。
トピック投稿者 mokeco
(@mokeco)

9年、 3ヶ月前

皆さん、ありがとうございます。

やはり「だいたいこれで大丈夫」のようなものがあるわけではないんですね。
そして親切にもテーマ側で子テーマ化した際の挙動まで考慮してくれていることもあるんですね…！

どうにも「同じスタイルが２回読み込まれる」ことが（影響は全くないにしても）気になってしまっていたのですが、レイアウト崩れが発生しない限りは気にしないようにしようかな、と思いました。
ありがとうございました。