子テーマのCSSが読み込まれていない時に読む記事【一発で解決!】

子テーマに書いたCSSがどうも反映されていないっぽい…。コードの記述間違いも無さそうだし、一体何が原因なんだ…。

 

子テーマのCSSが反映されない原因として有力なのが、「function.php」に“とある記述”が無いというもの。

 

その場合、子テーマのstyle.cssにコードをコピペするだけで解決できるので、参考にしてみてください。

 

 

子テーマのstyle.cssが読み込まれる仕組みについて

 

テーマの仕組みとして、通常は「親テーマのstyle.cssが先に読み込まれる→その後に子テーマのstyle.cssが読み込まれて上書きされる」という仕様になっています。

 

つまり、親テーマのCSSより子テーマのCSSが優先的に反映されるってことですね。

 

 

なぜ子テーマのCSSが読み込まれないのか?

 

にも関わらず、なぜ子テーマのCSSが読み込まれないことがあるのでしょうか?

 

理由は単純で、「子テーマのCSSを読み込むように指定されていないから」です。

 

親テーマのCSSが優先されるテーマを使っている場合や、後から自分で子テーマのstyle.cssを作成した場合などに起こりえるケースですね。

 

 

子テーマのCSSを後から読み込むように指定する方法

 

CSSは後から書いたもの(ファイルの下に書いたもの)が優先される仕様になっているので、子テーマのstyle.cssを親テーマのstyle.cssの後に読み込ませることが出来れば、子テーマのCSSが反映されるようになります。

 

そのためには、子テーマの「function.php」に下記のコードを記述しましょう。

 


// 子テーマのstyle.cssを後から読み込む
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘style’)
);
}

 

 

これで、子テーマのstyle.cssが後から読み込まれる(=優先度が上がる)ようになります。

 

こちらの記事でも解説しています→【コピペで終了】WordPressの子テーマの作成方法 | リュウセイブログ

 

 

まとめ

 

子テーマの「function.php」に「子テーマのstyle.cssを後から読み込むコード」の記述が無かった場合は、今回の方法で解決すると思います。

 

また、CSSはページの読み込み速度に影響(=SEOに影響)を与えるので、使わないCSSは極力削除するようにしましょう。

 

それでは、ここまで読んでいただきありがとうございました。
チャオ(・∀・)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です