Webの記録

WordPress カテゴリごとに部分的デザインを変えたい時

投稿日:2013年4月1日 更新日:

この記事は約 3 分で読めます。

lwordpress_logo_w200

WordPressで自分なりにテーマをカスタマイズしていると、カテゴリごとにデザインを変えたい!ということがあります。

ページまるごとデザイン(表示)を変える場合と、部分的に変える場合があると思います。
今回は、部分的に変える場合について(body にclassを付けてcssでデザインを制御する場合)のメモです。

classを付けるのも、2通り試してみました。
テーマによって、使い分けたら良いかと思います。


デザインを変える時の手段

手段はいろいろあるかと思うのですが、私が切り替える時に使っている方法は以下の2種類です。

  • カテゴリごとに読み込むphpファイルを変える(「category-●.php」など作って、テンプレートを切り替える)
  • body にclassを付けてcssで切り替える ← 今回はコチラ。


body にclassを付ける方法

カテゴリごとにclassが違えば、cssでデザイン(表示)を変えるコトは簡単!
静的サイトなら自分で任意のclassを作れるけれど、Wordpressなのでココは自動で表示されないと困ります。
そこで自動で出力させるには以下の方法があったのでメモしてみました。

よく使われるbodyにclassをつける方法

Codexにもちゃんと載ってる方法です。Codexもチェックしてみてください。

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

body class イメージ画像

自分でphpで記述しちゃう。

何故か上記で出来る時もあるんだけれど、出来ない事があって・・・。
以下の方法で試してみたら出来たので、こちらもメモ。コピペで簡単に使えます。

<body class="<?php if ( is_category() || is_single() ) { ?><?php $cat = get_the_category(); $cat = $cat&#91;0&#93;; { echo $cat -> category_nicename; } ?><?php } ?>">

body class イメージ画像2

結局。

両方ともclassを出力します。htmlソース上ではCodexに載ってる方法だとたくさんのclass名が出てきます。ここは制作しているテーマで、うまく使える方を使うって感じでしょうか?

ひとまず両方使ってみて問題がなかったので、使ってます。Codexに載っている方法が部分的に使えなかった原因はまだ判明してないので、見つけたらまた追記したいと思います。


おまけ

以前「WordPress オリジナルテーマでデザインをカテゴリごとに変更したい時」というも書いてます。今回はその補足となります。

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPressでオリジナルテーマ作りにチャレンジ7【page.php編】

この記事は約 1 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 前回までで一通り表示は出来るのですが、今回気になるのは固定ページ。 お問い合せフォームの上にページをい …

no image

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …

WordPressのウィジェットに表示した「タグクラウド」をカスタマイズしてみる

この記事は約 2 分で読めます。 WordPressのタグクラウドを表示させる方法として、「ウィジェットに表示させる方法」と、「オリジナルのsidebar.phpにテンプレートタグを記述させる方法」と …

no image

Facebook向けに最適なOGP設定の仕方をメモ。

この記事は約 1 分で読めます。 何かのサイトで「いいね!」をした時に、友達のニュースフィードに確実に出したいなら・・・OGPの設定が必要! ・・・と、いうワケで最近はサイトを作ったら「OGP設定」を …

no image

【jQuery】PCとiPhone,iPad,Androidを判別してページを切り替え(リダイレクト)したいとき

この記事は約 2 分で読めます。 以前はPCだけを意識してWebサイトを制作してきました。 しかし、最近はだんたんとPC以外(iPhone,iPad,Android)のタブレット系端末のアクセスが増え …