WordPressでサイトを構築する時にページの種類やカテゴリーによってデザインを変更したいときに知っておくと便利なこと

WordPress

WordPressでサイトを構築しようとすると「ページの種類でデザインを変更したりカテゴリーごとに色を変えたりしたいなぁ」と思うことがあります。そんな時に知っておくと便利なTipsです。

【パターン１】body_class()を活用してページの種類によりデザインを変更する

body_class()は、class属性として1つ以上のクラスを出力します。

テンプレートファイルには、この様に記述します。

<body <?php body_class( $class ); ?>>

 

出力されるHTMLには、class属性も含めて出力されます。
※カテゴリースラッグが「htmlcss」のページのもの

<body class="archive category category-htmlcss category-3 logged-in">

この様に、出力されるクラスがあらかじめ分かっていれば、スタイルシートに記述してページごとにデザインを変更することが可能です。出力されるクラス名に関しては、↓こちらをご覧ください。

 

【パターン２】カテゴリースラッグをclass名にしてカテゴリーごとにデザインを変更する

パターン１で書いたbody_class()を使えば、カテゴリーページごとにデザインのテイストを変更することも可能です。しかし、class名が複数出力されるのでシンプルにしたい場合は、カテゴリースラッグをclass名にすることでシンプルにできます。

<?php
	//カテゴリースラッグの取得
	$cat = get_the_category();
	$catslug = $cat[0]->category_nicename;
?>

<div id="content" class="<?php echo $catslug; ?>">

bodyタグに付けることもできるし、例のようにコンテナ用のdivに付けることも可能。

<div id="content" class="htmlcss">

 

関連記事