子テーマのCSSがオーバーライドされないと思ったら…～WP覚書き～

この記事の対処をしていた際に起きた出来事の覚書き。

WordPress使いの方には、そんなことでつまづくの？！と思われるような内容ですが、ド素人の私にはつまずきポイントだったのでメモっておきます。

普段からWordpressの無料テーマをいじいじしてブログなりサイトなりを作っているのですが、子テーマに修正用のCSSファイルを作成して、デザインを一部変更したはずが、ん？オーバーライドされていない？？となったので、色々調べてみました。

header.phpをチェック

今回使っている無料テーマでは、style.cssには具体的なデザインが記述されていませんでした。その代わり、別途CSSディレクトリが設置されており、その中に基本デザイン用のCSS、レスポンシブデザイン用のCSSというように、用途ごとにCSSが用意されていました。
今回は、レスポンシブデザイン用のCSSをいじる必要が出てきたため、同名のファイルを子テーマに作成して、修正の記述をしました。が、更新しても変更が適用されていない…なぜだ？！となったのです。

ま、結論は簡単なのですが、これらのCSSファイルは、ヘッダで読み込む形になってたんですね～。だから、読み込み先のパスを変更しないと、子テーマのCSSは読み込まれない！というカラクリでした（汗） ということで、header.phpで指定されているCSSファイルのパスを下記の様に変更し、子テーマに配置しました。

変更前では、親テーマのディレクトリ内のCSSファイルを直接参照するようになってたんですね～。それを、子テーマにあるCSSを参照するように変更しました。これで、一件落着！

※get_template_directory_uri() は親テーマのディレクトリを参照して、get_stylesheet_directory_uri() は子テーマのディレクトリを参照します。

参考：
WordPress 子テーマがカレントのときのテンプレートディレクトリの取得
関数リファレンス/get stylesheet directory uri

header.phpにCSS読み込み用のコードがない場合

なお、多くの場合、header.phpにはCSSファイル読み込み用のコードが直接書かれていることはなく、wp_head() でfunctions.phpなどの関数定義ファイルから吐き出しています。なので、パスを書きかえるのは、その関数定義ファイルになります。

ところが、もし、functions.php に wp_head() が定義されている場合、子テーマでは　functions.php がオーバーライドされない関係上、少々やっかいです。（wp_head()の定義ファイルは、テキストエディタのgrepなどを使って探しましょう）

その場合のお話は、こちらも参考にどうぞ。

Tweet