Movable Typeでパンくずリストを作る

Movable Typeでパンくずリストを作る

Posted at February 19,2012 3:33 AM
Tag:[Crumbs, MovableType]

Movable Typeでパンくずリストを作る方法です。当ブログでオーソドックなパンくずリストの作り方の記事がまだなかったので、本エントリーでまとめることにします。

1.カテゴリアーカイブページにパンくずリストを表示

カテゴリアーカイブページに次のようなパンくずリストを表示します。

カテゴリアーカイブページのパンくずリスト

スクリーンショットのように表示するには、カテゴリアーカイブページ用のテンプレート(「カテゴリ別ブログ記事リスト」テンプレートなど)に以下のサブテンプレートをはりつけます。

<div class="breadcrumb">
  <a href="<$mt:BlogURL$>">TOP</a> &raquo;
<mt:ParentCategories glue=" &raquo; ">
  <a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
</mt:ParentCategories>
</div>

「TOP »」はサブテンプレートに直接記述しています。

カテゴリはMTParentCategoriesタグを使って、親カテゴリから現在のカテゴリまでを順番に表示します。カテゴリページへのリンクはMTCategoryArchiveLinkタグを利用します。

MTParentCategoriesタグにglueモディファイを利用すれば、カテゴリを並べて表示する際の区切り文字をいれてくれます。ここでは区切り文字に「»」の実体参照である「&raquo;」を設定しています。

現在のカテゴリにカテゴリページへのリンクを設定したくない場合は、MTParentCategoriesタグで処理しているカテゴリとそのページのカテゴリを比較して、等しい場合のみMTCategoryArchiveLinkタグを適用しないようにします。

<div class="breadcrumb">
<$mt:CategoryID setvar="cat_id"$>
  <a href="<$mt:BlogURL$>">TOP</a> &raquo;
<mt:ParentCategories glue=" &raquo; ">
  <$mt:CategoryID setvar="current_cat_id"$>
  <mt:if name="current_cat_id" eq="$cat_id">
    <$mt:CategoryLabel$>
  <mt:else>
    <a href="<$mt:CategoryArchiveLink$>">
<$mt:CategoryLabel$></a>
  </mt:if>
</mt:ParentCategories>
</div>

これで末端のカテゴリにリンクが表示されなくなります。

カテゴリアーカイブページのパンくずリスト

2.ブログ記事ページにパンくずリストを表示

ブログ記事ページに次のようなパンくずリストを表示します。

カテゴリに属しているブログ記事のパンくずリスト

スクリーンショットのように表示するには、ブログ記事ページ用のテンプレート(「ブログ記事」テンプレートなど)に以下のサブテンプレートをはりつけます。

<div class="breadcrumb">
  <a href="<$mt:BlogURL$>">TOP</a> &raquo;
<mt:ParentCategories glue=" &raquo; ">
  <a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
</mt:ParentCategories>
<mt:if tag="EntryCategory"> &raquo; </mt:if><$mt:EntryTitle$>
</div>

構造は1項のサブテンプレートとほぼ同じです。異なるのはカテゴリを表示したあとに、ブログ記事を表示するようにしています(赤色部分)。

カテゴリに属さないブログ記事があることも考慮し、MTIfタグでMTEntryCategoryタグを判定し、カテゴリが設定されている場合のみ、ブログ記事タイトルの直前に「&raquo;」を表示するようにしています。

この制御を行うことで、カテゴリに属していないブログ記事のパンくずリストは次のように表示します。

カテゴリに属していないブログ記事のパンくずリスト

3.ウェブページのパンくずリスト

ウェブページのパンくずリストについては「Movable Typeのパンくずリストでフォルダの代わりにウェブページを表示する」を参照してください。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


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

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

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

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