何につまずいたか

WordPressでホームページ制作をしているときに、「フロントページのヘッダーにだけ適用したいcssがある場合どうしたらいいか？」ということがあったので、その解決法をまとめました。
ヘッダーに限らず特定のページにだけcssを適用させたいときに使えると思います。
ちなみに開発環境は、本番環境ではなく「Local by flywheel」を使用しています。(WordPress Version 5.2.9)

解決方法

ヘッダーのファイル(header.php)に

header.php

<?php body_class(); ?>

を入れることで解決できました。

入れる場所はbodyタグの中です。

header.php

<body <?php body_class(); ?>>

これを入れてあげることで、body要素に新たなclass属性が付与されます。

どんなクラス属性が付与されているかは、chromeのデベロッパーモード(検証モード)で確認していただければ分かります。
例えば、フロントページ(WordPressの表示設定で固定ページ表示にした)の場合

<body class="home  page page-id-***> <!-- ***にはidの番号が入ります -->

「home」というクラス属性が新たに付与されるかと思います。

そのクラス属性を使ってcssを書いてあげればフロントページのデザインだけ変えることが出来ます。

style.css

body {
  background-color: white; /* homeクラスが付与されたフロントページの背景は白 */
}

body:not(.home){
  background-color: red; /* homeクラスが付与されていないその他のページの背景は赤 */
 }

参考

テンプレートタグ/body class - WordPress Codex 日本語版
こちらのサイトを見ていただけるとフロントページ以外にもどのようなクラス属性が付与されるのか等、記載されています。

おわりに

フロントページのヘッダーにだけ背景画像を入れたい場面があったのですが、そのために複数のヘッダー用ファイルを作るより簡潔な方法かなと思います。
知っているとWordPressでの制作に便利だなぁと思ったので、今回備忘録をかねて初記事を書いてみました。
何か、誤りなどあれば、ご指摘いただけるとありがたいです。