「使い方全般」ではなく「テーマ」のフォーラムの方がふさわしいかと思います。
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を想定していなかったのかが疑問ですね…。英語のフォーラムでも調べたのですが、確たる回答は見つけられませんでした。
とにかく、解決出来て本当に嬉しいです。
ありがとうございます。
