【MT7】記事の親カテゴリと子カテゴリの出力方法

## はじめに
**MovableType7**
記事のトップレベルカテゴリ（親カテゴリ）、サブカテゴリ（子カテゴリ）の表示方法について。


## やりたいこと


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/dcbae0b8-74fa-6c26-e873-26937922c75a.png)
・以下の構造にしたい
　親カテゴリ1
　　├ 子カテゴリA
　　├ 子カテゴリB
　親カテゴリ2
　　├ 子カテゴリC
　　├ 子カテゴリD
　　├ 子カテゴリE

・親に所属するサブカテゴリの記事が1件もなければ、親カテゴリ名＆サブカテゴリのラベルを表示しない（子カテゴリAと子カテゴリBがそれぞれ0件の場合、親カテゴリ1ごと非表示にする）
・サブカテゴリの記事が0件なら、そのラベルを表示しない

## カテゴリの管理

記事 ＞ カテゴリ　の中身はこのようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/fe84d5ca-66fb-924f-d252-14bd8add17ca.png)
ドラッグでカテゴリを自由に移動させることができます。

ここではそれぞれ
・**トップレベルカテゴリ**：「48グループ」や「坂道グループ」
・**サブカテゴリ**：「AKB48」や「乃木坂46」など

・**カテゴリ名**：「48グループ」、「AKB48」、「坂道グループ」、「乃木坂46」などのこと。
・**出力ファイル／フォルダ名**：設定された値（ベースネーム）のこと。「group48」、「akb」、「group46」、「nogi46」など。

を指します。


## 全体のコード

```
<div class="categoryList">
  <h3 class="categoryList__heading">Keyword</h3>
  <mt:ignore>▼ 出力用htmlを変数に格納</mt:ignore>
  <$mt:SetVar name="output_html"$>
  <mt:TopLevelCategories>
    <mt:ignore>▼ カウント用の変数を格納</mt:ignore>
    <$mt:SetVar name="count_subcat" value="0"$>

    <mt:setvarblock name="counter">
      <mt:SubCategories>
        <mt:If tag="CategoryCount"><$mt:SetVar name="count_subcat" op="++"$></mt:If>
      </mt:SubCategories>
    </mt:setvarblock>
    <mt:setvarblock name="subCategory">
      <mt:SubCategories>
        <mt:If tag="CategoryCount"><li><a href="<$mt:CategoryArchiveLink regex_replace='$compress_pattern',''$>"><$mt:CategoryLabel$></a></li></mt:If>
      </mt:SubCategories>
    </mt:setvarblock>

    <mt:ignore>▼ サブカテゴリの記事数をカウント。(++: 値に1を加算していく)</mt:ignore>
    <$mt:var name="counter"$>
    <mt:ignore>▼ count_subcatが1以上の場合(0と空の場合はfalse)</mt:ignore>
    <mt:if name="count_subcat">
      <mt:ignore>▼ トップレベルカテゴリとサブカテゴリをappendで出力用htmlに追加(値を連結していく)</mt:ignore>
      <mt:SetVarBlock name="output_html" append="1">
        <h4 class="categoryList__heading2"><$mt:CategoryLabel$>から探す</h4>
        <ul class="listTag">
          <$mt:var name="subCategory"$>
        </ul>
      </mt:SetVarBlock>
    </mt:if>
  </mt:TopLevelCategories>
  <mt:ignore>▼ mt:TopLevelCategoriesが終わってから、出力用htmlを出力させる</mt:ignore>
  <$mt:Var name="output_html"$>
</div>
```


## 説明
```
<mt:ignore>▼ 出力用htmlを変数に格納</mt:ignore>
  <$mt:SetVar name="output_html"$>
```
まずはじめに、「最終的に出力するhtmlを格納する変数」（output_html）を定義。




```
<mt:TopLevelCategories>

　～省略～

　　<mt:setvarblock name="counter">
      <mt:SubCategories>
        <mt:If tag="CategoryCount"><$mt:SetVar name="count_subcat" op="++"$></mt:If>
      </mt:SubCategories>
    </mt:setvarblock>

    <mt:setvarblock name="subCategory">
      <mt:SubCategories>
        <mt:If tag="CategoryCount">
          <li><a href="<$mt:CategoryArchiveLink regex_replace='$compress_pattern',''$>"><$mt:CategoryLabel$></a></li>
        </mt:If>
      </mt:SubCategories>
    </mt:setvarblock>

　～省略～
```

mt:SubCategoriesのループ内で記事の数をカウントする。

・**変数 counter**
　トップレベルカテゴリに所属していて、1件以上の記事があるサブカテゴリの数をカウントする変数として定義しています。

・**MTCategoryCount**
　カテゴリに含まれる記事の件数を表示させます。未公開の記事は含みません。

・**opモディファイア**
　四則計算が可能な演算関数。
　++はインクリメント（増加）の意味。


```
  <mt:TopLevelCategories>

    ～省略～

    <mt:ignore>▼ サブカテゴリの記事数をカウント。(++: 値に1を加算していく)</mt:ignore>
    <$mt:var name="counter"$>

    <mt:ignore>▼ count_subcatが1以上の場合(0と空の場合はfalse)</mt:ignore>
    <mt:if name="count_subcat">
      <mt:ignore>▼ トップレベルカテゴリとサブカテゴリをappendで出力用htmlに追加(値を連結していく)</mt:ignore>
      <mt:SetVarBlock name="output_html" append="1">
        <h4 class="categoryList__heading2"><$mt:CategoryLabel$>から探す</h4>
        <ul class="listTag">
          <$mt:var name="subCategory"$>
        </ul>
      </mt:SetVarBlock>
    </mt:if>
  </mt:TopLevelCategories>
```
・**var name="counter"**
　前述で定義した変数
```
<mt:setvarblock name="counter">～</mt:setvarblock>
```
の値を呼び出しています。

・**if name="count_subcat"**
　count_subcatが1以上の場合（サブカテゴリの件数が1件以上の場合）の記述。

・**mt:SetVarBlock name="output_html" append="1"**
　この中に最終的に出力させるhtmlを記述しています。
　appendモディファイアは「1」を設定すると、変数に代入されている値の後に、値を連結することができます。

・**mt:CategoryLabel**
 　カテゴリ名を表示するタグ


```
<mt:ignore>▼ mt:TopLevelCategoriesが終わってから、出力用htmlを出力させる</mt:ignore>
  <$mt:Var name="output_html"$>
```
最後に全部まとめて出力させます。


## 参考サイト

[テンプレートタグで利用できる演算関数  | MovableType テンプレートタグリファレンス](https://www.movabletype.jp/documentation/mt6/design/templates/calculation.html)

[MTCategoryCount  | MovableType テンプレートタグリファレンス](https://www.movabletype.jp/documentation/appendices/tags/categorycount.html)

[MTSetVarBlock  | MovableType テンプレートタグリファレンス](https://www.movabletype.jp/documentation/appendices/tags/setvarblock.html)

[MTCategoryLabel  | MovableType テンプレートタグリファレンス](https://www.movabletype.jp/documentation/appendices/tags/categorylabel.html)