【WordPress】子テーマを使った時に親テーマのCSSが反映されない問題の対処方法

【WordPress】子テーマを使った時に親テーマのCSSが反映されない問題の対処方法

WordPressでは子テーマを使ったときは、基本的に子テーマに存在するファイルが優先的に使用されます。

style.cssについても子テーマのCSSが優先されてしまうので、親テーマのスタイルを引き継げなくなってしまいます。

そんな、子テーマを適用したら親テーマのスタイルが読み込まれなくなった時の対処方法です。

子テーマを適用したらスタイルが崩れた

親テーマのCSSが読み込まれていないため、真っ白な見た目になってしまった

よっひー(@yosiakatsuki)です。

子テーマを作って、有効化してみたらデザインが大きく崩れた…

自分で必要なファイルを用意して子テーマを作った場合によくそういった状況に出会うかもしれません…

上の画像のように、「どうもCSSが何も反映されていないようだ…」という状況になった場合は親テーマのCSSが読み込まれていないかもしれません。

そんなときは次のコードを追記してみてください!

親テーマのCSSを反映させるカスタマイズ

子テーマを使った時に親テーマのCSSを適用させる為に、以下のコードを子テーマのfunctions.phpに追記します

function my_enqueue_styles() {
        // 親テーマのCSS読み込み
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

get_template_directory_uri()で親テーマのテーマフォルダまでのURLを取得し、親テーマのstyle.cssを読み込むよう命令をしています。
(子テーマのテーマフォルダまでのURLを取得したい場合はget_stylesheet_directory_uri()を使います)

親テーマのCSSが無事に読み込まれました!

たったこれだけですが、親テーマのCSSが無事読み込まれて、親テーマのデザインが戻ってきました!

めでたしめでたしです!

よっしーのひとこと

よしあかつき

子テーマ配布までしているテーマを使う場合、親テーマのCSSが反映される状態で用意されてたりするので、いざ自分で1から子テーマ作った時に「あ!そうだった…」ってなりがちですね。

ではまた