WordPressの子テーマで親テーマのstyle.cssを上書き・反映する方法
WordPressで子テーマを触っているときに、子テーマのcssが反映できなかったときのメモです。
子テーマのcssが反映できない理由
WordPressの親テーマ・子テーマは、まず子テーマが読み込まれて、その後親テーマが読み込まれます。その際、子テーマのcssが上書きされてしまいます。
解決策としては、「親テーマよりも要素を付け足して優先度を高くする」や「importantなどを利用して優先度を高める」などもありますが、個人的に一番良いと思うのは下記の方法です。
親テーマが読み込まれてから子テーマを読み込むようにする。
「親テーマを子テーマで上書き」するようにすることで解決できます。
子テーマを作成するには style.css(必須) と functions.php を用意して作成している方が多いと思います。子テーマのcssを優先させるには、style.cssとは別にcssを作成します。仮にcustom-style.cssとします。
整理すると下記の3つが必要です。
1.style.css
2.functions.php
3.custom-style.css
それぞれ下記のように記述していきます。
style.css
/* Theme Name: ◯◯ Child Description: ◯◯ 子テーマ Template: ◯◯ */
これは何でもOKです。基本的な子テーマの設定を記述していきます。
functions.php
<?php add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' ); function enqueue_my_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); // 親テーマのcss wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom-style.css', array('parent-style')); // 子テーマのcss }
ここがポイントです!ここで親テーマのcssを先に読み込ませます。
custom-style.php
ここは上書きしたいcssを自由に書いてください。
以上で親テーマのstyle.cssを子テーマで上書きできます。
親テーマを上書きできず、importantなど使っている方はぜひ試してみてください。