ニケッチャニッキ

はてなブログ・WordPressカスタマイズ・Androidプログラミング

WordPressで子テーマのcssが反映されない原因

WordPressの子テーマのcssが反映されない人は結構いるようで、検索したらたくさんの情報が出てきました。

でもテーマによってはそれらの方法ではうまくいかないケースがあります。その場合の対処方法を調べてみました。

子テーマのcssを反映させる方法

cssファイルが1つの場合

以前こちらの記事でも書きましたが、function.phpは子テーマ→親テーマの順で読み込まれます。

一般的な手順は次のように、子テーマのfunction.phpで親テーマのcssをparent-styleというIDで読み込む。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

これだけ書いておけば親テーマのstyle.css→子テーマのstyle.cssの順で読み込まれる仕様になっているそうです。

cssファイルが複数の場合

親テーマがwp_enqueue_style関数を使ってcssを読み込んでいる場合であれば、子テーマ側で先に同じIDでcssを読み込んでしまえば親テーマ側での呼び出しが無効になるそうです。

例えば親テーマのfunction.phpが次のようになっていた場合

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

子テーマのfunction.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( 'content-style', get_template_directory_uri() . '/css/content.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style','content-style')
    );
}

親テーマのcontent.cssのあと子テーマのstyle.cssが読まれ、親テーマのfunction.phpでcontent.cssを呼ぶ処理は無効になる。

wp_enqueue_styleの3つ目の引数は、そのcssが依存するcss(先に読みこみたいcss)を配列で指定します。

最終手段!追加cssで上書き

親テーマの仕様によっては今まで紹介した方法が使えないケースがあります。子テーマのcssを読んだ後、別のcssをwp_enqueue_style関数を使わずに読んでいるケースなど。

その場合は追加cssを使って上書きします。追加cssは「外観」-「カスタマイズ」から設定できます。

ここにcssを追加すると

headの最後の方に記述してくれるので、親テーマのcssを完全に上書きできます。

ただし追加cssの部分はキャッシュされないと思うので、あんまりたくさん書きまくるのは表示速度の面でよくないのかな?

小規模サイトだと気にしなくていいと思うけど。

あとはどこにどのスタイルを書いたかわからなくなってしまうので、できればstyle.cssのみで管理したいところ。