子テーマでstyle.css以外のcssファイル（複数のcss）も上書きできるようにしたいです。

Question

WordPressで子テーマを作成しております。

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

この度、親テーマにありますhoge.cssを子テーマで書き換えたいため、
次のように記述してみました。

<?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( 'hoge', get_template_directory_uri() . '/hoge.css');
    } 
?>

しかし、結果として、hoge.cssの内容を上書きすることはできませんでした。
記述の問題なのか、そもそもstyle.cssファイルしか上書きできないのかがわからず困っております。

尚、hoge.cssに記載しているクラス名を子テーマのstyle.css内に記載してみても上書きできませんでした。
ただし、こちらの方法は、管理がややこしくなりそうですので、できれば、子テーマで複数のcssを上書きできるようにしたいと思っております。

宜しくお願い致します。

Answer 1

cssが複数あるテーマを知らないので、自分で確認できなかったのですが……。

現状、子テーマのhoge.cssが読み込まれていないというのなら、

wp_enqueue_style( 'hoge', get_template_directory_uri() . '/hoge.css');
を
wp_enqueue_style( 'hoge', get_stylesheet_directory_uri() . '/hoge.css');

これで読み込まれるのではないでしょうか。

Comments

[qaz3330]

ありがとうございます。試してみましたがうまくいきませんでした。。。

Answer 2

通りすがりに思ったことを投下。
親のhogeをまずdequeueしてみると良いのではないでしょうか？

// こんな感じ。。
// 親のhoge.cssをdequeue
wp_dequeue_style( 'hoge' );
// 子のhoge.cssをenqueueに追加
wp_enqueue_style( 'hoge', get_stylesheet_directory_uri() . '/hoge.css' );

Answer 3

とりあえずこうだと思います。

function theme_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); // 親テーマのstyle.css
	wp_enqueue_style( 'hoge', get_stylesheet_directory_uri() . '/hoge.css' ); // 子テーマフォルダ内のhoge.css
}

【get_template_directory_uriとget_stylesheet_directory_uriの違い】
http://www.youngflavor.net/2015/02/2981/

---

で、読み込まれているのであれば、あとはCSSの優先順位が正しく設定されているかどうかだけです。
デベロッパーツールで確認できると思います。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

Answer 4

こんにちは。

wp_enqueue_style( 'hoge', get_template_directory_uri() . '/hoge.css');
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); 

【現状のコードが正しいと仮定して】
試してみてはいないのですが、hoge.cssを上書きしたいのなら先にhoge.css →次にstyle.cssを読み込むようにしてみてください。
cssは、後に読み込まれたものが適用されるので。

Comments

[qaz3330]

ありがとうございます。
早速ためしてみましたが、だめでした。

正しく読み込まれていると、html内の <link rel ....> タグ中に、子テーマのcssが出力されるみたいなんですが、
style.cssしか子テーマのcssがでていないところから、別に問題があるのかもしれません。。。

[kogure]

子テーマのcss自体読み込まれていないんですね。
http://neirof.com/225.html
この辺で引っかかるものってありますか？
たぶん、子も記事参考にしているのかなと思いますが、、、
もし、function部分しか対応してないようでしたらそのほかの項目もチェックしてみてください。

あと、ごめんなさい。元親が「hoge.css」、カスタマイズが「style.css」であってます？

[qaz3330]

説明不足ですみません。

親テーマ
・style.css
・hoge.css

子テーマ
・style.css
・hoge.css <= こちらを今回新しく追加し、親テーマのhoge.cssをオーバーライドしたいです。

[qaz3330]

ちなみに、子テーマのstyle.css自体は読み込まれております。