サポート » 使い方全般 » レスポンシブのcssが子テーマに記述しても効かない

  • 解決済 nashikuzushi

    (@nashikuzushi)


    現在無料テーマの「hueman」でサイトを作成中なのですが、
    子テーマのレスポンシブのcssに書いても反映はされなくて困っております。

    試しに、親テーマのレスポンシブのcssに書くと反映がされました。

    css名は、「responsive.css」となります。
    それ以外のファイルは問題なく子テーマからの変更が適応されております。

    こういった場合、考えられる原因は何かございますでしょうか?
    大変お手数ですがよろしくお願いいたします。

    ・hueman

    Hueman

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • 「使い方全般」ではなく「テーマ」のフォーラムの方がふさわしいかと思います。

    huemanの子テーマを作って確認しましたがresponsive.cssの変更は正しく適用されますよ。
    むしろ、親テーマのresponsive.cssが使われているのがおかしいです。

    ブラウザで作成中のサイトのトップページなどを表示して「ソースの表示」を行います。
    HTMLヘッダから下のような部分を見つけます。
    <link rel='stylesheet' id='responsive-css' href='http://example.com/wp-content/themes/hoge/responsive.css?ver=4.3.1' type='text/css' media='all' />

    http://example.com/wp-content/themes/hoge/responsive.css が欲しい部分。
    ブラウザでこのURLを表示します。
    CSSがテキスト表示されると思われますが、変更した内容が反映されているでしょうか。
    また、hogeの部分は子テーマのディレクトリ名になっていますか?
    そのあたりが正しくないなら子テーマが正しく出来ていないのかもしれません。

    hueman テーマの responsive.css は

    if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'responsive', get_template_directory_uri().'/responsive.css' ); }

    とテンプレート(親テーマ)のディレクトリーが指定されているようです。
    (参照: https://themes.trac.wordpress.org/browser/hueman/1.5.6/functions.php#L129

    未検証ですが、もし子テーマに格納した responsive.css を有効にしたければ上記のコードに倣って

    function my_child_theme_style() {
        if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'responsive', get_stylesheet_directory_uri().'/responsive.css' ); }
    }
    add_action( 'wp_enqueue_scripts', 'my_child_theme_style' );

    と子テーマの functions.php に記述してみるとどうでしょうか。

    すいません。
    wp_enqueue_style の第一引数ですが id が被っちゃうので任意の文字列に変更しなきゃですね。
    あと、第三引数で依存スタイルとして親テーマの responsive.css を指定しておいたほうがいいかもしれません。
    たぶん。

    function my_child_theme_style() {
        if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'child_theme_responsive', get_stylesheet_directory_uri().'/responsive.css', array( 'responsive' ) ); }
    }
    add_action( 'wp_enqueue_scripts', 'my_child_theme_style' );

    こんにちは、

    https://github.com/AlxMedia/hueman-child/blob/master/style.css

    に、Huemanの作者の、チャイルドテーマがあります。

    このチャイルドテーマからうかがえるのは、レスポンシブ設定も含めて、チャイルドテーマの、style.cssで設定するという事を考えているみたいです。

    このテーマに限らず、同名のcssやphpが存在した場合に、常に子テーマから読み込むという機能を実装しているテーマは、多分少数派なので、

    今風の、チャイルドテーマを作っているなら、@mimosafa さんの方法、昔風の@importルールを使っているなら、単にチャイルドテーマに作ったresponsive.cssをインポートするぐらいでもいいのではないでしょうか?

    gatolabo様

    ご回答ありがとうございます。
    また、カテゴリーの件申し訳ございません。

    他の方の回答を拝見する限り、デフォルトでは子テーマで
    「responsive.cssは使えない」と思うのですが
    gatolabo様は、修正が反映されたとの事で、
    function.php等に何か変更を加えられたのでしょうか?

    大変お手数ですが、ご確認よろしくお願いいたします。

    mimosafa様

    ご回答ありがとうございます。

    詳しくコードまで記載いただき感謝です。
    やはり通常は、子テーマで「responsive.cssは使えない」となっているのですね。

    実際のページのソースを見ると確かにresponsive.cssのディレクトリは
    親テーマの「…/themes/hueman/responsive.css?ver=4.3′ type=’text/css’ media=’all’ />」
    と記載だけあり、子テーマのresponsive.cssを読み込む記述はございませんでした。

    そこまで大規模な修正がないため、nobita様に教えていただいた
    style.cssに書き込む方法で対応したいと思います。
    せっかく色々と調べていただいたのに申し訳ございません。

    よろしくお願いいたします。

    大変お手数ですが、ご確認よろしくお願いいたします。

    nobita様

    ご回答ありがとうございます。
    作者が提供している子テーマまでお調べいただき、真に感謝致します。

    >このテーマに限らず、同名のcssやphpが存在した場合に、
    >常に子テーマから読み込むという機能を実装しているテーマは、多分少数派なので、

    無知で失礼いたしました。
    子テーマを使う場合、全てのcssの変更を「style.css」に記述するという認識で
    よろしいでしょうか?

    >今風の、チャイルドテーマを作っているなら、@mimosafa さんの方法、昔風の@importルールを使っているなら、単にチャイルドテーマに作ったresponsive.cssをインポートするぐらいでもいいのではないでしょうか?

    そのように致したいと思います。
    試しに、style.cssに記述した所反映されました。

    とても分かり易いご回答ありがとうございます。
    助かりました。

    子テーマを使う場合、全てのcssの変更を「style.css」に記述するという認識で
    よろしいでしょうか?

    全てのcssの変更を「style.css」に記述するべきだとか、そういうことはありません。
    カスタマイズしやすいようにやっていいと思います。

    作者は、そういう想定をしているというだけです。

    @mimosafaさんの提示してくれた方法と、@importルールを使う方法では、サイトのパフォーマンスに若干違いが出ますので、一応書いておきます。

    @importルールを使った場合は、CSSが逐次読み込みになると言われています。最初のimportのスタイルを読み込んでから、次のimportスタイルを読み込むようになります。
    wp_enqueue_styleで読み込む場合は、同時に変更して読み込みが進むという違いです。

    なので、スタイルの管理しやすさを追求して、importルールが、たくさん使われると、パフォーマンスに影響が出ることがありますので その辺りは注意してください。

    <del>個人的には、メディアクエリ―を使ったレスポンシブスタイルは、リセットするのが困難なので、別に分けておいた方がいいと考えています。</del>
    修正:これは、勘違いです。読み飛ばしてください

    nobita様

    ご回答ありがとうございます。
    ご返信が遅くなり申し訳ございません。

    >全てのcssの変更を「style.css」に記述するべきだとか、そういうことはありません。
    >カスタマイズしやすいようにやっていいと思います。

    こちらですが、今の所そこまでレスポンシブ用のcssを子テーマのstyle.cssに
    記載する事は少ないのですが、
    今後増える場合、別にした方が良いという事でしょうか?

    >@importルールを使った場合は、CSSが逐次読み込みになると言われています。最初の
    >importのスタイルを読み込んでから、次のimportスタイルを読み込むようになります。
    >wp_enqueue_styleで読み込む場合は、同時に変更して読み込みが進むという違いです。

    すみません…。
    私の知識不足でこちらよくわかりませんでした…

    >なので、スタイルの管理しやすさを追求して、importルールが、たくさん使われると、
    >パフォーマンスに影響が出ることがありますので その辺りは注意してください。

    上の内容がわからなかったため
    こちらもよくわかりませんでした…

    色々とありがとうございます。

    追伸
    更に問題が発覚したので、少し時間ください

    私の回答は、間違っていたようです。

    もう一度、テーマを確認してみたところ、CSSの読み込み順は、

    <link rel='stylesheet' id='style-css'  href='http://example.com/wp/wp-content/themes/hueman-child-master/style.css?ver=4.3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='responsive-css'  href='http://example.com/wp/wp-content/themes/hueman/responsive.css?ver=4.3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='font-awesome-css'  href='http://example.com/wp/wp-content/themes/hueman/fonts/font-awesome.min.css?ver=4.3.1' type='text/css' media='all' />

    になっていました。

    この状態で、style.cssにメディアクエリ―を記述した場合、それよりも後から読み込まれるresponsibe.cssの影響を受けるため、style.cssに記述するメディアクエリ―のCSSは、詳細度を高めにしなくてはならず、カスタマイズを継続すると、問題が出てきます。

    なので、style.cssに直の書き込みや、@importルールを使った記述はやめたほうがいいです。

    チャイルドテーマで、読み込み順も含めて、以下のように変更するといいと思います。

    function my_child_theme_style() {
        if ( ot_get_option('responsive') != 'off' ) {
    		wp_enqueue_style( 'responsive', get_stylesheet_directory_uri().'/responsive.css', array( 'style' ) );
    		wp_enqueue_style( 'child_theme_responsive', get_stylesheet_directory_uri().'/responsive.css', array( 'responsive' ) );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'my_child_theme_style' );

    とする事で、

    <link rel='stylesheet' id='style-css'  href='http://example.com/wp/wp-content/themes/hueman-child-master/style.css?ver=4.3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='responsive-css'  href='http://example.com/wp/wp-content/themes/hueman-child-master/responsive.css?ver=4.3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='child_theme_responsive-css'  href='http://example.com/wp/wp-content/themes/hueman-child-master/responsive.css?ver=4.3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='font-awesome-css'  href='http://example.com/wp/wp-content/themes/hueman/fonts/font-awesome.min.css?ver=4.3.1' type='text/css' media='all' />

    といった正しい読み込み順で動くと思います。

    @mimosafa さんの回答が正しく、私の回答は間違いでした

    訂正

    function my_child_theme_style() {
        if ( ot_get_option('responsive') != 'off' ) {
    		wp_enqueue_style( 'responsive', get_template_directory_uri().'/responsive.css', array( 'style' ) );
    		wp_enqueue_style( 'child_theme_responsive', get_stylesheet_directory_uri().'/child-responsive.css', array( 'responsive' ) );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'my_child_theme_style' );

    nobita様

    ご回答ありがとうございます。
    ご親切に色々とありがとうございます。

    訂正いただいた後のソースを子テーマのfunction.phpに記述しました。
    すると、cssの並びが下記となりました。

    …..

    <link rel='stylesheet' id='style-css'  href='http://example.com/wp-content/themes/hueman-child/style.css?ver=4.3' type='text/css' media='all' />
    <link rel='stylesheet' id='responsive-css'  href='http://example.com/wp-content/themes/hueman/responsive.css?ver=4.3' type='text/css' media='all' />
    <link rel='stylesheet' id='child_theme_responsive-css'  href='http://example.com/wp-content/themes/hueman-child/child-responsive.css?ver=4.3' type='text/css' media='all' />

    ….

    ご説明通り、親テーマのresponsive.cssの後に
    子テーマの、child-responsive.cssが読み込まれております。

    そして、今まで子テーマのstyle.cssに記述しておりました
    レスポンシブ時の修正ソースを、子テーマのchild-responsive.cssに書き換えて
    アップすると、無事に適応されました。

    本当に助かりました。
    ありがとうございます。

    それにしても、何故作者は子テーマでのresponsive.cssを想定していなかったのかが疑問ですね…。英語のフォーラムでも調べたのですが、確たる回答は見つけられませんでした。

    とにかく、解決出来て本当に嬉しいです。
    ありがとうございます。

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • トピック「レスポンシブのcssが子テーマに記述しても効かない」には新たに返信することはできません。