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

スマホ用にWebクリップアイコンを設置してみた

この記事は約 1 分で読めます。 Webクリップアイコンの設置はとても簡単!アイコン素材をちゃんとアップして、1行link要素を書くだけです。 iPhone、iPad、Androidでホーム画面にショ …

no image

XAMPP(Bitnami)で簡単にWordPressローカル環境を構築してみた。(for Windows)

この記事は約 1 分で読めます。 以前、「WordPressテスト環境をXAMPPで作ってみた♪ for Windows」でWindowsにXAMMPでローカル環境を作ってWordPressを入れてみ …

no image

WordPress はじめてのオリジナルテーマ作り。【まとめ】

この記事は約 1 分で読めます。 昨年の11月に、私はWordpressのオリジナルテーマをはじめて作成しアップしました。 はじめてなのでまだ高度な事は出来ていませんが、今まで幾つか書きためた記事をこ …

no image

WordPressのオベンキョウ③ アクセス解析ツール導入

この記事は約 1 分で読めます。 「Google Analytics」を先日始めてみて・・・。 少しずつ内容が見えてきました。 でも、まだまだ・・・長期で見ていかないといけないかなぁと思ってます。 今 …

no image

Facebookの個人プロフィールに勤務先のFacebookページをリンクさせる方法

この記事は約 1 分で読めます。 Facebookの個人プロフィールに、勤務先を入れた時に勤務先のFacebookページとうまくリンクされない事があります。 案外、ココがクリックされているようで・・・ …