WordPressのTwenty Twenty-Oneテーマの子テーマをダークモードに対応させた話し

WordPressのTwenty Twenty-Oneテーマを子テーマに対応させた話しの続きの話しです。ダークモードに対応させてみました。

WordPressのTwenty Twenty-Oneテーマを子テーマに対応させた話し

しかし、Wordpressの管理画面でダークモードをOnにすると、子テーマのstyle.cssの前に親テーマのstyle.cssが出現してデザインが元に戻ってしまいます。他に親テーマのstyle.cssが登録しているところが見つかりませんので、おかしな動作です。

おかしいとも言ってられないので、親テーマのstyle.cssの後に子テーマのstyle.cssが来るようにします。こちらのサイトを参考にしました。

テーマにスタイルシート（cssファイル）を正しい方法で読み込む

変更したのはfunction.phpのところです。

function theme_enqueue_styles() {
	wp_enqueue_style( 'child-style',
		get_stylesheet_directory_uri() . '/style.css', array( 'twenty-twenty-one-style' ) 
	);
	wp_enqueue_style( 'child-dark-style',
	get_stylesheet_directory_uri() . '/assets/css/style-dark-mode.css', array( 'tt1-dark-mode' ) 
	);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

最初のwp_enqueue_style()の第3引数に親テーマのIDを指定して、style.cssの順番を明示的に指定しています。２番めのwp_enqueue_style()がダークモードのCSSです。

これで、ダークモードに対応できましたが、本来ならば親テーマのstyle.cssは必要ないので読み込むのも無駄ですし、どうして最初に動かなかったかは不明です。