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

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

ただいまの
回答率

89.99%

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

受付中

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 3,300

qaz3330

score 111

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

宜しくお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+1

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

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/29 18:41

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

    キャンセル

0

こんにちは。

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は、後に読み込まれたものが適用されるので。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/29 15:14 編集

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

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

    キャンセル

  • 2017/05/29 15:34

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

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

    キャンセル

  • 2017/05/29 16:37

    説明不足ですみません。

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


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

    キャンセル

  • 2017/05/29 16:38

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる