「WBS」「ガイアの夜明け」「がっちりマンデー!!」「カンブリア宮殿」などのテレビ番組で気になったニュースからお金と仕事を考えて豊かな生活を目指します。

[テンプレートカスタマイズ] Bitでカテゴリーを表示する

2016年2月18日

カラーミーショップには無料版・有料版と様々なテンプレートが用意されています。

無料版の中でレスポンシブ対応でシンプルなデザインで人気の「Bit」のカスタマイズ方法を記載していきます。

今回はカテゴリーのカスタマイズ方法です。

カテゴリーのカスタマイズ

bitのテンプレートにはカテゴリーを表示する機能がありません。
「ALL ITEMS」と表示されている部分を変更して、カテゴリーを表示するカスタマイズを紹介させて頂きます。

ただし、この方法はカテゴリーの種類が少ない場合のみに有効です。
カテゴリーが多い場合はこのカスタマイズは向きません。
あと小カテゴリーも対応していません。表示されると思いますが推奨しません。

HTMLの編集

カラーミーショップの上部メニューの「ショップ作成」から「デザイン」を選択してください。

「デザイン編集」をクリックしてください。

「共通」の「HTML/CSS編集」をクリックしてください。

表示されたHTMLとCSSなどをTeraPadなどのテキストエディタにコピー&ペーストしてください。

    <ul class="inline">
        <li><a href="<{$home_url}>">home</a></li>
        <li><a href="/?mode=srh&cid=&keyword=">all items</a></li>
        <li><a href="<{$sk_url}>">ordering info</a></li>
        <{if $manager_url != ""}><li><a href="<{$manager_url}>">blog</a></li><{/if}>
        <li><a href="<{$view_inq_url}>">contact</a></li>
        <{* フリーページをヘッダーメニューに追加 (PC用) *}>
        <!-- <li><a href="?mode=f1">freepage1</a></li> -->
        <!-- <li><a href="?mode=f2">freepage2</a></li> -->
    </ul>

上記の部分を探してください。(初期状態でしたら68行目になります。)
この「<li><a href=”/?mode=srh&cid=&keyword=”>all items</a></li>」部分を変更します。

変更後がこちらです。

    <ul class="inline">
        <li><a href="<{$home_url}>">home</a></li>
        <!-- カテゴリーリスト -->
        <{section name=num loop=$category}>
            <li><a href="<{$category[num].link_url}>"><{$category[num].name}></a></li>
        <{/section}>
        <!-- // カテゴリーリスト -->
        <li><a href="<{$sk_url}>">ordering info</a></li>
        <{if $manager_url != ""}><li><a href="<{$manager_url}>">blog</a></li><{/if}>
        <li><a href="<{$view_inq_url}>">contact</a></li>
        <{* フリーページをヘッダーメニューに追加 (PC用) *}>
        <!-- <li><a href="?mode=f1">freepage1</a></li> -->
        <!-- <li><a href="?mode=f2">freepage2</a></li> -->
    </ul>

そのままコピー&ペーストをして頂いても大丈夫です。
これでショップ画面上にカテゴリーが表示されるようになります。

「all items」のボタンを残す場合は以下のようにしてください。

    <ul class="inline">
        <li><a href="<{$home_url}>">home</a></li>
        <li><a href="/?mode=srh&cid=&keyword=">all items</a></li>
        <!-- カテゴリーリスト -->
        <{section name=num loop=$category}>
            <li><a href="<{$category[num].link_url}>"><{$category[num].name}></a></li>
        <{/section}>
        <!-- // カテゴリーリスト -->
        <li><a href="<{$sk_url}>">ordering info</a></li>
        <{if $manager_url != ""}><li><a href="<{$manager_url}>">blog</a></li><{/if}>
        <li><a href="<{$view_inq_url}>">contact</a></li>
        <{* フリーページをヘッダーメニューに追加 (PC用) *}>
        <!-- <li><a href="?mode=f1">freepage1</a></li> -->
        <!-- <li><a href="?mode=f2">freepage2</a></li> -->
    </ul>

ここで注意ですが、このテンプレートを使用するのならカテゴリー名も英語表記にしているほうが美しく見えます。

それでは表示できたカテゴリーのボタンを押してください。
何も表示されませんね。

安心してください。エラーではありません。残念ながらBitにはカテゴリーのページを表示する機能がありません。
ですので、カテゴリーの表示をするためにテンプレートをさらにカスタマイズする必要があります。

では、テンプレートのカスタマイズを行っていきます。

商品一覧テンプレートの編集

商品一覧テンプレートを作りますが非常に簡単にできます。
商品検索結果のテンプレートをコピーして少しだけ変更して商品一覧テンプレートとして更新するだけです。

まずは「商品検索結果」の「HTML/CSS編集」をクリックしてください。

表示されたHTMLをTeraPadなどのテキストエディタにコピー&ペーストしてください。

    <h2 class="google-font">all items</h2>

上記の部分を探してください。(初期状態でしたら3行目になります。)
この部分を変更します。

変更後がこちらです。

    <h2 class="google-font">
        <{if $sid_name != ""}>
            <{$sid_name}>
        <{elseif $bid_name != ""}>
            <{$bid_name}>
        <{else}>
            該当のカテゴリーがありません
        <{/if}>
    </h2>

小カテゴリーの名前も表示するようにしていますが、小カテゴリーはこのカスタマイズには推奨しません。

「商品一覧」の「HTML/CSS編集」をクリックしてください。

表示されたらHTMLの項目に先程変更したHTMLファイルを全て貼り付けてください。

これでメニュー部分にカテゴリーが表示されて、カテゴリーをクリックするとそのカテゴリーの商品が表示されるようになったと思います。

簡単だと思いますのでぜひ試してください。

  • ブログランキングへ
  • にほんブログ村


カテゴリー:カラーミーショップ
タグ:

Comments

  1. 名無し より:

    こんにちは。

    初心者の質問で申し訳ありません。
    一番最後の『表示されたらHTMLの項目に先程変更したHTMLファイルを全て貼り付けてください。』の部分がよくわからなかったのですがファイルを貼り付けるとはどのようにしたらいいのでしょうか?

    • hiroshi より:

      名無し様

      商品一覧のHTML/CSS編集をクリックして表示されるHTMLの項目の部分に、変更後のHTMLを貼り付けて頂ければ大丈夫です。

コメントを残す

プロフィール

嫁と4歳の息子の3人暮らしの30代後半のサラリーマンです。
詳しいプロフィール

カレンダー

2017年3月
« 2月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • ブログランキングへ
  • にほんブログ村

TOPに戻る