何につまずいたか
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での制作に便利だなぁと思ったので、今回備忘録をかねて初記事を書いてみました。
何か、誤りなどあれば、ご指摘いただけるとありがたいです。