かわたま.net

Enjoy Creative! かわたまのwebメモ

【WordPress】bodyにページごと異なるidやclassを追加する実装手順

2014 July 30

Tag:

wordpressは共通のヘッダー(header.php)を使用するので、何も指定しないままだとページごとに異なるcssを当てたい場合に不便です。
ページごとに異なるcssを当てたいときは、bodyにそれぞれidやclassを追加させるタグを追記します。

bodyにclassを追加

header.php内のbodyに下記を追記します。
投稿タイプ、適応しているテンプレートファイル名などがclass名で自動的に出力されます。

//header.php
<body <?php body_class(); ?>>

bodyにidを追加

header.php内のbodyに下記を追記します。
bodyのidにスラッグ、またはパーマリンクで設定されている値がIDに追加されます。

//header.php
<body id="<?php echo esc_attr( $post->post_name ); ?>">

bodyにclass,idをまとめて追加

class,idをまとめて書くこともできます。

//header.php
<body <?php body_class(); ?> id="<?php echo esc_attr( $post->post_name ); ?>">

これでページごと異なるID、classが追加されます☆

参考にした記事:http://www.coneru-web.com/