カテゴリ一覧のアコーディオン表示(解説その2)

昨日の続きで、カテゴリ一覧のアコーディオン表示について解説します。

1.最初／最後のカテゴリの判断

サブカテゴリの一覧を出力する際には、最初のカテゴリの前に<ul>タグを出力し、最後のカテゴリの後に</ul>タグを出力する必要があります。
したがって、「一覧の最初（最後）のカテゴリ」を判断することが必要になります。
これは、それぞれMTSubCatIsFirstタグ／MTSubCatIsLastタグで行うことができます。

ただし、今取り上げている例では、トップレベルカテゴリの一覧を出力する際には、<ul>／</ul>のタグは出力しません（h2タグでマークアップするため）。
そこで、「トップレベルカテゴリでなく、かつ一覧の最初（最後）のカテゴリ」を判断する必要があります。
これは、MTHasSubCategoryタグのブロックの中で、MTSubCatIsFirstタグ／MTSubCatIsLastタグを使うことで行うことができます。

ここまでの話に基づいてテンプレートを書くと、以下のようになります。 

<mt:TopLevelCategories>
<mt:SubCatIsFirst>
  <mt:HasParentCategory>
    <ul>
  </mt:HasParentCategory>
</mt:SubCatIsFirst>
<mt:HasParentCategory>
  <li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
<mt:Else>
  <h2><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></h2>
</mt:HasParentCategory>
<$mt:SubCatsRecurse$>
<mt:HasParentCategory>
  </li>
</mt:HasParentCategory>
<mt:SubCatIsLast>
  <mt:HasParentCategory>
    </ul>
  </mt:HasParentCategory>
</mt:SubCatIsLast>
</mt:TopLevelCategories>

2～6行目によって、サブカテゴリ一覧の先頭に<ul>タグが出力されます。
また、16～20行目によって、サブカテゴリ一覧の最後に</ul>タグが出力されます。

2.カテゴリの階層のカウント

今取り上げている例では、トップレベル直下のサブカテゴリを出力する部分を、<div class="pane">～</div>のdiv要素で囲む必要があります。
このためには、現在出力中のカテゴリの階層の深さを調べることが必要になります。

ただ、階層の深さを表すテンプレートタグはありません。
そこで、変数を使って階層の深さを記憶するようにします。変数名は「depth」にします。

階層の深さを変数に記憶するには、以下のような処理を行えばよいです。

  • depthの値を0に初期化する
  • カテゴリ一覧の先頭のカテゴリを出力する前で、depthの値を1つ増やす
  • カテゴリ一覧の最後のカテゴリを出力した後で、depthの値を1つ減らす

このようにすると、あるカテゴリにサブカテゴリがある時には、MTSubCatsRecurseタグの効果で、カテゴリの階層を下るたびにdepthの値が1つ増えます。
また、上の階層に戻るたびにdepthの値が1つ減ります。
結果として、depthは常に階層の深さを表すようになります。

実際にこの処理を組み込むと、テンプレートは以下のようになります。
4行目のMTSetVarタグで、カテゴリ一覧の先頭で変数depthの値を1増やします。
また、22行目のMTSetVarタグで、カテゴリ一覧の最後で変数depthの値を1減らします。 

<mt:SetVar name="depth" value="0">
<mt:TopLevelCategories>
<mt:SubCatIsFirst>
  <mt:SetVar name="depth" op="++">
  <mt:HasParentCategory>
    <ul>
  </mt:HasParentCategory>
</mt:SubCatIsFirst>
<mt:HasParentCategory>
  <li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
<mt:Else>
  <h2><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></h2>
</mt:HasParentCategory>
<$mt:SubCatsRecurse$>
<mt:HasParentCategory>
  </li>
</mt:HasParentCategory>
<mt:SubCatIsLast>
  <mt:HasParentCategory>
    </ul>
  </mt:HasParentCategory>
  <mt:SetVar name="depth" op="--">
</mt:SubCatIsLast>
</mt:TopLevelCategories>