カラーミーショップで複数階層のカテゴリーリストを表示する方法

Pocket

カラーミーショップの無料テンプレートに実装されているカテゴリーリストは1階層のみとなっており、複数階層のカテゴリーを表示するにはカスタマイズが必要になります。

ここではテンプレートに直接リンクを記述する方法と、独自タグを使って動的にカテゴリーリストを表示する方法を紹介します。

カラーミーショップで複数階層のカテゴリーを表示する

カテゴリーのリンクを直接テンプレートに記述する

一番分かりやすいのはこちらの方法。カラーミーのタグを一切使用せずにHTMLのliタグでリンクを自作します。カテゴリーのリンクURLはカテゴリー設定画面から取得できます。

<ul>
    <li>
        <a href="link_url">カテゴリー大</a>
        <ul>
            <li><a href="link_url">カテゴリ小</a></li>
            <li><a href="link_url">カテゴリ小</a></li>
            <li><a href="link_url">カテゴリ小</a></li>
        </ul>
    </li>
    <li>
        <a href="link_url">カテゴリー大</a>
        <ul>
            <li><a href="link_url">カテゴリ小</a></li>
            <li><a href="link_url">カテゴリ小</a></li>
            <li><a href="link_url">カテゴリ小</a></li>
        </ul>
    </li>
</ul>

カラーミーキットで上記のコードを使用した場合は以下のようになります。スタイル用のclassをつけていないので見た目はおかしいですが、リンクは機能しています。
カラーミーショップでカテゴリ一覧を複数階層表示する

カラーミーのタグを使って自動的にカテゴリーを表示する

カラーミーショップの独自タグを使って自動的にカテゴリーを表示する方法もあります。独自タグマニュアルには記載されていませんが、以下のコードを使用するとカテゴリーが複数階層で表示されます。

<ul>
  <{foreach from=$category item=cat name=cat}>
    <li>
      <a href="<{$cat.link_url}>"><{$cat.name}></a>
      <{foreach from=$subcategory[$cat.bid] item=scat name=scat}>
        <{if $smarty.foreach.scat.first}><ul><{/if}>
          <li>
            <a href="<{$scat.link_url}>"><{$scat.name}></a>
          </li>
        <{if $smarty.foreach.scat.last}></ul><{/if}>
      <{/foreach}>
    </li>
  <{/foreach}>
</ul>

カラーミーキットに記述した場合は以下のようになります。先ほどの直接記述する場合と同じように表示されています。
カラーミーショップでカテゴリ一覧を複数階層表示する2

ここで紹介したカテゴリーの複数階層表示はTetraThemesで販売中のテンプレートにも実装されています。カラーミーキットを使用したレスポンシブレイアウトがすでに用意されているので、カスタマイズのベースとしてもおすすめ。

  • 松本

    カラーミーでカテゴリー+子カテゴリー名をTOPページに表示しようと試行錯誤しています。
    こちらのページを参考にいろいろ試しましたが、登録カテゴリーの一部だけを選択して表示するようなことは可能でしょうか?

    例えば登録カテゴリーが10個あるとして、3番目5個だけ表示、さらにそれぞれの子カテゴリー名を表示のようなことです。

    foreachを使って試しましたが、section loopのようにstartやmaxの設定方法が見つからず、逆にsection loopだと、子カテゴリー名が表示できません。
    私の知識不足なのか、機能的に難しいのか、堂々巡りになってしまいました。何か良い方法はありますでしょうか。

    • Takeshi

      smartyのドキュメント見ると、iterationかindexが使えそうです。
      5個だけ回す場合は{if $smarty.foreach.scat.index < 5 }とかでいけないでしょうか?

      • 松本

        返信ありがとうございました。
        アドバイスを参考に試行錯誤してみましたがうまくできませんでした。
        もう少しいろいろ試してみます。
        ありがとうございました。