Movable Typeで記事に紐づいたカテゴリの並び順を制御する

Movable Typeで記事に紐づいたカテゴリを表示する際、管理画面上の並び順で表示することが標準機能だとできないようだったので、対応方法をメモしておきます。

サンプルコード

今回試すのは、管理画面上で以下並び順のカテゴリになります。(カッコは出力ファイル名)

• 777 (777)
• 漢字 (kanji)
• Banana (banana)
• あいうえお (aiueo)
• Apple (apple)
• 12345 (12345)
• わをん (wawon)

上記カテゴリを全てチェックした記事を用意して、まずは特に設定しないで出力するとどうなるかを試してみます。

<mt:Entries>
<article class="article">
  <mt:EntryCategories>
    <div><mt:CategoryLabel></div>
  </mt:EntryCategories>
</article>
</mt:Entries>

結果としては以下の通りで、おそらく五十音順の並びになるようです。

<article class="article">
    <div>12345</div>
    <div>777</div>
    <div>Apple</div>
    <div>Banana</div>
    <div>あいうえお</div>
    <div>わをん</div>
    <div>漢字</div>
</article>

記事に紐づいたカテゴリの一覧を出力する場合はMTEntryCategoriesを使う必要がありますが、公式のリファレンスを見る限り並び順についての記載はないようでした。

次にMTTopLevelCategories などで設定できる、sort_by=”user_custom” (管理画面の並び順)を試してみます。

<mt:Entries>
<article class="article">
  <mt:EntryCategories sort_by="user_custom">
    <div><mt:CategoryLabel></div>
  </mt:EntryCategories>
</article>
</mt:Entries>

結果としては先ほどと変わらず五十音順での並び順のままで、sort_byは効かないようでした。

MTの標準機能だと対応できなさそうなので、処理を作成して対応してみます。

<mt:Ignore><!-- 管理画面上の並び順でカテゴリの名前の配列を取得 --></mt:Ignore>
<mt:TopLevelCategories>
<mt:SetVarBlock name="catNames" function="push"><$mt:CategoryLabel$></mt:SetVarBlock>
</mt:TopLevelCategories>

<mt:Entries>
<article class="article">
  <mt:Ignore><!-- 記事に紐づいているカテゴリの名前の配列を取得 --></mt:Ignore>
  <mt:EntryCategories>
    <mt:SetVarBlock name="thisCatNames" function="push"><$mt:CategoryLabel$></mt:SetVarBlock>
  </mt:EntryCategories>

  <mt:Ignore><!-- 管理画面の並び順のカテゴリでループ --></mt:Ignore>
  <mt:Loop name="catNames">
    <mt:SetVarBlock name="thisCatName"><mt:Var name="__value__"></mt:SetVarBlock>
    <mt:Ignore><!-- 記事に紐づいているカテゴリでループ --></mt:Ignore>
    <mt:Loop name="thisCatNames">
      <mt:Ignore><!-- カテゴリ名が一致する場合は出力 --></mt:Ignore>
      <mt:If name="thisCatName" eq="$__value__">
        <div><mt:Var name="__value__"></div>
      </mt:If>
    </mt:Loop>
  </mt:Loop>

</article>
</mt:Entries>

処理の流れとしてはコード内にコメントで記載している通りです。
他のカテゴリ情報を出力したい場合は9〜11行目の取得の際に別の変数で値を取得しておく、管理画面上の並び順以外に並べ替えたい場合は2行目のMTTopLevelCategoriesにsort_byで任意の並び順で指定すれば対応可能です。

これで出力を行うと、管理画面上の並び順で表示することができました。

<article class="article">
        <div>777</div>
        <div>漢字</div>
        <div>Banana</div>
        <div>あいうえお</div>
        <div>Apple</div>
        <div>12345</div>
        <div>わをん</div>
</article>

補足として、記事単位で入れ子のループ処理を実行する必要があるため、記事数が多くなればなるほど再構築への影響が大きくなる点注意が必要です。