[WordPress] ページごと固有のクラスを自動で設定したい
ある固定ページ特有のCSSを書こうとするとき、都度クラス名を決めるのは面倒です。
せっかく固定ページにスラッグ名が振れるので、それをクラス名として使えたら、コーディングが楽になります。
そこで、bodyタグに自動でページ固有のクラスを設定する方法のご紹介です。
サンプルコード
html(PHP)
<body <?php body_class(); ?>>
functions.php
function add_class_page_slug($classes) {
if( is_page() ) {
$page = get_post( get_the_ID() );
$classes[] = 'page-'. $page->post_name;
}
return $classes;
}
add_filter('body_class', 'add_class_page_slug');
仕組み、解説、補足など
body_classという関数にadd_filterで処理を追加しています。
この関数で設定するクラスに、自前で定義した「page-スラッグ名」という形式のクラスを追加しろ、というコードになります。
これで、例えばスラッグ名が「about」という固定ページなら、「.page-about」というクラスがbodyタグに設定されます。
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。