個人の技術ブログの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名が付与されたりするので、あまり出番は無いかもしれませんが、メニューを手動で作っている場合には便利なのではないかなと思います。
この記事を書いた人
- 代表取締役
-
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他
最近の投稿
WordPress2025年4月9日AIコーディング時代の到来によって手を動かすだけのエンジニアは完全に淘汰されるのか？
WordPress2024年12月25日2024年リリースのイチオシ機能を一挙紹介！- WordPress2024年12月1日ベクトル製品リリースタイムラインから見る開発の裏話と進化の歴史
- WordPress2024年10月30日ブロックテーマで編集権限のユーザーでもメニューを編集できるようにする
これまでにないスピードで
自分好みの WordPress サイトが
立ち上がる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
これまでにないスピードで
自分好みの WordPress サイトが立ち上がる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
爆速!!１分でデモサイトと同じ
ホームページができる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。