bodyのidに今のページのスラッグ名を、classに先祖ページのスラッグ名を追加する

個人の技術ブログのDBのテーブルを自分で手動で削除しておきながら

「ブログが消えた―！！！！！！」

と大騒ぎしていた石川です。

はっはっは、想定外の事は起こるもの。みなさんもバックアップはちゃんとしましょうね！

さて、本題です。

ページによってCSSで表示を制御したい時ってありますよね。
静的HTMLでサイトを作る時はbodyタグにidやclass名を付けて制御する事も多いと思います。
今回はWordPressでbodyタグにidやclass名を付与する方法を少しご紹介します。

bodyタグのidにスラッグを割り当てる

[sourcecode language=”php”]
<body id="<?php echo esc_attr( $post->post_name ); ?>">
[/sourcecode]

現在のページの情報をclass名で出力

で、更に下記のように書くと、WordPressは今のページの情報（投稿タイプや投稿id、どのテンプレートが適応されているかなど）をclass名で出力してくれます。

[sourcecode language=”php”]
<body <?php body_class(); ?> id="<?php echo esc_attr( $post->post_name ); ?>">
[/sourcecode]

親（先祖）ページの情報をclass名に追加

普通にbody_class()を追加しただけでは親（先祖）階層毎にCSSを制御する事が出来ません。
そこで、functions.php に下記のように書くと、親（先祖）階層のスラッグ名がbodyのclassにも追加されるようになります。

[sourcecode language=”php”]
/——————————————-/
/* 先祖ページのスラッグ名を body class に追加
/——————————————-/
function add_ancestor_class_name($classes) {
global $post;
if (is_page() && (!is_front_page()) ){
if($post->ancestors){
foreach($post->ancestors as $post_anc_id){
$post_id = $post_anc_id;
}
} else {
$post_id = $post->ID;
}
$ancestor_post = get_page($post_id);
$ancestorSlug = $ancestor_post->post_name; //スラッグ
$classes[] = $ancestorSlug;
}
return $classes;
}
add_filter(‘body_class’,’add_ancestor_class_name’);
[/sourcecode]

カスタムヘッダーなど使っている場合は先祖の項目には自動的にclass名が付与されたりするので、あまり出番は無いかもしれませんが、メニューを手動で作っている場合には便利なのではないかなと思います。

Follow me!

@vektor_inc

Author Profile

石川栄和代表取締役

名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
2018 WordCampOsaka セッションスピーカー
2017 WordCampKyoto セッションスピーカー
2016 WordCampTokyo LT
2016 WordCampKansai ハンズオン世話役
2015 WordCampTokyo セッションスピーカー
2015 WordCampKansai セッションスピーカー
2014 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCampTokyo セッションスピーカー（パネラー）
2013 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCrabFukui セッションスピーカー
他

Latest entries

シンプルでカスタマイズしやすいWordPressテーマ

※このエリアは多機能プラグイン「VK All in One Expansion Unit」で一括挿入しています。投稿タイプ毎または記事毎に表示内容を変更する事も可能です。

Lightningは twitter Bootstrap ベースのシンプルでカスタマイズしやすいWordPressテーマです。
プラグイン VK All in One Expansion Unit とセットで使う事でビジネスサイトにもブログにも活用できます。

詳しくはこちら

カテゴリー: WordPress

タグ: wordpress