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.

関連記事

no image

右クリック禁止で画像のコピーガード(ドラッグ禁止対策追加)

この記事は約 2 分で読めます。 【2015.2.20追記】設置方法にドラッグ禁止についても、対策追加しました! 今、あるところのサイト制作をしているのですが・・・。 「画像の著作権を守るため、画像の …

no image

X SERVERにa-blog cmsをインストールしてみた。

この記事は約 1 分で読めます。 先日「「AMPPS」にa-blog cmsのローカル環境を作ってみる」でローカル環境にa-blog cmsをインストールしてみました。 今回、a-blog cmsの勉 …

no image

Creative Cloud デスクトップアプリケーションが何も表示しなくなったとき

この記事は約 1 分で読めます。 Adobe Creative Cloudを使用していて、ディスクトップから起動させようとすると、画面が真っ白になってしまいました。 それぞれ単体のソフト(Photos …

no image

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

この記事は約 1 分で読めます。 よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。 これがあると、その記事を読むかブックマークするかを判断出来て便利だ …

no image

検索エンジンに登録する方法。

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 いくつもあると思うのですが、今回は検索エンジンに登録する方法にチャレンジしたいと思います。 いろいろ方法をググっていたら、「Goo …