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

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

Posted at December 10,2012 12:03 AM
Tag:[Category, MovableType]

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

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

1.完成イメージ

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

(クリックで拡大)
nanapiのカテゴリページ

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

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

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

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

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

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

なお、このカスタマイズを行う場合、カテゴリアーカイブの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タグを使ってカテゴリページへのテキストリンクを出力します。

完成例
完成例

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

もし途中のカテゴリに直接属する記事がなく、そのカテゴリのリンクを表示したくない場合は、次のように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>
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)