ふずブロ

ECショップやサービスを運営する人が日々の徒然を語るブログ。

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など使っている方はぜひ試してみてください。