Simplicity2の子テーマで親テーマのCSSがうまく反映されない

自力でSimplicity2の子テーマを作ったときにうまくいかなかったときの話

Simplicity2はあらかじめ子テーマまで用意してくれている使いやすいテーマです。

そうは言っても、自分で子テーマを作りたい、という人もいるのでは?

詳しい子テーマの作り方はこちらをご参照ください。

目次 まえがき 必要スキル/環境 親テーマを追加 子テーマ準備  フォルダ作成  ファイル作成  ファイル圧縮  インストール 動作確認 おわりに ...

今回はわたしがSimplicity2の子テーマを自分で作った際に出た問題と対処方法をご紹介します。

現象

微妙に親テーマのCSSが反映されていない。

  • 基本的に親テーマの設定は有効である。
  • 親テーマでは、カスタマイズ画面ではメニューバーがレスポンシブ対応されているが子テーマではメニューバーとなっている。
  • 子テーマのstyle.cssで設定した色は有効である。

環境

WordPress 4.9.1
Simplicity2 2.6.3

解決策

まずは子テーマ化する上で、最初に作ったstyle.cssとfunctions.phpがこちら。

/*
Template:   simplicity2
Theme Name: Simplicity2-kid
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

body {
 background-color:  #ffc5c9;
}
<?php
function theme_enqueue_styles() {
   wp_enqueue_style( 'simp-style', get_template_directory_uri() . '/style.css');
   wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('simp-style'));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

動きそうなんですけどね。

とりあえず何が悪いのかわかりませんでしたが、いろいろ試して解決した修正ソースが以下の通り。

<?php
function theme_enqueue_styles() {
   wp_enqueue_style( 'simp-style', get_template_directory_uri() . '/style.css',array(''));
   wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('simp-style'));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

親テーマのstyle.cssの読み込み順の指定の部分に、空のarray(”)を入れると解決!

wp_enqueue_style( 'simp-style', get_template_directory_uri() . '/style.css',array(''));

ただし、cssの読み込み順を正確に指定しないと親テーマのcssが子テーマよりも後に読み込まれることもある模様。。

参考サイト

とりあえずこの設定で様子を見つつ、問題があったら、ちゃんと読み込み順を指定するようにしよう。