小粋空間  -  a cheap joke and a play on words site

Movable Typeで親カテゴリーアーカイブに表示した記事のメインカテゴリまでのパンくずリストを表示する

Movable Typeで親カテゴリーアーカイブに表示した記事のメインカテゴリーまでのパンくずリストを表示するカスタマイズを紹介します。

最近、nanapiのカテゴリ構成を参考にしていて、そこからのネタです。

１．完成イメージ

nanapiのカテゴリページの記事一覧は下のスクリーンショットのようになっています。

（クリックで拡大）

上部に現在のカテゴリのパンくずリストがあり、そのカテゴリに属する記事一覧が下にずらっと表示されます。

ポイントは記事一覧に表示されているカテゴリで、その記事が属するメインカテゴリのパンくずリストが表示されるようになっています。

上のスクリーンショットの場合、現在のカテゴリは「料理＞料理レシピ＞おかずのレシピ＞野菜のおかず」ですが、一番上に表示されている記事のカテゴリは「料理＞料理レシピ＞おかずのレシピ＞野菜のおかず＞キノコ類＞エリンギ」と、現在のカテゴリのサブカテゴリまで表示されています。

このエントリーで紹介するカスタマイズは、記事一覧に表示されているパンくずリストの作り方です。

２．親カテゴリーアーカイブに表示した記事のメインカテゴリまでのパンくずリスト

親カテゴリーアーカイブに表示した記事のメインカテゴリまでのパンくずリストを表示するには、カテゴリアーカイブの記事に赤色部分のようなサブテンプレートを追加します。

なお、このカスタマイズを行う場合、カテゴリアーカイブのMTEntriesタグをMTEntriesWithSubCategoriesタグに変更してください。

<mt:EntriesWithSubCategories>
…中略…
  <mt:EntryPrimaryCategory>
    <mt:ParentCategories glue=" &amp;raquo; ">
      <a href="<$MTCategoryArchiveLink$>"><$mt:CategoryLabel$></a>
    </mt:ParentCategories>
  </mt:EntryPrimaryCategory>
…中略…
</mt:EntriesWithSubCategories>

まず、一番外側のMTEntryPrimaryCategoryタグを使って記事のメインカテゴリのコンテキストに移動します。

次にMTParentCategoriesタグを使って、最上位の親カテゴリからメインカテゴリまでの一覧を出力します。glueモディファイアを利用すれば区切り文字を簡単に設定できます。

あとは、各カテゴリごとにMTCategoryArchiveLinkタグとMTCategoryLabelタグを使ってカテゴリページへのテキストリンクを出力します。

完成例

３．途中のカテゴリリンクを表示したくない場合

もし途中のカテゴリに直接属する記事がなく、そのカテゴリのリンクを表示したくない場合は、次のようにMTIfタグを追加します。

<mt:EntriesWithSubCategories>
…中略…
  <mt:EntryPrimaryCategory>
    <mt:ParentCategories glue=" &amp;raquo; ">
      <mt:if tag="CategoryCount">
        <a href="<$MTCategoryArchiveLink$>"><$mt:CategoryLabel$></a>
      <mt:else>
        <$mt:CategoryLabel$>
      </mt:if>
    </mt:ParentCategories>
  </mt:EntryPrimaryCategory>
…中略…
</mt:EntriesWithSubCategories>