親テーマのCSSを読み込まない

解決済 motoWK
(@motoswork)

5年、 8ヶ月前
以下をURLを参考に子テーマを作成したのですが、
親テーマのCSSが反映されず、子テーマのCSSのみ反映されています。
色々調べた結果、解決方法が分からず投稿させて頂きました。

■参考URL
────────────────────────────────
https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

■バージョン
────────────────────────────────
WordPress：ver 4.9.5

■ディレクトリ
────────────────────────────────
親テーマディレクトリ名：twentyfifteen
子テーマディレクトリ名：twentyfifteen_child

■子テーマの style.css
────────────────────────────────
```
/*
 Template:twentyfifteen
 Theme Name:TwentyFifteen-child
*/

body { 
	background-color:#FF8800 ;
}
```
■子テーマの　function.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' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>
```
■その他
────────────────────────────────
親テーマ側が「style.css」のみでほぼ構成されていることは確認済み
子テーマの「style.css」の背景色のみ反映されている

どうぞ、宜しくお願い致します。
- このトピックはmotoWKが5年、 8ヶ月前に変更しました。
- このトピックはmotoWKが5年、 8ヶ月前に変更しました。

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

Toro_Unit (Hiroshi Urabe)
(@toro_unit)

5年、 8ヶ月前
正しく記述されているとはおもうので、これでうまくいかないのはおかしいなぁと思います。

HTMLソースを見たときに、
```
<link rel='stylesheet' id='parent-style-css'  href='https://example.com/wp-content/themes/twentyfifteen/style.css?ver=4.9.5' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='https://example.com/wp-content/themes/twentyfifteen_child/style.css?ver=4.9.5' type='text/css' media='all' />
```
のような形でCSSが読み込まれているとは思うのですがどうなっているでしょうか？
トピック投稿者 motoWK
(@motoswork)

5年、 8ヶ月前

ご返答ありがとうございます！
たしかに、ソースを見るというところに頭が回っていませんでした。

確認すると　

<link rel='stylesheet' id='twentyfifteen-style-css' href='http://example.com/wordpress/wp-content/themes/twentyfifteen_child/style.css?ver=4.9.5' type='text/css' media='all' />

となっており、style.cssはこれのみで、
親のCSSは読み込まれておりませんでした。

idは本来、wp_enqueue_style()で指定したchild-style-cssになっているべきなのでしょうか。
宜しくお願い致します。
nobita
(@nobita)

5年、 8ヶ月前
こんにちは、
```
<link rel='stylesheet' id='twentyfifteen-style-css' href='http://example.com/wordpress/wp-content/themes/twentyfifteen_child/style.css?ver=4.9.5' type='text/css' media='all' />
```
というソースになっているとすると、
```
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  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')
);
}
?>
```
このコードは、働いていないという事になります。

なぜ、そうなるのか？

元々は、チャイルドテーマのstyle.cssに、@import url("../twentyfifteen/style.css");で、親のスタイルを読みこんでいたので、何もしない場合は、子テーマは、チャイルドテーマのスタイルを親テーマのハンドル名で読み込む為です。

function.php は、正しくは、functions.php ですが、ファイル名が　functions.phpになっていますか？
- この返信は5年、 8ヶ月前にnobitaが編集しました。
- この返信は5年、 8ヶ月前にnobitaが編集しました。
ishitaka
(@ishitaka)

5年、 8ヶ月前
こんにちは

子テーマの style.css のみが組み込まれているということなので、@nobita さんが書かれているように、functions.php のファイル名が間違えているのではないでしょうか。
Twenty Fifteen テーマにおいては、親テーマ側で子テーマの style.css を組み込むようになっているので、子テーマに functions.php が存在しない場合でも、子テーマの style.css が組み込まれます。
親テーマ側で子テーマの style.css が組み込まれるので、子テーマ側で子テーマの style.css を組み込むと重複します。
よって、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' );
	// Twenty Fifteen テーマ（親テーマ）で組み込まれるので不要。
	//wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
```
ishitaka
(@ishitaka)

5年、 8ヶ月前
あと、もう一点。ディレクトリ名がアンダースコアになっています。

子テーマディレクトリ名：twentyfifteen_child

アンダースコアでも問題はないようですが、子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されています。
https://wpdocs.osdn.jp/子テーマ
- この返信は5年、 8ヶ月前にishitakaが編集しました。
- この返信は5年、 8ヶ月前にishitakaが編集しました。理由: 追記
- この返信は5年、 8ヶ月前にishitakaが編集しました。
トピック投稿者 motoWK
(@motoswork)

5年、 8ヶ月前

@nobitaさん
ありがとうございます、functions.php　が　function.phpになっておりました・・・
こんな凡ミスしているとは気付かず、大変助かりました。感謝致します。

@ishitakaさん
ありがとうございます、ご指摘の通り、ファイル名がそもそも間違っておりました。
ディレクトリ名は、そのままでも問題ありませんでしたが、アンダースコアではなく
推奨の通り、ハイフンに修正しておきます。

ご丁寧に回答頂きました
@toro_unitさん　@nobitaさん　@ishitakaさん　本当に感謝致します。