WordPress開発でBrowserSyncを使用している際に、CSSの変更がリアルタイムに反映されない問題が発生する場合があります。特に親テーマと子テーマのstyle.cssが同時に存在する場合、BrowserSyncが親テーマのstyle.cssの変更のみを監視し、子テーマの変更が反映されないことが原因となるケースがあります。
原因
BrowserSyncはファイルの監視対象を指定し、変更があればブラウザにリアルタイムで反映させます。しかし、WordPressテーマの構造上、親テーマと子テーマそれぞれにstyle.cssが存在することがあり、BrowserSyncが子テーマではなく親テーマのCSSのみを優先して監視してしまうことがあります。
解決策：子テーマのCSSファイル名を変更
最も簡単な解決方法は、子テーマのCSSファイルの名前を変更することです。例えば、style.cssをchild.cssなどにリネームすることで、BrowserSyncが親テーマのstyle.cssと区別して監視ができます。
手順
- WordPressの子テーマディレクトリにある
style.cssファイルの名前をchild.css（または任意の名称）に変更します。 - 子テーマの
functions.phpファイルを編集し、以下のように新しいCSSファイルを読み込むコードを追加します。
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/child.css', array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
注意点
この変更を行うと、child.cssがテーマで使用するCSSファイルとして読み込まれ、リアルタイムでCSS変更が反映されるようになります。また、BrowserSyncの設定で監視するファイルとしてchild.cssを追加することで、確実に子テーマのCSS変更がブラウザに反映されます。
まとめ
子テーマでCSSがリアルタイムに反映されない問題は、子テーマのCSSファイル名を変更することで解決できます。この方法により、BrowserSyncが確実に子テーマのCSSファイルを監視し、開発効率が向上します。