カテゴリー毎にバナー画像を簡単に変える方法
スポンサーリンク
商品一覧（カテゴリー）ページで、テーマに合わせたバナー画像が出るといいですよね！
一つのコードを入れるだけで、カテゴリー毎に自動で画像が入れ替わるコードです。
作業前の下準備
カテゴリーのスラッグを決める
商品一覧（カテゴリー）ページを作成する以前に、まずカテゴリーのスラッグをきちんと決めて用意しておきます。
例えば、
- カテゴリー「食品」→ スラッグ「food」
- カテゴリー「帽子」→ スラッグ「hat」
- カテゴリー「北海道産」→ スラッグ「hokkaido」
といった感じです。
それぞれのスラッグは、［WordPressダッシュボード］＞［投稿］＞［カテゴリー］から設定出来ます。
既にスラッグを設定済みであれば問題ないですが、スラッグを変更すると一覧ページのURLも変更になりますので、安易な変更には十分ご留意下さい。
それぞれの商品一覧ページで表示したい画像を用意
次に画像を用意します。ここでポイントは、画像の名前です。
画像の名前に、先ほど決めた「スラッグ」を入れるようにします。ここの例では、上記の「食品」カテゴリー商品一覧用の画像であれば、cat_food.jpgとします。
用意した画像は、利用中のテーマのimagesフォルダに入れておきます。
商品一覧用のテンプレートにコードを挿入
商品一覧（カテゴリー）用のテンプレートは、例えばarchive.phpやcategory.phpといったものです。
その一覧表示をしているテンプレートの中で、画像を表示したい場所に、以下のコードを入れます。
（2014/6/6 スラッグの取得方法を改善）
<?php
$cat = get_category( $cat );
$catslug = $cat->slug;
?>
<div id="cat_img">
<img src="<?php bloginfo('template_url'); ?>/images/cat_<?php echo $catslug; ?>.jpg" alt="<?php single_cat_title(); ?>" width="650" height="290" />
</div>
前半でカテゴリーのスラッグを取得。後半でそのスラッグを引用して、画像のURLの一部として構成させています。カテゴリー毎にスラッグと画像URLが、専用のものに自動的に変わる仕組みです。
※widthとheightの値は、用意した画像に合わせてご変更下さい。
カテゴリースラッグを取得・出力する部分をタグに変えれば、タグの商品一覧ページでも同様のことが行えます。
ちなみに当サイトのテスト環境での表示は、こんな感じになりました。
カテゴリーバナー設置前
カテゴリーバナー設置前後
カテゴリー毎にイメージ画像を用意するだけで、よりキャッチーな感じになりますね！
上記バナー例ではfood.fotoより無料素材を使いました。商用利用可のフリー素材も探すと色々ありますので、利用規約を確認した上で活用してみるのもいいと思います。
はじめまして！
この内容すごく探してました！
簡単に設置できましたありがとうございます。
ただこの画像PCでは綺麗に配置できたのですが、
iPhone等で確認すると途中で画像が切れてしまいます。
何か良い方法はないでしょうか。
申し訳ございませんがご教示頂けると幸いです。
宜しくお願いします。
初めまして、コメントありがとうございます。「画像が切れる」のがどのように画面上に見えているのかわからないですが、もし「画像が画面からはみ出す」（スマホ画面を横にずらすと見える）のであれば、スマホ用にレスポンシブのCSSを適用させればよいかと思います。お使いのテーマのスタイルシートにも寄りますが、パーセンテージを使って横幅を指定すれば良いはずです。
#cat_img img{ max-width: 100%; }うぅー本当にありがとうございます(T_T)
今やってみたところ、縦伸びになりました。
945px✕450pxの画像を使用しており、
横幅はiPhoneに収まりました、恐らく縦幅はそのままで表示されている為このような縦幅になっているのではと。
本当に申し訳ありませんがご教示頂けると幸いです。
あ、それでは・・・
#cat_img img{ max-width: 100%; height: auto; }としてみて下さいませ～。
あっ！できました！
height:auto;
↑これを追加したら綺麗に表示されました！
本当にありがとうございます。
また別件で質問なのですが、特定のカテゴリだけバナーが表示されないように出来たりするのでしょうか？
例
カテゴリー「食品」→ スラッグ「food」：バナー有り
カテゴリー「帽子」→ スラッグ「hat」：バナー有り
カテゴリー「北海道産」→ スラッグ「hokkaido」：バナー無し
コメントが入れ違いになってしまいました！うまく行って良かったです。
特定のカテゴリーを除外する場合は、以下のような条件分岐を使って下さい。
除外したいカテゴリーが複数の場合は、
とします。
（ご参考）関数リファレンス/is category – WordPress Codex 日本語版
本当に申し訳ありません。
昨日から試して見たのですが、
どうしても出来ず再度ご連絡させて頂きました。
もし、もしよければ最後に２点教えて頂けないでしょうか。
＜カテゴリ名＞
——————————–
4ptp →非表示
8ptp →非表示
sdesign →表示
——————————–
１点目最初は全てのカテゴリでバナーが必要だと思い、
以下記述をしておりました。
※画像サイズ940px 450px pngデータ
slug;
?>
<img src="/images/cat_.png” alt=”” width=”940″ height=”1″ />
ここで問題になったのは、
私のサイトでは１つの商品を登録する際、
２つのカテゴリにチェックをしなければならないということ。
その内の１つは必ずチェックしなければいけない
商品カテゴリー（item） →チェック必須
そうなると上記記述では上手くバナーが表示されませんでした。
解決方法としては、商品（item）カテゴリーチェックを外すのみ。
そうすると画像が表示されます。
この２つのカテゴリーをチェックしても画像が表示されるようにするには、
どうしたらよいのでしょうか。
２点目
昨日教えて頂いた以下記述は、
//ここに’hokkaido’以外で表示させたい内容
↓の記述を消してから記述するのでしょうか。
それとも↓のどこか間に記述するのでしょうか。
slug;
?>
<img src="/images/cat_.png” alt=”” width=”940″ height=”1″ />
また↓ここはどう記述したら良いのでしょうか。
//ここに’hokkaido’以外で表示させたい内容
勉強不足で大変申し訳ございません。
ご教示頂けますようお願い致します。
1. スラッグの取得方法を変えてみて下さい。
確かに、Welcartではitem以下にカテゴリーを作らなければいけないので、こちらのほうがいいですね。どうもすみません！記事内のコードも変更しておきますね。
2. 紹介しているコードをまるまる入れます。のカッコ内の条件に一致する時だけ、バナーを表示させるということになります。この場合は、!is_category( ‘hokkaido’ )という条件を入れていますが、これは「hokkaidoというカテゴリーページ以外の場合」という意味です（「!」は「以外」）。は、条件を終える時に使います。
条件式については以下のサイトが詳しかったので、ご参考になさってみて下さい。
WordPressのテーマデザインでよく使うPHP構文、if-else文について – WordPressコミュニティ
出来ました！
本当にありがとうございました！！！
それはよかったです！
初めまして。
カテゴリーごとにイメージを変更できないか探していたので、
こちらの内容をアップして頂いて感謝です！
因みに質問なのですが、単一記事「single.php」に適用できませんでしょうか？
単一記事「single.php」に、同じコードを入れてみたのですが、表示されませんでした。
良い方法がございましたら教えて頂ければ幸いです。
お手数ではございますが、よろしくお願い致します。
単一記事の場合は、
get_the_category();を使ってカテゴリーを取得出来るのではと思います。複数のカテゴリーに属する場合は、ちょっと複雑な感じになりそうですが、そうでなければ、以下のような感じでスラッグを取得出来そうです（ループ内の場合）。検証してないので違っていたらスミマセン。
初めまして。
こちらの記事を参考にさせて頂いていますが、上記の単一記事に適用する方法で記載してみたのですが、画像が表示されません。（ちなみにカテゴリページでは最初に書かれている記載で無事画像が表示されています。）
たぶん（ループ内の場合）という所で引っかかっているのだと思います。
非常に初歩的な質問で申し訳ないのですが、ループ内とするのはどのように記載すればいいでしょうか？
宜しくお願いします。
除外させたいカテゴリーがあり動作を試みましたが、
どうも全て表示されてしまいます。
ご教授ください。
カテゴリー名 テスト スラッグ TEST
カテゴリー名 テスト2 スラッグ TEST2
を除外したカテゴリーにバナーを表記する場合。
slug;
?>
<img src="/images/cat_.jpg” alt=”” width=”610″ height=”180″ />
どうぞよろしくお願いいたします。
すいません。
除外したいカテゴリーが複数ある場合についての分岐を御教え頂けないでしょうか？
こちらの記事などは如何でしょう。PHPの場合、「複数」のデータを使いたい場合は、大抵「array」を使うことになります。