今回は【WordPress】各ページ背景画像の指定についてbody_classを解説になります!
こんな方に読んでほしい
- WordPressを学び始めた方へ
- WordPressのbody_classについて解説していきます。
- 今回はWordPressの「各ページ背景画像の表示」について解説しております。
body_classとは
WordPressにはトップページや固定ページ、投稿ページなどたくさんのページがあります。
そのため、ページ毎にCSSを変更することが多くあります。そのような時は「body_class」を使います。
body_classが出力する文字列は以下のようになります。
トップページ | body class=”home … など” |
---|
個別投稿ページ | body class=”sinle posid-{記事ID} … など” |
---|
固定ページ | body class=”page posid-{記事ID} … など” |
---|
設定について
bodyタグを以下のように変更します。
変更後は「GoogleChrom」の「検証ツール」でbodyタグを確認してください。
<body>
<!--↑ 変更前 ↑-->
<!--↓ 変更後 ↓-->
<body <?php body_class(); ?>>
HTML上で確認すると以下のようになります。
class属性が付与され「home」は付きます。
<body>
<!--↑ 変更前 ↑-->
<!--↓ 変更後 ↓-->
<body class="home blog logged-in">
固定ページについて
上記のように各ページ毎にデザインを変更する場合があります。
その際には、各ページ毎の「body
」タグを確認してください。
<!--↓ ページA 例:news ↓-->
<body class="page-template page-template-page-news page-template-page-news-php page page-id-555 logged-in">
<!--↓ ページB 例:about ↓-->
<body class="page-template page-template-page-about page-template-page-about-php page page-id-565 logged-in">
<!--↓ ページC 例:works ↓-->
<body class="page-template page-template-page-works page-template-page-works-php page page-id-570 logged-in">
page-template-page-〇〇
や、page page-id-〇〇
など、
スラッグ名、ページidの番号が反映されます。
上記のようにスラッグ名が反映するので日本語は避けるようにしましょう。
CSSについて
上記で解説した、page-template-page-〇〇
などを用いてCSSでレイアウトしていきます。
書き方は以下のようになります。
/* ページA 例:news */
.page-template-page-news {}
/* ページB 例:about */
.page-template-page-about {}
/* ページC 例:works */
.page-template-page-works {}
上記のようにクラス名を付与し各自レイアウトが可能になります。
まとめ
今回はこれで以上です。
- POINT
- WordPressbody_classについて解説しました。
- 上記のようにスラッグ名が反映するので日本語は避けるようにしましょう。
- 変更後は「GoogleChrom」の「検証ツール」でbodyタグを確認してください。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事