カテゴリー毎にバナー画像を簡単に変える方法

スポンサーリンク

商品一覧(カテゴリー)ページで、テーマに合わせたバナー画像が出るといいですよね!

カスタマイズ後

一つのコードを入れるだけで、カテゴリー毎に自動で画像が入れ替わるコードです。

作業前の下準備

カテゴリーのスラッグを決める

商品一覧(カテゴリー)ページを作成する以前に、まずカテゴリーのスラッグをきちんと決めて用意しておきます。

例えば、

  • カテゴリー「食品」→ スラッグ「food」
  • カテゴリー「帽子」→ スラッグ「hat」
  • カテゴリー「北海道産」→ スラッグ「hokkaido」

といった感じです。

それぞれのスラッグは、[WordPressダッシュボード]>[投稿]>[カテゴリー]から設定出来ます。

カテゴリのスラッグ編集

既にスラッグを設定済みであれば問題ないですが、スラッグを変更すると一覧ページのURLも変更になりますので、安易な変更には十分ご留意下さい。

それぞれの商品一覧ページで表示したい画像を用意

次に画像を用意します。ここでポイントは、画像の名前です。

画像の名前に、先ほど決めた「スラッグ」を入れるようにします。ここの例では、上記の「食品」カテゴリー商品一覧用の画像であれば、cat_food.jpgとします。

Welcartカテゴリー別ヘッダーを用意

用意した画像は、利用中のテーマの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より無料素材を使いました。商用利用可のフリー素材も探すと色々ありますので、利用規約を確認した上で活用してみるのもいいと思います。

15 Responses to “カテゴリー毎にバナー画像を簡単に変える方法”

  1. you より:

    はじめまして!
    この内容すごく探してました!
    簡単に設置できましたありがとうございます。
    ただこの画像PCでは綺麗に配置できたのですが、
    iPhone等で確認すると途中で画像が切れてしまいます。
    何か良い方法はないでしょうか。
    申し訳ございませんがご教示頂けると幸いです。
    宜しくお願いします。

    • まめ子(管理人) より:

      初めまして、コメントありがとうございます。「画像が切れる」のがどのように画面上に見えているのかわからないですが、もし「画像が画面からはみ出す」(スマホ画面を横にずらすと見える)のであれば、スマホ用にレスポンシブのCSSを適用させればよいかと思います。お使いのテーマのスタイルシートにも寄りますが、パーセンテージを使って横幅を指定すれば良いはずです。

      #cat_img img{
         max-width: 100%;
      }
  2. you より:

    うぅー本当にありがとうございます(T_T)
    今やってみたところ、縦伸びになりました。
    945px✕450pxの画像を使用しており、
    横幅はiPhoneに収まりました、恐らく縦幅はそのままで表示されている為このような縦幅になっているのではと。

    本当に申し訳ありませんがご教示頂けると幸いです。

    • まめ子(管理人) より:

      あ、それでは・・・

      #cat_img img{
         max-width: 100%;
         height: auto;
      }

      としてみて下さいませ~。

  3. you より:

    あっ!できました!
    height:auto;
    ↑これを追加したら綺麗に表示されました!
    本当にありがとうございます。

    また別件で質問なのですが、特定のカテゴリだけバナーが表示されないように出来たりするのでしょうか?


    カテゴリー「食品」→ スラッグ「food」:バナー有り
    カテゴリー「帽子」→ スラッグ「hat」:バナー有り
    カテゴリー「北海道産」→ スラッグ「hokkaido」:バナー無し

    • まめ子(管理人) より:

      コメントが入れ違いになってしまいました!うまく行って良かったです。
      特定のカテゴリーを除外する場合は、以下のような条件分岐を使って下さい。

      <?php if( !is_category( 'hokkaido' ) ): ?>
        //ここに'hokkaido'以外で表示させたい内容
      <?php endif; ?>

      除外したいカテゴリーが複数の場合は、

      <?php if(!is_category( array( 'hokkaido', 'aomori') ) ): ?>

      とします。

      (ご参考)関数リファレンス/is category – WordPress Codex 日本語版

  4. you より:

    本当に申し訳ありません。
    昨日から試して見たのですが、
    どうしても出来ず再度ご連絡させて頂きました。

    もし、もしよければ最後に2点教えて頂けないでしょうか。

    <カテゴリ名>
    ——————————–
    4ptp   →非表示
    8ptp   →非表示
    sdesign →表示
    ——————————–

    1点目最初は全てのカテゴリでバナーが必要だと思い、
    以下記述をしておりました。
    ※画像サイズ940px 450px pngデータ

    slug;
    ?>

    <img src="/images/cat_.png” alt=”” width=”940″ height=”1″ />

    ここで問題になったのは、
    私のサイトでは1つの商品を登録する際、
    2つのカテゴリにチェックをしなければならないということ。
    その内の1つは必ずチェックしなければいけない

    商品カテゴリー(item) →チェック必須

    そうなると上記記述では上手くバナーが表示されませんでした。
    解決方法としては、商品(item)カテゴリーチェックを外すのみ。
    そうすると画像が表示されます。
    この2つのカテゴリーをチェックしても画像が表示されるようにするには、
    どうしたらよいのでしょうか。

    2点目
    昨日教えて頂いた以下記述は、

    //ここに’hokkaido’以外で表示させたい内容

    ↓の記述を消してから記述するのでしょうか。
    それとも↓のどこか間に記述するのでしょうか。

    slug;
    ?>

    <img src="/images/cat_.png” alt=”” width=”940″ height=”1″ />

    また↓ここはどう記述したら良いのでしょうか。
    //ここに’hokkaido’以外で表示させたい内容

    勉強不足で大変申し訳ございません。
    ご教示頂けますようお願い致します。

    • まめ子(管理人) より:

      1. スラッグの取得方法を変えてみて下さい。

      <?php
       $cat = get_category( $cat );
       $catslug = $cat->slug;
      ?>

      確かに、Welcartではitem以下にカテゴリーを作らなければいけないので、こちらのほうがいいですね。どうもすみません!記事内のコードも変更しておきますね。

      2. 紹介しているコードをまるまる入れます。< ?php if(): ?>のカッコ内の条件に一致する時だけ、バナーを表示させるということになります。この場合は、!is_category( ‘hokkaido’ )という条件を入れていますが、これは「hokkaidoというカテゴリーページ以外の場合」という意味です(「!」は「以外」)。< ?php endif; ?>は、条件を終える時に使います。

      条件式については以下のサイトが詳しかったので、ご参考になさってみて下さい。

      WordPressのテーマデザインでよく使うPHP構文、if-else文について – WordPressコミュニティ

  5. you より:

    出来ました!
    本当にありがとうございました!!!

  6. キムキム より:

    初めまして。
    カテゴリーごとにイメージを変更できないか探していたので、
    こちらの内容をアップして頂いて感謝です!
    因みに質問なのですが、単一記事「single.php」に適用できませんでしょうか?
    単一記事「single.php」に、同じコードを入れてみたのですが、表示されませんでした。
    良い方法がございましたら教えて頂ければ幸いです。
    お手数ではございますが、よろしくお願い致します。

    • まめ子(管理人) より:

      単一記事の場合は、get_the_category();を使ってカテゴリーを取得出来るのではと思います。複数のカテゴリーに属する場合は、ちょっと複雑な感じになりそうですが、そうでなければ、以下のような感じでスラッグを取得出来そうです(ループ内の場合)。

      $category = get_the_category(); 
      echo $category[0]->slug;

      検証してないので違っていたらスミマセン。

  7. wel より:

    除外させたいカテゴリーがあり動作を試みましたが、
    どうも全て表示されてしまいます。
    ご教授ください。
    カテゴリー名 テスト スラッグ TEST
    カテゴリー名 テスト2 スラッグ TEST2
    を除外したカテゴリーにバナーを表記する場合。

    slug;

    ?>

    <img src="/images/cat_.jpg” alt=”” width=”610″ height=”180″ />

    どうぞよろしくお願いいたします。

  8. wel より:

    すいません。
    除外したいカテゴリーが複数ある場合についての分岐を御教え頂けないでしょうか?

    • まめ子(管理人) より:

      こちらの記事などは如何でしょう。PHPの場合、「複数」のデータを使いたい場合は、大抵「array」を使うことになります。

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.