WordPressの子テーマ作成時に親テーマのCSSのスタイルを適応させるために@importを使うようにと言われていたのですが、最近では他の方法が推奨されているそうです。
個人的には@importで読み込むとパフォーマンスが悪くなって嫌だったのでむしろ助かりました。
functions.phpに数行足すだけで簡単に実装できます。
WordPressの子テーマでスタイルを継承させるためにやること
この件に関して、WordPress Codexにて下記のように紹介されています。
親テーマと子テーマのスタイルシートをキューに入れます。以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。
ソースも上記サイトのものを引用します。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
この記述を子テーマのfunctions.phpに書いてあげることで、親テーマのCSSを読み込んでくれるようになります。
header.phpで注意する点
CSSの読み込みをheadタグ内に直接書く場合に注意が必要です。
wp_headというコードで親テーマのCSSが吐き出されるテーマでは、それより前の行に子テーマのCSSが記述されてると順番が逆になってしまってスタイルを上書きできずにうまく機能しません。
というわけで、CSSのファイルの読み込みを後にしたいものをheadタグ内に書くのであれば、headタグ閉じの直前くらいに入るように書いておきましょう。
全部functions.phpに書いてwp_headから出力されるようにできればもちろんそれでもいいと思います。
最後に
以前まで常識とされていたこともどんどん情報が更新されていくのでチェックしておかないといけませんね。
もし以前のように子テーマのCSS内に親テーマのCSSを@importで読み込んだ書き方をしていたら直しておいた方が良さそうですね。