Simplicity2はあらかじめ子テーマまで用意してくれている使いやすいテーマです。
そうは言っても、自分で子テーマを作りたい、という人もいるのでは?
詳しい子テーマの作り方はこちらをご参照ください。
目次
まえがき
必要スキル/環境
親テーマを追加
子テーマ準備
フォルダ作成
ファイル作成
ファイル圧縮
インストール
動作確認
おわりに
...
今回はわたしがSimplicity2の子テーマを自分で作った際に出た問題と対処方法をご紹介します。
現象
微妙に親テーマのCSSが反映されていない。
- 基本的に親テーマの設定は有効である。
- 親テーマでは、カスタマイズ画面ではメニューバーがレスポンシブ対応されているが子テーマではメニューバーとなっている。
- 子テーマのstyle.cssで設定した色は有効である。
環境
WordPress | 4.9.1 |
---|---|
Simplicity2 | 2.6.3 |
解決策
まずは子テーマ化する上で、最初に作ったstyle.cssとfunctions.phpがこちら。
1 2 3 4 5 6 7 8 9 10 11 |
/* Template: simplicity2 Theme Name: Simplicity2-kid Version: 20161002 */ /* Simplicity子テーマ用のスタイルを書く */ body { background-color: #ffc5c9; } |
1 2 3 4 5 6 7 |
<?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' ); ?> |
動きそうなんですけどね。
とりあえず何が悪いのかわかりませんでしたが、いろいろ試して解決した修正ソースが以下の通り。
1 2 3 4 5 6 7 |
<?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(”)を入れると解決!
1 |
wp_enqueue_style( 'simp-style', get_template_directory_uri() . '/style.css',array('')); |
ただし、cssの読み込み順を正確に指定しないと親テーマのcssが子テーマよりも後に読み込まれることもある模様。。
参考サイト
とりあえずこの設定で様子を見つつ、問題があったら、ちゃんと読み込み順を指定するようにしよう。