CSSのためのテンプレートタグ３
WordPresssサイトの制作において、「このカテゴリーのときはこの見出し」「投稿ページのときは余白多めに」なんてことはよくある話です。
そんなとき、CSSをあてるためにclass名をつけるわけですが、ワードプレスではそのクラスが「自分で設定する」というより「勝手に吐き出されるものを使う」ことが多くなります。IDとかスラッグとか。
今回はその「クラスを吐き出させるためのタグ」を少しまとめておきたいと思います。
bodyタグにクラスをつけてテンプレートごとにデザインする【body_class】
<body <?php body_class(); ?>>
【出力例】＜body class=”page page-id-34 page-template page-template-default logged-in”＞
こうしておくと固定ページの場合は「page」、アーカイブページの場合は「archive」、投稿ページの場合は「single」、IDやスラッグが自動で吐き出されるようになる。
ページごとにデザインを変えたい時はこのクラスを使用してCSSをあてる。
ループにクラスをつけてカテゴリーごとにデザインする【post_class】
<div <?php post_class(); ?>>
【出力例】＜div class=”post post-123 category-news”＞
index.php、single.php、archive.php など、ループにクラスをつけることができる。
カテゴリーやタグごと、あるいはカスタム投稿タイプごとにデザインを変えたい時に。
投稿のIDを取得してデザインする【the_ID】
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
【出力例】＜article id=”post-123″ class=”post post-4564 category-news”＞
わざわざIDを吐き出させて、それにCSSをあてることはあまりないとは思うけど。
特定の投稿だけデザインを変えたい時に。
まとめ
静的サイトは「クラス名を自分でつける」→「CSSをあてる」
動的サイトは「クラス名を自動でつける」→「吐き出されたクラス名を把握」→「CSSをあてる」
この概念、手順の違いに慣れるのにも一苦労ですよね・・・