サポート » テーマ » 親テーマのCSSを読み込まない

  • 解決済 motoWK

    (@motoswork)


    以下を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が6年、 1ヶ月前に変更しました。
    • このトピックはmotoWKが6年、 1ヶ月前に変更しました。
6件の返信を表示中 - 1 - 6件目 (全6件中)
  • 正しく記述されているとはおもうので、これでうまくいかないのはおかしいなぁと思います。

    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)

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

    確認すると 

    <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になっているべきなのでしょうか。
    宜しくお願い致します。

    こんにちは、

    
    <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になっていますか?

    • この返信は6年、 1ヶ月前にnobitaが編集しました。
    • この返信は6年、 1ヶ月前にnobitaが編集しました。

    こんにちは

    子テーマの 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') );
    }

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

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

    アンダースコアでも問題はないようですが、子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されています。
    https://wpdocs.osdn.jp/子テーマ

    • この返信は6年、 1ヶ月前にishitakaが編集しました。
    • この返信は6年、 1ヶ月前にishitakaが編集しました。理由: 追記
    • この返信は6年、 1ヶ月前にishitakaが編集しました。
    トピック投稿者 motoWK

    (@motoswork)

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

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

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

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「親テーマのCSSを読み込まない」には新たに返信することはできません。