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

WordPress

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

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

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

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

 

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

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

 

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

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

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

 

PR

関連記事