子テーマのCSSが反映されない！

オリジナルのテーマを編集しないでデザインやレイアウトを変更できるWordPressの子テーマ。

オリジナルのテーマがバージョンアップしても変更点は別のファイルで編集してあるので、スムースにオリジナルのテーマをバージョンアップすることができます。

とても便利な子テーマなのですが、実際に作成してみるとCSSが反映されない！という不具合に遭遇してしまいました。

忘れないうちに解決方法をメモっておきたいと思います。

子テーマのCSSが反映されないのを回避する方法を探すも・・・

子テーマのstyle.cssを読み込ませる方法として「@import」を利用する方法は見つけることができたのですが、

@importを利用するとWordPressのパフォーマンスが落ちる

との事。

CodeX日本語版の子テーマを参照したところ、

「functions.phpを作成してから下記のPHPコードをfunctions.phpに貼り付ければ@importなしでCSSが反映されるよ〜ん」

という事だったので「な〜んだ、簡単じゃん！」と子テーマディレクトリ(子テーマフォルダ)にfunctions.phpを作成してPHPコードを貼り付けてみました。しかし・・・

子テーマのCSSが反映されません！

@importは利用したくなかったので、いろいろググっていたところ、CodeX英語版Child ThemesにCSSを反映させるPHPコードを発見することができました。

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

下記のPHPコードを子テーマ内に作成したfunctions.phpに記述します。

<?pho
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( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
?>

上記のPHPコードを子テーマ内のfunctions.php貼り付けたところ、

@importなしでCSSを反映させることができました！

困った時にはCodeX英語版で調べてみることが大切みたいですね。
(^ ^;