質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

4回答

6754閲覧

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

qaz3330

総合スコア113

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2017/05/29 05:46

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を上書きできるようにしたいと思っております。

宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

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

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

css

1wp_enqueue_style( 'hoge', get_template_directory_uri() . '/hoge.css'); 23wp_enqueue_style( 'hoge', get_stylesheet_directory_uri() . '/hoge.css'); 4

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

投稿2017/05/29 07:53

8-0_nyan5

総合スコア2352

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

qaz3330

2017/05/29 09:41

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

0

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

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

投稿2019/03/03 05:49

mTono

総合スコア31

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

PHP

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

【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

投稿2017/05/31 10:22

kei344

総合スコア69498

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こんにちは。

php

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

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

投稿2017/05/29 06:05

kogure

総合スコア299

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

qaz3330

2017/05/29 06:15 編集

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

2017/05/29 06:34

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

2017/05/29 07:37

説明不足ですみません。 親テーマ ・style.css ・hoge.css 子テーマ ・style.css ・hoge.css <= こちらを今回新しく追加し、親テーマのhoge.cssをオーバーライドしたいです。
qaz3330

2017/05/29 07:38

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問