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

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で販売中のテンプレートにも実装されています。カラーミーキットを使用したレスポンシブレイアウトがすでに用意されているので、カスタマイズのベースとしてもおすすめ。