【Movable Type】プラグインを使わずにMTEntryCategoriesタグを管理画面の並び順に表示&glueモディファイアで出力する方法!

movable_type_mt_entry_categories_main.png

こんにちは。
プロフィールにも書いている通り「CMS構築に奮闘する」デザイナーの森田です。

今回は、Movable Type構築の中でいつも悩まされていた、記事のカテゴリ並び順表示で、
求めていた実装にたどり着けたため、試行錯誤した過程も含めて記事にまとめました。

一刻も早く最終結果を見たい方はこちらから!

一回目の実装

[参考記事]
Movable Typeでカテゴリ一覧の並び順を変更する

こちらの記事で「MTTopLevelCategoriesやMTSubCategoriesだとsort_byが使える」
→Movable Typeのsort_by標準の並び順はuser_custom、
 つまり管理画面で並び替えた順番でカテゴリの一覧を出力できることを知りました。

しかし、MTTopLevelCategoriesやMTSubCategoriesでは、glueモディファイアは使えないため、
以下の対処法で解決することに。

[参考記事]
MTTopLevelCategories/MTSubCategoriesタグでglueモディファイアと同様の処理を行う

同一の親を持つカテゴリの中で、カテゴリの間にglueを出力する場合は、

<mt:TopLevelCategories>
  <$mt:CategoryLabel$>
  <mt:SubCatIsLast><mt:Else>/</mt:SubCatIsLast>
</mt:TopLevelCategories>

とすると実現できそう!と思い実装。

ぱっと見うまくいったようでした
が・・・・・駄目っ

上記では「現在のカテゴリに関わりなく、最上位のカテゴリを一覧表示する」ブロックタグであるため、
記事で選択したカテゴリの表示ではありませんでした。
ということで別策を探すことに。

二回目の実装

[参考記事]
MTEntryCategoriesタグで表示順を管理画面の並びかえ順にする。

やりたかったことはまさにこれ!
サンプルでは、特定のカテゴリ配下の並び順をコントロールする書き方になっているため、
mt:ifで特定カテゴリの条件、mt:SubCategoriesで下層カテゴリの出力、
mt:HasParentCategoryで親カテゴリがある場合の分岐をしていますが、
今回私が実装したかった上位カテゴリだけの構成であれば、以下の書き方で良さそうです。

<mt:TopLevelCategories> 
  <mt:CategoryID setvar="setCategoryID">
    <mt:EntryCategories>
      <mt:if tag="CategoryID" eq="$setCategoryID">
      <$mt:CategoryLabel$>
    </mt:if>
  </mt:EntryCategories>
</mt:TopLevelCategories>

やった~これで解決だ!
と思った矢先「複数カテゴリ選択した際に、区切り付きで表示したい箇所があるんだった」と思い出し、
さらに調査を進めることに。

三回目の実装

一回目の実装で行った<mt:SubCatIsLast><mt:Else>/</mt:SubCatIsLast>を、 先ほどのテンプレートに追加すればいいのでは?と以下にしてみました。

<mt:TopLevelCategories>
  <mt:CategoryID setvar="setCategoryID">
  <mt:EntryCategories>
    <mt:if tag="CategoryID" eq="$setCategoryID">
    <$mt:CategoryLabel$>
    <mt:SubCatIsLast>
    <mt:Else>
      /
    </mt:SubCatIsLast>
    </mt:if>
  </mt:EntryCategories>
</mt:TopLevelCategories>

実際複数選択の時は、いい感じに機能したように見えましたが、
カテゴリの選択数を変更すると、必要ないときにも区切り文字が表示されてしまうなど、
完ぺきとは言えず...この案はボツに。

四回目の実装(成功パターン)

[参考記事]
続・ブログ記事内で特定のカテゴリラベル表示

以前別の案件でも参考にさせていただいた、こちらの記事に舞い戻ってきました。
(いつもMovable Type構築の参考に一方的に大変お世話になっております!)

二回目の実装のテンプレートに配列の処理を加え、
このテンプレートはhtmlの外側に配置しておきます。

<$mt:SetVar name="categories" function="undef"$>
<mt:TopLevelCategories>
  <mt:CategoryID setvar="setCategoryID">
  <mt:EntryCategories>
    <mt:if tag="CategoryID" eq="$setCategoryID">
    <$mt:CategoryLabel setvar="category"$>
    <$mt:SetVar name="categories" function="push" value="$category"$>
    </mt:if>
  </mt:EntryCategories>
</mt:TopLevelCategories>

出力したい箇所に以下

<mt:Loop name="categories" glue="/">
  <$mt:Var name="__value__"$>
</mt:Loop>

を記述することで、glueモディファイアが使え、任意の区切り付きかつuser_custom並び順のカテゴリ表示が可能になりました!

別の案も

[参考記事]
MTでプラグインを使わずにカテゴリの表示順を任意に並び替える

以前実装した際には、上記と同様、頭に数字を付ける方法で行ったこともありました。
カテゴリ数が少ない場合は、こちらで行うほうが早かったかもしれません。
ただ、カテゴリ数が多く複雑な場合や、後からカテゴリが追加されたり、並び順が変わったりすることもあるので、
今回の実装方法を知ることができてよかったです。

さいごに

Movable Type構築、テンプレートタグの使い方について、
まだまだ奥が深く新しく知ることや勉強になることが多くあります。

参考にさせていただいた記事の皆さま方、本当にありがとうございます。
先人の知恵をお借りしつつ、あれやこれや試行錯誤し実装することができました。

プラグインを使ったほうが早かったり、もっと簡単な方法もあったりするかもしれませんが、
環境によってプラグインが使えない場合もあるので、記録として残しておきたいと思います。
こちらの記事がまた誰かの助けになれば幸いです。それでは!


弊社では、Movable TypeやWordPressを使用したCMS構築・サイト制作を行っております。
制作のご依頼など、ぜひお気軽にお問い合わせください。

お気軽にご依頼・ご相談ください

前へ

DALL-E3で画像生成をデザインの実務で使えるか試してみた!

次へ

.NET 6+, MAUIで使えるデバイステストランナーを紹介します。