5丁目通信(仮称)

とある5丁目で活動する還暦を過ぎたWebプログラマーの覚え書きです。それとかかってくる迷惑電話や、家業のアパート経営について。

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


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

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

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

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

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の順番を明示的に指定しています。2番めのwp_enqueue_style()がダークモードのCSSです。

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

著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
¥2,399 (2024/03/24 20:51時点 | 調べ)

なんやかんやでWordPressのサイト構築で躓くのは、PHPのなのでした。

ブログランキング・にほんブログ村へ 人気ブログランキング

“WordPressのTwenty Twenty-Oneテーマの子テーマをダークモードに対応させた話し” への1件のコメント

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